将产品添加到购物车时，将为该产品添加默认选项，但不添加所选选项

Question

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!!!

Answer 1

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
           }
       }
   );
});

Answer 2

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