Однажды мне пришлось решить довольно интересную задачку на Shopify средствами JavaSсript. Нужно было отсортировать блоки которые добавляются на сайт в произвольном порядке и естественно сортировать нужно по названию.
Код вывода блоков в секции стандартный и выглядел так:
<div class="blocks-row"> {% for block in section.blocks %} <div class="block-item"> {% if block.settings.block_name != blank %} <div class="block-item__name">{{ block.settings.block_name }}</div> {% endif %} {% if block.settings.block_text != blank %} <p class="block-item__text">{{ block.settings.block_text }} {% endif %} </div> {% endfor %} </div>
Естественно я начал из гугления документации и просмотра вариантов сортировки без создания своего велосипеда, но данный поиск не увенчался успехом и мне пришлось создать таки свой велик. Собственно ним я и поделюсь с вами.
Решение задачи:
- Использовать переменную {{ block.settings.block_name }};
- Создать уникальный data-attribute;
- Написать код на js.
Liquid логика вывода блоков:
<div id="list-blocks" class="blocks-row"> {% for block in section.blocks %} <div class="block-item" data-azsort="{{ block.settings.store_name }}"> {% if block.settings.block_name != blank %} <div class="block-item__name">{{ block.settings.block_name }}</div> {% endif %} {% if block.settings.block_text != blank %} <p class="block-item__text">{{ block.settings.block_text }} {% endif %} </div> {% endfor %} </div>
Js-код:
<script> Array.from(document.querySelectorAll("#list-blocks > .block-item[data-azsort]")) .sort(({dataset: {azsort: a}}, {dataset: {azsort: b}}) => a.localeCompare(b)).forEach((item) => item.parentNode.appendChild(item)); </script>