Reusing product swatch code on a collections page

New Member
5 0 0

Hello,

 

I have successfully implemented the Swatch code documented here for the Product page, but I'm struggling to make it work on the Collection page.

 

An error is shown recommending that change the code from 

{% include 'swatch' for product.options as swatch %}

which works on the product page, to 

{% include 'swatch' with 'pack size' %}

which clears the error, but will only add the initial variant to the cart.

 

Is there anything obvious that I'm missing? Complete Add to Cart form below, this works on the product page without issue:

{% if product.available %}
        {% form 'product', product, class:productform_class %}
          <select name="id" id="ProductSelect-{{ section.id }}" class="product-single__variants">
            {% for variant in product.variants %}
              {% if variant.available %}

                <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

              {% else %}
                <option disabled="disabled">
                  {{ variant.title }} - {{ 'products.product.sold_out' | t }}
                </option>
              {% endif %}
            {% endfor %}
          </select>

          {% comment %} Christy - Added for Swatch  {% endcomment %}
          {% if product.available and product.variants.size > 1 %}
            {% include 'swatch' for product.options as swatch %}
          {% endif %}

          <div class="product-single__quantity{% unless section.settings.product_quantity_enable %} is-hidden{% endunless %}">
            <label for="Quantity">{{ 'products.product.quantity' | t }}</label>
            <input type="number" id="Quantity" name="quantity" value="1" min="1" class="quantity-selector">
          </div>

          <button type="submit" name="add" id="AddToCart" class="btn collection-button {{ btn_class }}{% if section.settings.enable_payment_button %} btn--secondary{% endif %}">
            <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
          </button>

          {% if section.settings.enable_payment_button %}
            {{ form | payment_button }}
          {% endif %}
        {% endform %}
      {% endif %}

Thanks in advance for any help you can give me.

0 Likes