First Variant always passing to cart no matter which is chosen.

Solved
New Member
3 0 0

Hey everyone,

My basic issue is that when I select a variant for a product, and then add that product to cart, the first variant option is the only one that ever shows. 

 

I searched the forums and did some Googling before posting, but haven't had much luck. 

Thanks in advance for checking out my thread, and I am at my computer so I should be able to communicate back and forth pretty quickly.

 

Here is my code from the product.liquid

 

<div itemscope itemtype="http://schema.org/Product">

  <meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
  <meta itemprop="image" content="{{ product.featured_image.src | img_url: 'grande' }}">

  {% assign current_variant = product.selected_or_first_available_variant %}

  {% comment %}
 <!-- /snippets/breadcrumb.liquid -->
{% comment %}
  Documentation - http://docs.shopify.com/support/your-website/navigation/creating-a-breadcrumb-navigation
{% endcomment %}
{% unless template == 'index' or template == 'cart' %}
<nav class="breadcrumb" role="navigation" aria-label="breadcrumbs">
  <a href="/" title="{{ 'general.breadcrumbs.home_link_title' | t }}">{{ 'general.breadcrumbs.home' | t }}</a>

  {% if template contains 'product' %}

    {% if collection %}
      <span aria-hidden="true">&rsaquo;</span>
      {% if collection.handle %}
        {% capture url %}/collections/{{ collection.handle }}{% endcapture %}
        {{ collection.title | link_to: url }}
      {% endif %}
    {% endif %}
    <span aria-hidden="true">&rsaquo;</span>
    <span>{{ product.title }}</span>

  {% elsif template contains 'collection' and collection.handle %}

    <span aria-hidden="true">&rsaquo;</span>
    {% if current_tags %}
      {% capture url %}/collections/{{ collection.handle }}{% endcapture %}
      {{ collection.title | link_to: url }}
      <span aria-hidden="true">&rsaquo;</span>
      <span>{{ current_tags | join: " + " }}</span>
    {% else %}
      <span>{{ collection.title }}</span>
    {% endif %}

  {% elsif template == 'blog' %}

    <span aria-hidden="true">&rsaquo;</span>
    {% if current_tags %}
      {{ blog.title | link_to: blog.url }}
      <span aria-hidden="true">&rsaquo;</span>
      <span>{{ current_tags | join: " + " }}</span>
    {% else %}
    <span>{{ blog.title }}</span>
    {% endif %}

  {% elsif template == 'article' %}

    <span aria-hidden="true">&rsaquo;</span>
    {{ blog.title | link_to: blog.url }}
    <span aria-hidden="true">&rsaquo;</span>
    <span>{{ article.title }}</span>

  {% elsif template contains 'page' %}

   <span aria-hidden="true">&rsaquo;</span>
   <span>{{ page.title }}</span>

  {% else %}

   <span aria-hidden="true">&rsaquo;</span>
   <span>{{ page_title }}</span>

  {% endif %}
</nav>
{% endunless %}

  {% endcomment %}

  <div class="grid product-single product-sticky-wrapper {% if section.settings.images-position == 'right' %}grid--rev{%  endif %}" data-section-id="{{ section.id }}">

    <input type="hidden" id="thumbnail_changes_variant" value="{% if section.settings.thumbnail_changes_variant %}true{% else %}false{% endif %}" />

    <div class="grid__item large--seven-twelfths text-center context mobile--no-top-margin">

      <div class="product-single__photos medium--hide small--hide{% if section.settings.image-display == 'thumbnail' %} product-single__thumbnails{% endif %}">
        {% assign featured_image = current_variant.featured_image | default: product.featured_image %}

        {% comment %}
          Display current variant image, or default first
        {% endcomment %}

        <div class="product-single__photo-wrapper">
          <img class="product-single__photo wow fadeIn {% if featured_image.width < 900 %} js__smallImage {%  endif %}" data-wow-delay="0.5s" id="ProductPhotoImg" src="{{ featured_image | img_url: '1500x1500' }}" alt="{{ featured_image.alt | escape }}" data-image-id="{{ featured_image.id }}" data-image-zoom="{{ featured_image | img_url: 'master' }}" data-image-zoom-enable="{{ section.settings.enable_image_zoom }}">
          <div class="hidden" id="featured-image-loader">
            <i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
            <span class="sr-only">Loading...</span>
          </div>
        </div>



        {% comment %}
          Display rest of product images, not repeating the featured one
        {% endcomment %}


        {% for image in product.images %}

          {% if section.settings.image-display == 'full-size' %}

            {% unless image contains featured_image %}
              <div class="product-single__photo-wrapper">
                <img class="product-single__photo wow fadeIn {% if image.width < 900 %} js__smallImage {%  endif %}" data-wow-delay="0.5s" src="{{ image.src | img_url: '1500x1500' }}" alt="{{ image.alt | escape }}" data-image-id="{{ image.id }}" data-image-zoom="{{ image.src | img_url: 'master' }}" data-image-zoom-enable="{{ section.settings.enable_image_zoom }}">
                <div class="hidden" id="featured-image-loader">
                  <i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
                  <span class="sr-only">Loading...</span>
                </div>
              </div>
            {% endunless %}

          {% else %}

            <a
              href="{{ image.src | img_url: '1500x1500' }}" class="product-single__thumbnail-wrapper"
              data-image-zoom="{{ image.src | img_url: 'master' }}"
              {% if image.variants != empty %} data-variant="{{ image.variants[0].id }}"{% endif %}
            >
              <img class="product-single__thumbnail" src="{{ image.src | img_url: '240x240' }}" alt="{{ image.alt | escape }}" data-image-id="{{ image.id }}">
            </a>

          {% endif %}

        {% endfor %}

        </div>

        <div id="product-images-mobile" class="large--hide owl-carousel owl-theme">

        {% for image in product.images %}
            <div>
              <img src="{{ image.src | img_url: '1024x1024' }}" alt="{{ image.alt | escape }}" data-image-id="{{ image.id }}">
            </div>
        {% endfor %}

        </div>

    </div>

    <div class="grid__item large--five-twelfths">

      <div class="ui sticky product-sticky">

    <div class="product-page--sale-badge{% unless product.compare_at_price_max > current_variant.price %} hide{% endunless %}">{{ 'products.product.on_sale' | t }}</div>

    	<div class="product-details-wrapper" {% if section.settings.show_sku %}data-show-sku="true"{% else %}data-show-sku="false"{% endif %}>
        <div class="grid product-meta-header">
          {% if section.settings.show_vendor and product.vendor != "" %}
            <div class="grid__item product__meta--vendor large--one-half">
              <h4>{{ product.vendor }}</h4>
            </div>
          {% endif %}

          {% if section.settings.show_sku %}
            <div class="grid__item product__meta--sku large--one-half{% unless section.settings.show_vendor and product.vendor != "" %} push--large--one-half{% endunless %}{% if current_variant.sku == "" %} hide{% endif %}">
                  <h4>{{ 'customer.order.sku' | t }}: <span class="js__currentVariantSKU">{{ current_variant.sku }}</span></h4>
            </div>
          {% endif %}
        </div>

      <h1 itemprop="name" class="product-details-product-title">{{ product.title }}</h1>

      {% if section.settings.cart-button-location == 'above' %}
      <div itemprop="offers" itemscope itemtype="http://schema.org/Offer" class="product-details--form-wrapper">
        <meta itemprop="priceCurrency" content="{{ shop.currency }}">

        <link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">

        {% comment %}
          ID addToCartForm is a selector for the ajax cart plugin
        {% endcomment %}
        <form action="/cart/add" method="post" enctype="multipart/form-data" id="AddToCartForm" class="form-vertical">
		<span class="mw-product-options"></span>
          {% comment %}
            Add product variants as a dropdown.
              - By default, each variant (or combination of variants) will display as its own <option>
              - To separate these into multiple steps, which we suggest, use option_selection.js (see below)

            You can leverage jQuery to add a callback on page load and each time the select element changes:
              - Include option_selection.js (as seen at the bottom of this file)
              - This allows you to use JavaScript anytime the variant dropdown changes
              - This also separates out your variant options (ie. size, color, etc.) to separate select elements

            For more information on products with multiple options, visit:
              - http://docs.shopify.com/support/your-website/themes/can-i-make-my-theme-use-products-with-multiple-options#update-product-liquid
          {% endcomment %}

          {% if product.variants.size > 1  %}
            {% for option in product.options_with_values %}
              <div class="selector-wrapper js{% if section.settings.show_swatches %} hide{% endif %}">
                <label for="SingleOptionSelector-{{ forloop.index0 }}">{{ option.name }}</label>
                <select class="needsclick form-control" id="SingleOptionSelector-{{ forloop.index0 }}" autocomplete="off">
                  {% for value in option.values %}
                    <option {% if option.selected_value == value %}selected{% endif %} value="{{ value | escape }}">{{ value }}</option>
                  {% endfor %}
                </select>
              </div>
              {% if section.settings.show_swatches %}
                {% include 'swatch' with option.name %}
              {% endif %}
            {% endfor %}
          {% endif %}


          <select name="id" id="productSelect-{{ section.id }}" class="needsclick product-single__variants original-select no-js" autocomplete="off">
            {% for variant in product.variants %}
              {% if variant.available %}

                {% comment %}
                  Note: if you use option_selection.js, your <select> tag will be overwritten, meaning what you have inside <option> will not reflect what you coded below.
                {% endcomment %}
                <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>

      {% if section.settings.show_quantity_selector %}
        <label for="Quantity" class="quantity-selector product-sub-label">{{ 'products.product.quantity' | t }}</label>

        {% if settings.ajax_cart_method == "drawer" %}
          <input type="number" id="Quantity" name="quantity" value="1" min="1" class="quantity-selector" />
        {% else %}
          <div class="js-qty nonajax-quantity-selector">
            <button type="button" class="js-qty__adjust js-qty__adjust--minus icon-fallback-text">
              <i class="fa fa-minus" aria-hidden="true"></i>
              <span class="fallback-text">−</span>
            </button>
            <input type="text" class="js-qty__num" value="1" min="1" aria-label="quantity" pattern="[0-9]*" name="quantity" id="Quantity">
            <button type="button" class="js-qty__adjust js-qty__adjust--plus icon-fallback-text">
              <i class="fa fa-plus" aria-hidden="true"></i>
              <span class="fallback-text">+</span>
            </button>
          </div>
        {% endif %}
      {% endif %}

      {% if product.compare_at_price_max > product.price %}
      <p id="ComparePrice" class="js">
        <span class="money">{{ current_variant.compare_at_price | money }}</span>
      </p>
      <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
      {% endif %}

          <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
          <span id="ProductPrice" class="h2 js" itemprop="price" content="{{ current_variant.price | divided_by: 100 }}">
            <span class="money">{{ current_variant.price | money }}</span>
          </span>

          <button type="submit" name="add" id="AddToCart" class="btn">
            <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
          </button>
          
          <div id="marker"></div>
            
        </form>

      </div>
      {% endif %}

		<div class="product-description rte" itemprop="description">
			{{ product.description }}
		</div>
        

    {% if section.settings.cart-button-location == 'below' %}
    <div itemprop="offers" itemscope itemtype="http://schema.org/Offer" class="product-details--form-wrapper product-details--form-wrapper---below">
      <meta itemprop="priceCurrency" content="{{ shop.currency }}">

      <link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">

      {% comment %}
        ID addToCartForm is a selector for the ajax cart plugin
      {% endcomment %}
      <form action="/cart/add" method="post" enctype="multipart/form-data" id="AddToCartForm" class="form-vertical">
        {% comment %}
          Add product variants as a dropdown.
            - By default, each variant (or combination of variants) will display as its own <option>
            - To separate these into multiple steps, which we suggest, use option_selection.js (see below)

          You can leverage jQuery to add a callback on page load and each time the select element changes:
            - Include option_selection.js (as seen at the bottom of this file)
            - This allows you to use JavaScript anytime the variant dropdown changes
            - This also separates out your variant options (ie. size, color, etc.) to separate select elements

          For more information on products with multiple options, visit:
            - http://docs.shopify.com/support/your-website/themes/can-i-make-my-theme-use-products-with-multiple-options#update-product-liquid
        {% endcomment %}

        {% if product.variants.size > 1  %}
          {% for option in product.options_with_values %}
            <div class="selector-wrapper js{% if section.settings.show_swatches %} hide{% endif %}">
              <label for="SingleOptionSelector-{{ forloop.index0 }}">{{ option.name }}</label>
              <select class="needsclick form-control" id="SingleOptionSelector-{{ forloop.index0 }}" autocomplete="off">
                {% for value in option.values %}
                  <option {% if option.selected_value == value %}selected{% endif %} value="{{ value | escape }}">{{ value }}</option>
                {% endfor %}
              </select>
            </div>
            {% if section.settings.show_swatches %}
              {% include 'swatch' with option.name %}
            {% endif %}
          {% endfor %}
        {% endif %}

        <select name="id" id="productSelect-{{ section.id }}" class="needsclick product-single__variants original-select no-js" autocomplete="off">
          {% for variant in product.variants %}
            {% if variant.available %}

              {% comment %}
                Note: if you use option_selection.js, your <select> tag will be overwritten, meaning what you have inside <option> will not reflect what you coded below.
              {% endcomment %}
              <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>

    {% if section.settings.show_quantity_selector %}
      <label for="Quantity" class="quantity-selector product-sub-label">{{ 'products.product.quantity' | t }}</label>

      {% if settings.ajax_cart_method == "drawer" %}
        <input type="number" id="Quantity" name="quantity" value="1" min="1" class="quantity-selector" />
      {% else %}
        <div class="js-qty nonajax-quantity-selector">
          <button type="button" class="js-qty__adjust js-qty__adjust--minus icon-fallback-text">
            <i class="fa fa-minus" aria-hidden="true"></i>
            <span class="fallback-text">−</span>
          </button>
          <input type="text" class="js-qty__num" value="1" min="1" aria-label="quantity" pattern="[0-9]*" name="quantity" id="Quantity">
          <button type="button" class="js-qty__adjust js-qty__adjust--plus icon-fallback-text">
            <i class="fa fa-plus" aria-hidden="true"></i>
            <span class="fallback-text">+</span>
          </button>
        </div>
      {% endif %}
    {% endif %}

    {% if product.compare_at_price_max > product.price %}
    <p id="ComparePrice" class="js">
      <span class="money">{{ current_variant.compare_at_price | money }}</span>
    </p>
    <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
    {% endif %}

        <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
        <span id="ProductPrice" class="h2 js" itemprop="price" content="{{ current_variant.price | divided_by: 100 }}">
          <span class="money">{{ current_variant.price | money }}</span>
        </span>

        <button type="submit" name="add" id="AddToCart" class="btn">
          <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
        </button>

        <div id="marker"></div>
          
      </form>

    </div>
    {% endif %}
</div> </div> </div> </div>

 

0 Likes
Trailblazer
233 27 29

can you give me website link? and its password if any

you are welcome to contact / donate small amount to me.
My email - suyash.patankar@gmail.com

paypal.me/suyashpatankar
0 Likes
New Member
3 0 0

https://thatsoundsbetter.co.uk


@suyash1 wrote:

can you give me website link? and its password if any


 

0 Likes
Highlighted
Trailblazer
233 27 29

@phebesupplyant wrote:

https://thatsoundsbetter.co.uk


@suyash1 wrote:

can you give me website link? and its password if any


 


I think you need to replace this line - 

 <option {% if option.selected_value == value %}selected{% endif %} value="{{ value | escape }}">{{ value }}</option>

 

with this line and try it 

 <option {% if product_option.selected_value == value %}selected{% endif %} value="{{ value | escape }}">{{ value }}</option>

 

you are welcome to contact / donate small amount to me.
My email - suyash.patankar@gmail.com

paypal.me/suyashpatankar
0 Likes
New Member
3 0 0

Tried it but it didn't work. We are using an app for some variants, could this be affecting it?

0 Likes

Success.

Trailblazer
233 27 29
yes, then it has to be an app only, contact that app developers
you are welcome to contact / donate small amount to me.
My email - suyash.patankar@gmail.com

paypal.me/suyashpatankar
0 Likes