在 Shopify liquid 框架中动态填充 forloop 数组

Question

我正在尝试在 Shopify 中创建我自己的数组，以便我可以轻松地填充一个光滑的滑块。我试过创建一个数字数组，然后用它来调用变量，但它似乎不起作用。我一直在收到 "unexpected character" 等等

{% 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 循环

液体中有两种类型的 FOR 循环。

1) 列出数组所有项的标准：

{% for product in collection.products %}

其中 collection.products 是一组产品。

2) 您正在尝试构建的手动数组

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

其中 1 是起始索引，5 是结束索引。

流式语法

流式语法有两种类型。

{{  }}

和

{%  %}

{{ }}用于输出内容，{% %}用于液体逻辑（if/assign/capture/for等...）

你的代码有错误

{%- 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 %}

在 Shopify liquid 框架中动态填充 forloop 数组

Dynamically populate a forloop array in Shopify liquid framework

arrays

for-loop

liquid

shopify

For 循环

流式语法

你的代码有错误

您的代码应该是什么样子