Отображение вариантов вариантов на странице коллекции 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 - Дебют, если это помогает.

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>