Displaying a List of Grouped Products

Since July 10, 2012 the Grouped Products feature is disabled by default in new LemonStand installation in favor of the Option Matrix feature. You can enable grouped products by updating DISABLE_GROUPED_PRODUCTS configuration parameter value.

Grouped products are variations of a main product, which could affect the product price. For example, if you sell image prints, you can offer different sizes of the print – 10x15'' and 11x17''. Correspondingly, the print price will depend on a specific size. In LemonStand you solve this task by creating an image print product with 10x15'' size. Then you add a grouped product for an 11x17'' size and specify another price for it.

On the product page you output grouped products as a drop-down list. When a visitor selects an item on the list, the page reloads and displays an updated price and other information.

To output a list of grouped products, we recommend you to create a separate partial and place the code into it. Of course, you can place all product-related code directly into the product page, but by using partials you 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:grouped_products. You can also enter a partial description to the corresponding field.

To output a list of grouped products, you create an HTML code for a label element and a drop-down list (SELECT element), populated with available grouped products. A text for the label, and a list of grouped products are read from the $product variable which is always defined on the product page.

<? if ($product->grouped_products->count): ?>
  <label for="product_id"><?= h($product->grouped_menu_label) ?></label>
  <select id="product_id" name="product_id" onchange="$(this).getForm().submit()">
    <? foreach ($product->grouped_products as $grouped_product): ?>
      <option <?= option_state(post('product_id'), $grouped_product->id) ?>
        value="<?= $grouped_product->id ?>">
        <?= h($grouped_product->grouped_option_desc) ?>
      </option>
    <? endforeach ?>
  </select>
<? endif ?>

{% if field(product, 'grouped_products').count %}
  <label for="product_id">{{ field(product, 'grouped_menu_label') }}</label>
  <select id="product_id" name="product_id" onchange="$(this).getForm().submit()">
    {% for grouped_product in field(product, 'grouped_products') %}
      <option {{ option_state(post('product_id'), grouped_product.id) }} value="{{ grouped_product.id }}">
        {{ grouped_product.grouped_option_desc }}
      </option>
    {% endfor %}
  </select>
{% endif %}

First, the code checks whether any grouped products assigned to the product. If there are no grouped products assigned, we do not need output the label and drop-down list. If some grouped products are assigned, the code creates a label with text loaded from the $grouped_menu_label field of the $product object. You specify the value of this field in the Attribute Name field of the Grouped tab in the LemonStand Product page.

The SELECT element must have the name product_id. LemonStand inspects the value of this field when the page is reloaded, to load a specific grouped product. The onchange event handler forces the page to reload when any drop-down list item is selected. The JavaScript code specified in the event handler uses the LemonStand front-end JavaScript framework to find a parent FORM element.

The foreach loop iterates over a list of grouped products which are stored in the $grouped_products field of the $product object. The options_state function is used to mark a current product in the list. Returning to the example with image prints, when a visitor looks on the image print product with 11x17'' size, the corresponding item will be selected in the drop-down list.

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

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

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

See also:

• Shop_Product class

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