Однажды мне пришлось решить довольно интересную задачку на 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>