REC & REC+

You can display options and attributes with their corresponding product on product category layout pages.

EXAMPLE 1 - OPTION DROPDOWN, QTY & ADD TO CART BUTTON

The code example below pulls the options onto the page as a drop down with a quantity input field:

{% if product.options %}

                {% for group, options in product.options | group_by('group') %}

                    <span class="pcl-product-options">{{ group | title }}:

                        <select name="" id="">

                        {% for option in options %}

                            <option value="{{ option.id }}">{{ option.desc }}</option>

                        {% endfor %}

                        </select>

                    </span>

                {% endfor %}

            {% endif %}

This javascript gives the functionality to add to cart and enter a quantity:

//

// add-to-cart product links

//

jQuery(function ($) {

    $('a[data-add-product-id]').click(function () {

        var $this = $(this),

            productId = $this.data('add-product-id');

            quantityInput = $this.parent('.pcl-product-add-to-cart').siblings('label').find('input'),

            quantity = quantityInput.val() ? quantityInput.val() : '1',

            optionInputs = $this.parent('.pcl-product-add-to-cart').siblings('.pcl-product-options').find('select'),

            options = {};

        optionInputs.each(function (i, e) {

            options[i] = $(e).val();

        });

        REC.Cart.addItem(productId, $(this).siblings('label').find('input').val(), options);

        $this.html('Added, Thanks!');

        setTimeout(function () {

            $this.html('Add To Cart');

        }, 3000);

        return false;

    });

});

EXAMPLE 2 - ATTRIBUTE DROP DOWN

This displays attributes for a product as a drop-down, no javascript is needed:

{% if product.attributes %}

 <ul>

  {% for attribute in product.attributes %}

   <li>{{ attribute.attribute }}: {{ attribute.value }}</li>

  {% endfor %}

 </ul>

{% endif %}