Add product with variant to cart from collection page

Highlighted
New Member
4 0 0

Hi 

We have a page http://www.promate.co.uk/collections/stereo-headsets wherin we are trying to add color swatches for customers to immediatly select and add to cart the product variant they require.

We are facing an issue currently , wherein the first variant gets added to the cart even though another variant is selected.

Kindly find the code below:

product-grid-item-category2.liquid

  <div class="action">
        {% assign variantCount = product.variants | size %}
        <form action="/cart/add" method="post" class="variants" id="product-actions-{{ product.id }}" enctype="multipart/form-data" style="padding:0px;">    
          {% if sold_out %}
          <input class="btn add-to-cart-btn unavailable" type="submit" value="Unavailable" disabled="disabled" />
          {% else %}
            {% if variantCount > 1 %}    
        <!--    <input class="btn" type="button" onclick="window.location.href='{{product.url}}'" value="Select options" />-->
          <input type="hidden" name="id" value="{{ product.variants.id }}" /> 
            {% else %}
            <input type="hidden" name="id" value="{{ product.variants[0].id }}" />      
           <!---- <input class="btn add-to-cart-btn" type="submit" value="Add to Cart" /> ---->
            {% endif %}
          {% endif %}
        </form>     
      </div>
      
      {% if settings.enable_quick_view %}
      <div class="quickview-button">
        <a href="javascript:void(0)" id="{{ product.handle }}" title="Quick View">Quick view</a>
      </div>
      {% endif %}
      
    </div>
   
  </div>
  
  <div class="product-bottom bottom2">
    <a class="product-title" href="{{ product.url | within: collection }}"><div class="product-title-div">{{ product.title}}</div></a>
     
    {% if settings.display_product_reviews %}
    <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
    {% endif %}
    
    <div id="product-variants">
                {% assign variantCount = product.variants | size %}
                {% if product.available %} 
                {% if variantCount > 1 %}	
      			<span style="float:right;">
                <select id="product-selectors" name="id" style="display:none">
                  {% for variant in product.variants %}
                  <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ product.variants.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
                  {% endfor %}
                </select>
                
                {% if settings.use_color_swatch %}
                {% for option in product.options %}
                {% include 'collectionswatch1' with 'Color' %}
                {% endfor %}
      </span>
                {% endif %}
                {% else %}
      			<div style="height:48px;">
                <input type="hidden" name="id" value="{{ product.variants[0].id }}" />
                </div>
                {% endif %}
                {% endif %}
    
    </div>
    
    
    <div class="price-box-category">
      {% if on_sale %}
     
        <section style="width: 100%;" class="sale">
         <div id="one" style="width: 15%;float:left;">
      		 <span class="old-price"> {{ product.compare_at_price_min | money }}</span><br>
       		 <span class="special-price">{% if product.price_varies %}<em>from </em>{% endif %}{{ product.price_min | money }}</span>
      	 </div>
      
   		 <div id="two" style="margin-left: 15%;">
      
           <input class="btn add-to-cart-btn" type="submit" value="Add to Cart" style="float:right;" />  
           
         </div>
      </section>
      <br>
       <hr>
   	   <div class="wishlist-category"> {% include 'wishlist-product' %}</div>
      
      
       
      {% else %}
      <p class="regular-product price-custom">
      {% comment %}
        You can show a leading 'from' or 'up to' by checking 'product.price_varies'
        if your variants have different prices.
      {% endcomment %}
       
         <span class="cat-price" >{% if product.price_varies %}<em>from </em>{% endif %}{{ product.price_min | money }}</span> 
       
        
       

        {% if sold_out %}
      <span class="unavailable"><input type="hidden" class="btn add-to-cart-btn" type="submit" value="Sold out" disabled="disabled" /></span>
          {% else %}
            
        <input class="btn add-to-cart-btn" type="submit" value="Add to Cart" style="float:right;" />
        {% endif %}

  
        
        
        <div>
{% if product.variants.first.inventory_quantity <= 0 %}

{% capture inventory %}{{ product.variants.first.inventory_quantity }}{% endcapture %}
   {% case inventory %}
       {% when '0' %}<span class="unavailable"><input class="btn add-to-cart-btn" type="submit" value="Sold out" disabled="disabled" /></span>
       {% when '-1' %} <span class="unavailable"> <input class="btn add-to-cart-btn" type="submit" value="Coming soon" disabled="disabled" /></span>
       {% when '-2' %}and is expected back in February
       {% when '-3' %}and is expected back in March
       {% when '-4' %}and is expected back in April
       {% when '-5' %}and is expected back in May
       {% when '-6' %}and is expected back in June
       {% when '-7' %}and is expected back in July
       {% when '-8' %}and is expected back in August
       {% when '-9' %}and is expected back in September
       {% when '-10' %}and is expected back in October
       {% when '-11' %}and is expected back in November
       {% when '-12' %}and is expected back in December
       {% else %} Sold out.
   {% endcase %}
{% endif %}
</div>
      
   

        <hr>
      <div class="wishlist-category"> {% include 'wishlist-product' %}</div>
      </p>
      {% endif %}
     
      
    </div>

collectionswatch1.liquid

 

{% comment %}
  Set the extension of your color files below. Use 'png', 'jpeg', 'jpg' or 'gif'.
{% endcomment %}

{% assign file_extension = 'png' %}

{% if collectionswatch1 == blank %}
<div class="swatch error">
  <p>You must include the snippet swatch.liquid with the name of a product option.</p> 
  <p>Use: <code>{% raw %}{% include 'swatch' with 'name of your product option here' %}{% endraw %}</code></p>
  <p>Example: <code>{% raw %}{% include 'swatch' with 'Color' %}{% endraw %}</code></p>
</div>
{% else %}

{% assign found_option = false %}
{% assign is_color = false %}
{% assign option_index = 0 %}

{% for option in product.options %}
  {% if option == collectionswatch1 %}
    {% assign found_option = true %}
    {% assign option_index = forloop.index0 %}
    <style>
      label[for="product-select-option-{{ option_index }}"] { display: none; }
      #add-to-cart-form .selector-wrapper {display:none}
      #product-select-option-{{ option_index }} { display: none; }
      #product-select-option-{{ option_index }} + .custom-style-select-box { display: none !important; }
    </style>
<script>//jQuery(window).load(function() { jQuery('.product-shop .selector-wrapper:eq({{ option_index }})').hide(); });</script>
    {% assign downcased_option = collectionswatch1 | downcase %}
    {% if downcased_option contains 'color' or downcased_option contains 'colour' %}
      {% assign is_color = true %}
    {% endif %}
  {% endif %}
{% endfor %}

{% unless found_option %}
<div class="swatch error">
  <p>You included the snippet swatch.liquid with the name of a product option — <code>'{{ swatch }}'</code> — that does not belong to your product.</p>
  <p>Use <code>{% raw %}{% include 'swatch' with 'name of your product option here' %}{% endraw %}</code></p>
  <p>Example: <code>{% raw %}{% include 'swatch' with 'Color' %}{% endraw %}</code></p>
  <p><strong>This is case-sensitive!</strong> Do not put in <code>'color'</code> if your product option name is <code>'Color'</code>.</p>
</div>
{% else %}
<div class="swatch clearfix" data-option-index="{{ option_index }}">
  
  {% assign values = '' %}
  {% for variant in product.variants %}
    {% assign value = variant.options[option_index] %}
    {% unless values contains value %}
      {% assign values = values | join: ',' %}	
      {% assign values = values | append: ',' | append: value %} 
      {% assign values = values | split: ',' %}
      <div data-value="{{ value | escape }}" class="swatch-element {% if is_color %}color {% endif %}{{ value | handle }} {% if variant.available %}available{% else %}soldout{% endif %}">
        {% if is_color %}
        <div class="tooltip">{{ value }}</div>
        {% endif %}
        <input id="swatch-{{ variant.id }}-{{ value | handle }}" type="radio" name="option-{{ option_index }}" value="{{ value | escape }}"{% if forloop.first %} checked{% endif %} {% unless variant.available %}disabled{% endunless %} />
        {% if is_color %}
        <label for="swatch-{{ variant.id }}-{{ value | handle }}" style="background-color: {{ value | split: ' ' | last | handle }}; background-image: url({{ value | handle | append: '.' | append: file_extension | file_url }})">
          <img class="crossed-out" src="{{ 'soldout.png' | asset_url }}" />
        </label>
        {% else %}
        <label for="swatch-{{ variant.id }}-{{ value | handle }}">
          {{ value }}
          <img class="crossed-out" src="{{ 'soldout.png' | asset_url }}" />
        </label>
        {% endif %}
      </div>
    {% endunless %}
    {% if variant.available %}
    <script>
      jQuery('.swatch[data-option-index="{{ option_index }}"] .{{ value | handle }}').removeClass('soldout').addClass('available').find(':radio').removeAttr('disabled');
    </script>
    {% endif %}
  {% endfor %}
</div>

{% endunless %}

{% endif %}

Any assistance is much appretiated

Thank you

0 Likes
Highlighted
New Member
11 0 0

Hello, I'm currently facing the same problem - did you ever find the solution?

0 Likes