Passing Incorrect Variant To Cart

[Anh_Nguyen]

Hi Shopify Folks!

I'm desperately looking for a solution to fix my issue. I have customers complained about how they try adding an item to their shopping carts, the first variant is always in the cart, not the one that was chosen. At first, I tried to believe that it could be their computer glitches and not my website. But more customers started to complain so I gave myself a try and the issue actually exists. I tried adding about 5 different items, none of them I chose the first variant, but 1 out of 5 items I added to my cart, 1 of them would be the first variant of the product which I did not choose. I've been looking out for other people's similar issues and solutions but I can't seem to be able to fix mine. So please help! I appreciate all the responses I can get.

My store: https://tkb-trading-llc.myshopify.com

This is my product.liquid

{% include 'sca_freegift_price' with product %}

<!-- Bold D&H //product -->
{% include 'bold-product' with product, hide_action: 'break' %}{% if bold_hidden_product %}{% break %}{%endif %}
<!-- // end product D&H -->


<div class="sixteen columns">
  <div class="clearfix breadcrumb product_breadcrumb">
    <span><a href="{{ shop.url }}" title="{{ shop.name | escape }}" ><span >{{ 'general.breadcrumbs.home' | t }}</span></a></span> 
    &#62;
    <span >
      {% if collection %}
        <a href="{{ collection.url }}" title="{{ collection.title | escape }}">{{ collection.title }}</a>
      {% else %}
        <a href="/collections/all" title="{{ collections.all.title }}">{{ collections.all.title }}</a>      
      {% endif %}
    </span>
    &#62;
    {{ product.title }}
  </div>
</div>

<div class="sixteen columns" itemscope itemtype="http://schema.org/Product" id="product-{{ product.id }}">
	<div class="section product_section clearfix">
	  {% include 'shappify-sales-clock' %}
  	 {% if settings.product_images_position == 'left' %}             
       {% assign products_per_row = settings.products_per_row %}

       {% if settings.product_thumbnails_position == 'bottom' %}
         {% include 'product-images-bottom' %}
       {% else %}
         {% include 'product-images' %}
       {% endif %}
     {% endif %}

     <div class="six columns {%if settings.product_images_position == 'left' %}omega{% else %}alpha{% endif %}">
       <h1 class="product_name" itemprop="name"><div style="position:relative;"> {{ product.title }} <div name="secomapp-fg-image-{{ product.id }}" style="display: none;"> {{ "icon-freegift.png" | asset_url | img_tag: "Free Gift", "sca-fg-img-label" }} </div> </div></h1>
       <meta itemprop="url" content="{{shop.url}}{{product.url}}">
       <div class="yotpo bottomLine"
            data-appkey="jk6wV4hdgepM2nyDQrNGANt8p0ifD2JOaLhd2KUV"
            data-domain="{{ shop.permanent_domain | escape }}"
            data-product-id="{{ product.id }}"
            data-product-models="{{ product.id }}"
            data-name="{{ product.title | escape }}"
            data-url="{{ shop.url }}{{ product.url }}"
            data-image-url="{{ product.featured_image | product_img_url: 'large' |replace: '?', '%3F' | replace: '&','%26'}}"
            data-description="{{ product.description | escape }}"
            data-bread-crumbs="{% for tag in product.tags %}{{ tag | escape }};{% endfor %}" style="margin-left: 0px !important;">
       </div>
       {% assign variant = product.selected_or_first_available_variant %}
       <p class="modal_price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
         <meta itemprop="priceCurrency" content="{{ shop.currency }}" />
         <meta itemprop="seller" content="{{ shop.name | escape }}" />
         <meta itemprop="availability" content="{% if sca_product_available %}in_stock{% else %}out_of_stock{% endif %}" />
         
        {% include 'shappify-sales-icon-product' %}  <span class="was_price">
            {% if variant.price < variant.compare_at_price and variant.available %}
              {{ variant.compare_at_price | money }}
            {% endif %}
          </span>
          <span itemprop="price" content="{{ variant.price | money_without_currency }}" class="current_price">
            {% if variant.available %} 
                  {{ variant.price | money }} 
            {% else %} 
              {{ 'products.product.sold_out' | t }}
            {% endif %}
          </span>
       </p>     
        {% include 'out-of-stock' %}
       	{% include 'product-notify-me' %}
       
		{% include 'item-added' %}
       {% if settings.product_description_position == "top" %}
        {% if product.description != blank %}
         <div class="description" itemprop="description">
           {{ product.description | split: '<!-- split -->' | first }}
         </div>
        {% endif %}
       {% endif %}
       {% include 'product-form' with 'product' %}
       <div id="smartwishlist" data-product="{{ product.id }}" data-variant="{{ product.variants.first.id }}"></div>

       {% if settings.product_description_position == "bottom" %}
        {% if product.description != blank %}
         <div class="description" itemprop="description">
           {{ product.description | split: '<!-- split -->' | first }}
         </div>
        {% endif %}
       {% endif %}

       <hr />
       <div class="meta">
         {% if settings.display_collections %}
           <p>
             <span class="label">{{ 'products.product.collections' | t }}:</span> 
             <span>
              {% for col in product.collections %}
                <a href="{{ col.url }}" title="{{ 'collections.general.link_title' | t: title: col.title }}">{{ col.title }}</a>{% unless forloop.last %},{% endunless %} 
              {% endfor %}
            </span>
          </p>
         {% endif %}
       
         {% if settings.display_tags %}
            <p>
              {% for tag in product.tags %}
                {% if forloop.first %}
                  <span class="label">{{ 'products.product.tags' | t }}:</span> 
                {% endif %}

                {% unless tag contains 'meta-related-collection-' %}
                  <span>
                    <a href="/collections/{% if collection %}{{ collection.handle }}{% else %}all{% endif %}/{{ tag | handle }}" title="{{ 'products.product.products_tagged' | t: tag: tag }}">{{ tag }}</a>{% unless forloop.last %},{% endunless %}
                  </span>
                {% endunless %} 
              {% endfor %}
            </p>
         {% endif %}
       
        {% if settings.display_type %}
           <p>
             <span class="label">{{ 'products.product.product_types' | t }}:</span> <span itemprop="category">{{ product.type | link_to_type }}</span>
           </p>
        {% endif %}
       
        {% if settings.display_vendor %}
           <p>
             <span class="label">{{ 'products.product.vendor' | t }}:</span> <span itemprop="brand">{{ product.vendor | link_to_vendor }}</span>
           </p>
        {% endif %}
       </div>

       {% include "social-buttons" with "product" %}
       
       {% if collection %}            
          <hr style="margin-top:0" />
          <p class="meta">                     
            {% if collection.next_product %}
              {% capture next_url %}{{ collection.next_product }}{% endcapture %}
              <span class="right">
                {{ 'products.general.next_product_html' | t | link_to: next_url }}
              </span>
            {% endif %}

            {% if collection.previous_product %}
              {% capture prev_url %}{{ collection.previous_product }}{% endcapture %}
              <span class="left">
                {{ 'products.general.previous_product_html' | t | link_to: prev_url }}
              </span>
            {% endif %}
          </p>
       {% endif %}
       
    </div>
    
    {% if settings.product_images_position == 'right' %}             
      {% assign products_per_row = settings.products_per_row %}
      
      {% if settings.product_thumbnails_position == 'bottom' %}
        {% include 'product-images-bottom' %}
      {% else %}
        {% include 'product-images' %}
      {% endif %}
    {% endif %}
    
  </div>
   
  {% if product.description contains "<!-- split -->"  %}
    <br class="clear" />
    <div class="section clearfix">
      <div class="description">
        {{ product.description | split: '<!-- split -->' | last }}
      </div>
    </div>
  {% endif %}
  
  

{% if product.metafields.yotpo.reviews_count and product.metafields.yotpo.reviews_count != "0" %}
 <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
 <span itemprop="itemReviewed">{{ product.title }}</span>
 has a rating of <span itemprop="ratingValue">{{ product.metafields.yotpo.reviews_average }}</span> stars
 based on <span itemprop="ratingCount">{{ product.metafields.yotpo.reviews_count }}</span> reviews.
 </div>
 {% endif %}
</div>

{% if settings.display_related_products %}
  {% capture limit %}{{ settings.products_per_row | plus: 1 }}{% endcapture %}
  
  {% if collection and collection.all_products_count > 1 %}
    {% assign col = collection.handle %}
  {% else %}
    {% assign col = product.collections.last.handle %}
  {% endif %}

  {% for tag in product.tags %}
    {% if tag contains 'meta-related-collection-' %}
      {% assign col = tag | remove: 'meta-related-collection-' %}
      {% assign collection = collections[col] %}
      {% capture limit %}{{ collection.products_count | plus: 1 }}{% endcapture %}
    {% endif %}
  {% endfor %}

  {% if col and collections[col].all_products_count > 0 %}
    <div class="sixteen columns">
      <div class="section clearfix">
        <h2>{{ 'products.product.related_items' | t }}</h2>
      </div>
    </div>

    {% assign skip_product = product %}
    {% assign products = collections[col].products %}
    {% assign products_per_row = settings.products_per_row %}
    <div class="sixteen columns">
      {% include 'product-loop' %}
    </div>
  {% endif %}
  
{% endif %}

<div class="yotpo yotpo-main-widget"
    data-product-id="{{ product.id }}"
    data-name="{{ product.title | escape }}"
    data-url="{{ shop.url }}{{ product.url }}"
    data-image-url="{{ product.featured_image | product_img_url: "large" |replace: '?', '%3F' | replace: '&','%26'}}"
    data-description="{{ product.description | escape }}">
</div>

[Jason]

Hi Anh,

Are you still seeing the problem? I tested one of your products and the variant did add correctly.

If the problem is still happening can you post a link to that product, and the steps / actions you took? If the forum members are able to replicate the problem it makes it more likely that a fix can be found.

Did you install any apps or make changes to the theme around the time this issue started to happen?

[Anh_Nguyen]

Hi Jason,

Thank you for your response.

Well, The issue doesn't always happen, it does it when it wants and I can never tell.

But to replicate the issue, what I did is that I tried adding about 10 different products and each of the product I would choose something else other than the first variant.  At least 1 out of 10 times the issue will happen. 

As far as installing app, the only app that I recently installed is the Smart Wishlist app, the app requires very simple installation but it could very well be the root of my issue. I'm contacting wishlist app developer hoping they could help. But for the time being, I'm still looking around to see if there's any one who had the same problem like this that could possibly help me.

[Eboni_Burgess]

I am having the same issue with my store.  My issue is happening with all my products at all times.  

HELP!

www.passulunashop.com

[tim]

Hi E, 

it is not happening to me. I added 11 different products to cart and all were added as I have selected them.

[Anh_Nguyen]

I have made a video of the issue happening on my website here. 

Note that it doesn't happen to any specific produc or variant, it just happens whenever it wants.

Watch Video Here

[Gillian_Kennedy]

having the same issue.  with various products.  mostly those with more than one variant option.  please help!

[tim]

Hi Gillian, 

Did you install any new apps recently? This looks like javascript conflict to me. Also, have you tried to open the cart drawer and then click the menu icon (not on mobile)? On my computer it hangs the browser. Original Brooklyn does not.

[Gillian_Kennedy]

Hi Tim, 

thanks so much for your response.  I have a sneaky suspicion that my bundling app is the cause.  and yes!  you're correct... it does end the shopping fun when you open the cart and then click the menu.  Are these things related do you think?

[tim]

Well, because the variant to add to cart is updated with javascript, it is only logical to think that something is wrong with javascript. Since it does not happen always, but from time to time, and you can not find any special product/set of products to trigger the problem, it is not a simple error but something which is kind of accumulating as you add things to cart.

And this cart+menu thing is a stack overflow somewhere in javascript as well.

Can be a problem with the theme itself too. I'd start with a clean shop (can start a new trial, if necessary), export and import your products there, upload your theme and test. If it is ok, start adding apps, one by one... 

One can probably play with you shop, while keeping the developers tools console open and looking for error messages (sometimes it helps to find a problem) but my quick attempt at it was not successfull.