代码之家 › 专栏 › 技术社区 › Mary Oleksiuk

将产品添加到购物车时,会为产品添加默认选项,但不会添加选定选项

shopify javascript

Mary Oleksiuk · 技术社区 · 7 年前

我已经为这个问题挣扎了两天了。在我的店里,每种产品都有两种选择:尺码和颜色(T恤)。这里有shopify专家吗? 商店:nosmallplan-dev.myshopify。通用域名格式通过:nsp 我使用ajaxify购物车。在Product liquid中,我有以下代码:

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

但带有默认尺寸和颜色的产品总是添加到购物车中,即使您选择其他选项也无关紧要。在购物车中。液体我有这个代码:

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

</p>

我相信这段代码负责显示第一个选项。如何修改它以显示所选选项,如果未选择任何选项,则显示第一个选项?

谢谢

2 回复 | 直到 7 年前

Victor Leontyev 7 年前

您应该有隐藏的下拉列表,其中包含所有变体和可见的下拉列表或每个选项。例如:

请添加以下代码,而不是隐藏选择的代码:

{% 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>

此外,您还需要添加此JS,当您更改产品选项的可见下拉列表时,它将更改隐藏的选择值:

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

TBI 7 年前

您必须以这样的方式添加js:当您单击大小和颜色时,您必须相应地更改选择选项。通过这种方式,您可以使用ajax将产品添加到具有选定选项的购物车中。

谢谢