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

Solved
Highlighted
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
Highlighted
Globetrotter
703 65 82

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

you are welcome to contact me.
My email - suyash.patankar@gmail.com
0 Likes
Highlighted
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
Globetrotter
703 65 82

@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 me.
My email - suyash.patankar@gmail.com
0 Likes
Highlighted
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
Highlighted
Globetrotter
703 65 82

This is an accepted solution.

yes, then it has to be an app only, contact that app developers
you are welcome to contact me.
My email - suyash.patankar@gmail.com
0 Likes