Displaying Product Options

Product options are product properties with which a user can select on a product page, for example a product color. Product options do not affect the product price. You can render product properties as a drop-down list, or radio buttons.

We recommend you to create a separate partial for displaying product options. Using partials can keep your product page code clean and easy to read. Start with creating a new partial and assign it some meaningful name, for example shop:product_options.

For simplicity reasons, the following code outputs only option labels and drop-down lists.

<? if ($product->options->count): ?>
  <? foreach ($product->options as $option):
    $control_name = 'product_options['.$option->option_key.']';
    $posted_options = post('product_options', array());
    $posted_value = isset($posted_options[$option->option_key]) ? $posted_options[$option->option_key] : null;
  ?>
    <label><?= h($option->name) ?>:</label>
    <select name="<?= $control_name ?>">
      <?
        $values = $option->list_values();
        foreach ($values as $value):
      ?>
        <option <?= option_state($posted_value, $value) ?> value="<?= h($value) ?>"><?= h($value) ?></option>
      <? endforeach ?>
    </select>
  <? endforeach ?>
<? endif ?>

{% if product.options.count %}
  {% for option in product.options %}
    {% set values = option.list_values() %}
    {% set control_name = 'product_options['~option.option_key~']' %}
    {% set posted_options = post('product_options', []) %}
    {% set posted_value = posted_options[option.option_key] is defined ? posted_options[option.option_key] : null %}
    
    <label>{{ option.name }}:</label>
    <select name="{{ control_name }} ?>">
      {% for value in values %}
        <option {{ option_state(posted_value, value) }} value="{{ value }}">{{ value }}</option>
      {% endfor %}
    </select>
  {% endfor %}
{% endif %}

The first line of the example code checks whether any product options were assigned to the product. PHP foreach loop iterates over the list of product options, contained in the $options field of the $product object. For each options object, a label and SELECT element is created. Please note how the SELECT element name is formed. It has values like product_options[option_key]. Elements named in this way are creating array-type values in PHP when sent to the server. You should not change the names of SELECT elements, otherwise LemonStand will not be able to process product options correctly.

Each product option has a list of available option values assigned. To obtain a list of values, the list_values() method of the $option object is called. The list of values is then used for generating OPTION elements with corresponding values and labels. The option_state function is used to determine whether a specific option value was selected by a visitor, before the product page reloaded. The product page could be reloaded if a visitor selects another grouped product, or adds the product to the cart.

Once you finish developing the partial, you can output the list of product options on the product page, below the product description or in any other place, but inside the FORM element:

<? $this->render_partial('shop:product_options') ?>

{{ render_partial('shop:product_options') }}

See also:

• Shop_Product class

Next: Displaying Extra Product Options
Previous: Displaying a List of Product Attributes
Return to Displaying a List of Products