在集合页面 shopify 中显示变体选项

Question

我知道这个问题在互联网上被问了数百万次，但似乎每个人都希望有自己的解决方案。我找不到我确切需要的东西。

所以我使用此代码在我的收藏中显示变体，然后添加到购物车。

<form action="/cart/add" method="post" style="text-align:center;">
   
  <select name="id">
  {% for variant in product.variants %}
    {% if variant.available %}
    <option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>     
    {% else %}
    <option disabled="disabled">{{ variant.title }} - Sold Out</option>
    {% endif %}
  {% endfor %}
    </select>          
          
        
  <input type="submit" value="Add to cart" class="btn" />
    
</form>

这可行，但在下拉列表中，它给我这样的：

xs / Black - $72.00     
small / Black - $61.00     
medium / Black - $52.00     
large / Black - $74.00     
xl / Black - $77.00     
xxl / Black - $55.00     
xs / Blue - $72.00    
small / Blue - $72.00     
medium / Blue - $72.00     
xl / Blue - $72.00    
xxl / Blue - $72.00    

我想要的是让客户在不同的下拉菜单中分别选择尺寸和颜色，然后点击添加到购物车。

我到处寻找如何做到这一点，但没有运气。请帮忙。 如果有帮助，我的 Shopify 主题是 Debut。

Answer 1

你可以这样做：

<form action="/cart/add" method="post" style="text-align:center;">

  <select name="id" id="{{ product.handle }}" style="display: none;">
  {% for variant in product.variants %}
    {% if variant.available %}
    <option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>     
    {% else %}
    <option disabled="disabled">{{ variant.title }} - Sold Out</option>
    {% endif %}
  {% endfor %}
    </select>          

  <input type="submit" value="Add to cart" class="btn" />

</form>

然后在页面末尾添加脚本：

{{ 'option_selection.js' | shopify_asset_url | script_tag }}
<script>
    var all_products = { {% for product in collection.products %}'{{ product.handle }}': {{ product | json }},{% endfor %} };
    for(curr_product in all_products){
      new Shopify.OptionSelectors(curr_product, {
        product: all_products[curr_product]
      });
    }
</script>

我们依赖 Shopify 函数 new Shopify.OptionSelectors 将每个选择拆分为单独的选择。不要忘记将id="{{ product.handle }}" 添加到主选择中。

完整代码：

{%- for product in collection.products -%}
    <form action="/cart/add" method="post" style="text-align:center;">

    <select name="id" id="{{ product.handle }}" style="display: none;">
    {% for variant in product.variants %}
    {% if variant.available %}
    <option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>     
    {% else %}
    <option disabled="disabled">{{ variant.title }} - Sold Out</option>
    {% endif %}
    {% endfor %}
    </select>          
    <input type="submit" value="Add to cart" class="btn" />

    </form>
{% endfor %}

{{ 'option_selection.js' | shopify_asset_url | script_tag }}
<script>
    var all_products = { {% for product in collection.products %}'{{ product.handle }}': {{ product | json }},{% endfor %} };
    for(curr_product in all_products){
      new Shopify.OptionSelectors(curr_product, {
        product: all_products[curr_product]
      });
    }
</script>

Answer 2

要在单独的块中获取它，您必须迭代产品选项，最多 3 个，以便您可以分别显示尺寸和颜色。

{% unless product.has_only_default_variant %}
{% 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 style="display:block" class="single-option-selector single-option-selector-{{ section.id }} 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 %}