Shopify - Как я могу сопоставить порядок отображения тегов с порядком отображения продуктов в коллекции?

Надеюсь, кто-то может помочь с этим, так как я все еще новичок в работе с форматом жидкого кода Shopify.

Недавно я реализовал несколько раскрывающихся списков сортировки на страницах коллекций для фильтров продуктов с использованием тегов. На основе этого руководства: https://community.shopify.com/c/Shopify-Design/How-to-Multiple-Dropdown-Sorting-Boxes-on-Collection-...

Все это работает по назначению, однако у меня возникли проблемы с заказом тегов одного из фильтров. Я хочу, чтобы порядок отображения тегов соответствовал текущему порядку продуктов в коллекции (которые были заказаны вручную из бэкэнда) — см. изображение

Скриншот страницы коллекции и фильтров

Код, обрабатывающий этот конкретный раскрывающийся список:

<div class="four-columns">
    Package size:
    <select class="coll-filter" id="sizeFilter">
      <option class="size-all" value="">All</option>
      {% for tag in collection.all_tags %}
        {% if tag contains 'size-' %}
         {% assign tagName = tag | remove: 'size-' %}         
          {% if current_tags contains tag %}
          <option class="{{tag}}" value="{{ tag | handle }}" selected>{{ tagName }}</option>
          {% else %}
          <option class="{{tag}}" value="{{ tag | handle }}">{{ tagName }}</option>
          {% endif %}                     
        {% endif %}
      {% endfor %}
    </select>
  </div>

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


tags shopify liquid custom-lists
person CamDH    schedule 21.05.2021    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Что ж, если вы хотите основываться на порядке продуктов, вам нужно будет использовать продукты, а не захватывать все теги.

Таким образом, это станет примерно таким:

{% assign all_tags = '' %}
{% for product in collection.products %}
  {% for tag in product.tags %}
    {% if tag contains 'size-' %}
      {% assign all_tags = all_tags | append: tag | append: ',' %}
    {% endif %}
  {% endfor %}
{% endfor %}
{% assign all_tags_unique = all_tags | split: ',' | uniq %}

<select>
  {% for tag in all_tags_unique %}
    {% assign tagName = tag | remove: 'size-' %}         
    {% if current_tags contains tag %}
      <option class="{{tag}}" value="{{ tag | handle }}" selected>{{ tagName }}</option>
    {% else %}
    <option class="{{tag}}" value="{{ tag | handle }}">{{ tagName }}</option>
    {% endif %} 
  {% endfor %}
</select>

Где мы будем зацикливать текущие продукты и помещать каждый из их тегов в переменную {% assign all_tags = '' %}.

После того, как мы закончим с продуктами, мы разделим их по нашему разделителю, который в нашем случае равен ,, и добавим уникальный фильтр, который удалит любые повторы в массиве (если у вас есть более одного размера для продукта или повтора). .

И, наконец, вы зациклите вновь созданный массив тегов all_tags_unique .

Это все.

PS: Имейте в виду, что у вас есть более 50 продуктов, и вам нужно будет увеличить нумерацию страниц, чтобы получить их все.

Имейте в виду, что это не проверенный код, поэтому может быть ошибка или две, но логика есть. :)

person drip    schedule 21.05.2021
comment
Это работает отлично, спасибо за подробное описание. Помогает мне лучше понять вещи на будущее. Очень ценю помощь. - person CamDH; 24.05.2021
comment
наткнулся на дублирующиеся теги на одной из подборок. Немного покопался, оказалось, что проблема с синтаксисом жидкости. unique следует изменить на uniq. - person CamDH; 26.05.2021
comment
@CamDH да, вы правы, я предупредил, что не проверял. ;) Ответ обновлен. - person drip; 26.05.2021