Shopify - цикл по данным из схемы

Question

Играя с созданием темы Shopify, я столкнулся с проблемой при создании цикла.

Я разрешаю администратору темы выбирать от 1 до 4 товаров для показа в магазине. Он может выбрать их из пользовательского интерфейса своей темы.

Схема:

{
  "type": "product",
  "id": "popular_product_1",
  "label": "Product N°1"
},
{
  "type": "product",
  "id": "popular_product_2",
  "label": "Product N°2"
},
{
  "type": "product",
  "id": "popular_product_3",
  "label": "Product N°3"
},
{
  "type": "product",
  "id": "popular_product_4",
  "label": "Product N°4"
}

Вернемся к моему жидкому файлу в качестве теста, если я хочу URL-адрес продукта, который я могу сделать:

{{ all_products[section.settings.popular_product_1].url }}

И это сработает. Но, конечно, я должен повторить тот же код 4 раза ... Поэтому я хотел создать цикл, который бы проходил по каждому ...

Но как получить добавочный номер, который будет вставлен в вышеприведенное? Конечно

{{ all_products[section.settings.popular_product_i].url }}
{{ all_products[section.settings.popular_product_{{i}}].url }}

не работает.

Я тоже пробовал

{% assign i = 1 %}
{% capture popular_product %}section.settings.popular_product_{{i}}{% endcapture %}
{{ all_products[popular_product].url }}

но это тоже не работает ... так как кажется, что переменная Popular_Product является строкой, а это не то, что должно быть.

WDYT

Answer 1

Альтернативный подход: использовать блоки сечения

Рассматривали ли вы использование раздела с блоками, а не только пронумерованные поля продукта в базовых настройках? Если вы создали раздел «Популярные товары» и определили блоки популярных товаров, вы можете добавить произвольное количество товаров (или указать максимум), а затем перебрать их все с помощью

{% for block in section.blocks %} 
   {% assign popular_product = all_products[block.settings.product] %}
   <!-- Cool stuff with your popular product -->
{% endfor %}

Подробнее о настройке разделов и блоков вы можете прочитать в Shopify здесь: https://help.shopify.com/en/themes/development/sections

---

Теперь используемый вами подход не является неправильным, но в приведенном выше коде есть некоторые ошибки. Их можно исправить, чтобы получить правильный дескриптор продукта, который будет использоваться для поиска all_products. Во-первых:

{{ all_products[section.settings.popular_product_{{i}}].url }}

неверно: мы никогда не вкладываем жидкие фигурные скобки в жидкие фигурные скобки. Вместо этого это должно выглядеть примерно так:

{% for i in (1..4) %}
  {% assign setting_name = 'popular_product_' | append: i %}
  {% assign handle = section.settings[setting_name] %}
  {% assign popular_product = all_products[handle] %}
  <!-- Cool stuff with our popular_product object -->
{% endfor %}

Затем переменная capture будет оценивать все между тегами и сохранять его в виде строки. Когда вы используете:

{% capture popular_product %}section.settings.popular_product_{{i}}{% endcapture %}

Содержимое захвата будет сначала подставлять значение i, а затем захватывать результирующую строку, которая не является дескриптором продукта! Что вам действительно нужно, так это конкретное значение в объекте section.settings.

Вы должны использовать capture, чтобы просто получить нужную переменную popular_product_x и получить доступ к ней внутри section.settings. Например:

{% capture field_name %}popular_product_{{i}}{% endcapture %}
{% assign popular_product = all_products[section.settings[field_name]] %}
<!-- Cool stuff with your popular product -->

Надеюсь, это поможет!

---

Примечание: Я лично предпочитаю assign для простых переменных, подобных приведенным выше, и использую capture только для захвата нескольких строк (например, блока HTML), но в этом случае работает любая из них. Предупреждение с capture: помните, что все пробелы также фиксируются, что часто непреднамеренно с простыми переменными, такими как дескрипторы продукта или имена настроек.

Надеюсь, это поможет!