Показать все варианты цвета на странице коллекции в Shopify with the Brooklyn Theme

Question

Привет, я использую тему brooklyn на моем сайте. У меня разные продукты будут цветными вариантами. Когда я нажимаю на страницу коллекции, я хочу показать все цветовые варианты этих продуктов как отдельные продукты. Я с поиском по поиску в Интернете с прошлой ночи могу помочь.

Answer 1

Посмотрите на приведенные ниже коды.

<ul class="colorlist"> 
{% for option in product.options %} 
{% if option == 'Color' %} 
{% assign index = forloop.index0 %} 
{% assign colorlist = '' %} 
{% assign color = '' %} 
{% for variant in product.variants %} 
{% capture color %} 
{{ variant.options[index] }} 
{% endcapture %} 

{% unless colorlist contains color %} 
    {% if variant.available %} 

    <li id="{{ variant.id }}" title="{{ variant.inventory_quantity }} In Stock" class="instock"><a href="{{ product.url | within: collection }}?variant={{ variant.id }}" style="background:{{ color | downcase }}">{{ color | downcase }}</a></li> 

    {% else %} 

    <li id="{{ variant.id }}" title="Out of Stock" class="outstock" >{{ color | downcase }}</li> 

    {% endif %} 

{% capture tempList %} 
{{colorlist | append: color | append: " " }} 
{% endcapture %} 
{% assign colorlist = tempList %} 
{% endunless %} 
{% endfor %} 
{% endif %} 
{% endfor %} 
</ul> 

Приведенный выше код может отображать доступные цвета продукта на странице сбора. Вы можете использовать одну и ту же структуру цикла и отображать всю серию продуктов, а не просто отображать имя варианта.