Shopify Question posted in
The Shopify help center can be found here.

When adding product to cart default options are added for the product, but not selected ones – Shopify

I’ve been struggling with this problem for 2 day. In my store each product has 2 options: size and colors (Tshirts). Any shopify experts are here?
Store: nosmallplan-dev.myshopify.com
Pass: nsp
I use ajaxify cart. In Product liquid i have this code:

<div style="display:none;""> 
      {% if product.variants.size > 1 %} 
        <select id="product-select" name="id">
        {% for variant in product.variants %}
          {% if variant.available %} 
            <option value="{{ variant.id }}">{{ variant.title | escape }} - {{ variant.price | money }} - {{ variant.sku }}</option>
          {% else %}
            <input type="hidden" name="id" value="{{ product.variants.first.id }}" /> 
          {% endif %}
        {% endfor %}
        </select>
        {% endif %}
      </div>

But product with default size and color is always added to cart, doesnt matter even if you choose another option.
In Cart.liquid i have this code:

<p class="cart__product--details">
      {% if item.product.variants.size > 1 %}
      {{ item.product.options[0] }}: {{item.variant.title}}
      {% endif %}

</p>

I believe this code is responsible for showing first option.
How can i modify it to show selected option and if none is selected then first option?

Thanks!!!

Tags:

2

Answers


  1. 0

    You have to add js in such a manner that when you click on the size and color then you have to change the option of select accordingly. In this way you add product to cart with selected option using ajax.

    Thanks

    Login or Signup to reply.
  2. 0

    You should have hidden drop-down with list of all variants and visible dropdowns or each option. For example:

    Instead of your code with hidden select, please add this code:

    {% unless product == empty %}
  <script type="application/json" id="ProductJson">
    {{ product | json }}
  </script>
{% endunless %}

{% unless product.options.size == 1 and product.variants[0].title == 'Default Title' %}
    {% for option in product.options_with_values %}
        <div class="selector-wrapper js product-form__item">
          <label {% if option.name == 'default' %}class="label--hidden" {% endif %}for="SingleOptionSelector-{{ forloop.index0 }}">
            {{ option.name }}
          </label>
          <select class="single-option-selector single-option-selector product-form__input" id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}">
            {% for value in option.values %}
              <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
            {% endfor %}
          </select>
        </div>
    {% endfor %}
{% endunless %}

<select name="id" id="ProductSelect" data-section="{{ section.id }}" class="product-form__variants no-js" style="display:none;">
  {% for variant in product.variants %}
    {% if variant.available %}
      <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}">
        {{ variant.title }}
      </option>
    {% else %}
      <option disabled="disabled">{{ variant.title }} - {{ 'products.product.sold_out' | t }}</option>
    {% endif %}
  {% endfor %}
</select>

    Also you need to add this JS, which will change the hidden select value, when you changing visible dropdowns for product options:

     $(document).ready(function() {
   $('.single-option-selector').on(
       'change',
       function() {
           var selectedValues = $.map(
               $('.single-option-selector'),
               function(element) {
                   var $element = $(element);
                   var type = $element.attr('type');
                   var currentOption = {};

                   if (type === 'radio' || type === 'checkbox') {
                       if ($element[0].checked) {
                           currentOption.value = $element.val();
                           currentOption.index = $element.data('index');

                           return currentOption;
                       } else {
                           return false;
                       }
                   } else {
                       currentOption.value = $element.val();
                       currentOption.index = $element.data('index');

                       return currentOption;
                   }
               }
           );
           var product = JSON.parse(
               document.getElementById('ProductJson').innerHTML
           );
           var variant = product.variants.filter(function(v) {
               var condition = selectedValues.every(function(values) {
                   return v[values.index] == values.value;
               });
               return condition;
           });
           if (variant != null && variant.length == 1) {
               $('#ProductSelect').val(variant[0].id);
           }
           else {
            //disable add to cart button
           }
       }
   );
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search