Выберите: как добавить класс в зависимости от коллекции

Question

На домашней странице клиентов они хотят, чтобы все товары были перечислены с кнопкой загрузки больше внизу.

Существует четыре категории, каждый из которых имеет другой цвет. Я хочу забрать все продукты по дате, указанным в списке, и применить класс к продукту в зависимости от категории.

В настоящее время у меня есть

{% assign collection = collections.all %} 
{% for product in collection.products %} 
{% if collection.handle == 'clothing' %} 
    <div class="theme-red overview-item"> 
{% elsif collection.handle == 'pictures' %} 
    <div class="theme-green overview-item"> 
{% elsif collection.handle == 'posters' %} 
    <div class="theme-blue overview-item"> 
{% elsif collection.handle == 'other' %} 
    <div class="theme-beige overview-item"> 
{% else %} 
    <div class="theme-none overview-item"> 
{% endif %} 
    ... 
    </div> 
{% endfor %} 

Это в настоящее время собирание в теме-нет, и это потому, что я звоню collections.all?

Как получить все показанные продукты независимо от коллекции, а затем применить что-то в соответствии с инструкциями if/else, как указано выше.

Любые идеи, я пытался увидеть, если product.collections, collection.all_types без счастья.

Answer 1

Причина, по которой вы получаете theme-none, заключается в том, что инструкция if проверяет, является ли дескриптор коллекции «одеждой», «картинками» и т. Д., Но вы установили коллекцию в collections.all, чтобы она никогда не соответствовала любому из этих условия.

Вместо этого вы должны проверить, находится ли текущий продукт в пределах одной из этих коллекций. Например:

{% assign collection = collections.all %} 

{% for product in collection.products %} 
    {% for c in product.collections %} 
    {% if c.handle == 'clothing' %} 
     {% assign theme = "red" %} 
    {% elsif c.handle == 'pictures' %} 
     {% assign theme = "green" %} 
    {% elsif c.handle == 'posters' %} 
     {% assign theme = "blue" %} 
    {% elsif c.handle == 'other' %} 
     {% assign theme = "beige" %} 
    {% else %} 
     {% assign theme = "none" %} 
    {% endif %} 
    {% endfor %} 

    <div class="theme-{{ theme }} overview-item"> 
    ... 
    </div> 
{% endfor %}