Shopify - сортировка блоков по алфавиту используя JS и data-attribute

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

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

Решение задачи:

1. Использовать переменную {{ block.settings.block_name }};
2. Создать уникальный data-attribute;
3. Написать код на 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>