在 Shopify 液体框架中动态填充 forloop 数组答案

【问题标题】：Dynamically populate a forloop array in Shopify liquid framework在 Shopify 液体框架中动态填充 forloop 数组
【发布时间】：2019-11-08 22:42:00
【问题描述】：

我正在尝试在 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 %}

【问题讨论】：

标签： arrays for-loop shopify liquid

【解决方案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 %}

【讨论】：