Динамическое заполнение массива forloop в жидкой среде Shopify

Question

Я пытаюсь создать свой собственный массив в Shopify, чтобы я мог легко заполнить скользящий слайдер. Я попытался создать числовой массив, а затем использовать его для вызова переменных, но, похоже, он не работает. Я просто продолжаю получать "неожиданный характер" и т. Д.

{% assign number_group = "1, 2, 3, 4, 5" | split: ','%}
{%- assign block_1_link = "/collections/col-1" %}
{%- assign block_1_title = "Title 1" %}
{%- assign block_1_img = "imglink" %}

{%- assign block_2_link = "/collections/col-2" %}
{%- assign block_2_title = "Title 2" %}
{%- assign block_2_img = "imglink" %}

 <div class="slick-slider-row">

  <div class="wrapper">
   <h2><a href="x">MyCompants</a><h2>

     {% for NUMBER in number_group %}
      {%- assign this_link = "block_"{{NUMBER}}"_link" %}
      {%- assign this_image = "block_"{{NUMBER}}"_img" %}
      {%- assign this_title = "block_"{{NUMBER}}"_title" %}
      <div class="responsive carousel  slider-mobile-hide">
       <div class="slick-slide">
          <a href="{{this_link}}">
            <img class="lazyload" alt="{{ this_title}}" src="{{ 
           this_image}}">
          </a>
          <p><a class="slider-collection-name-link" href="  
         {{this_link}}">{{this_title}}</a></p>
        </div> 
    {% endfor %}

Answer 1

Я предполагаю, что вы новичок в жидком языке, поэтому я опишу его как можно более четко.

Для циклов

В жидкости есть два типа циклов FOR.

1) Стандартный, где вы перечисляете все элементы массива:

{% for product in collection.products %}

, где collection.products - это массив продуктов.

2) Ручной массив, который выпытаются построить

{% for i in (1..5) %}

Где 1 - начальный индекс, а 5 - окончание.

---

Жидкий синтаксис

Существует два типа жидкого синтаксиса.

{{  }}

и

{%  %}

{{ }} используется для вывода контента, а {% %} используется для логики жидкости (если / assign / capture / for etc ... )

Ошибки в вашем коде

{%- assign this_link = "block_"{{NUMBER}}"_link" %}

Это неверный синтаксис. Вы не можете иметь жидкость внутри жидкости. Если вы хотите сделать это так, правильный путь будет:

{%- assign this_link = "block_" | append: NUMBER | append: "_link" %}

или

{% capture this_link %}block_{{NUMBER}}_link{% endcapture %}

---

Кроме того, {{this_link}} выведет строку "block_1_link"а не переменная block_1_link.

Чтобы вывести переменную, вам нужно будет заключить ее в квадратные скобки, например {{[this_link]}}, поскольку вы присваиваете ей строку.

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

Как должен выглядеть ваш код

{%- assign block_1_link = "/collections/col-1" %}
{%- assign block_1_title = "Title 1" %}
{%- assign block_1_img = "imglink" %}

{%- assign block_2_link = "/collections/col-2" %}
{%- assign block_2_title = "Title 2" %}
{%- assign block_2_img = "imglink" %}

 <div class="slick-slider-row">

  <div class="wrapper">
   <h2><a href="x">MyCompants</a><h2>

     {% for NUMBER in (1..5) %}
      {%- assign this_link = "block_" | append: NUMBER | append: "_link" %}
      {%- assign this_image = "block_" | append: NUMBER | append: "_img" %}
      {%- assign this_title = "block_" | append: NUMBER | append: "_title" %}
      <div class="responsive carousel  slider-mobile-hide">
       <div class="slick-slide">
          <a href="{{[this_link]}}">
            <img class="lazyload" alt="{{ [this_title] }}" src="{{ [this_image] }}">
          </a>
          <p><a class="slider-collection-name-link" href="  
         {{[this_link]}}">{{[this_title]}}</a></p>
        </div> 
    {% endfor %}