Shopify Liquid动态填充循环数组实现Slick滑块报错排查

你遇到的"unexpected character"报错，核心原因是Liquid不允许在赋值语句里直接拼接字符串和变量来动态引用已定义的变量。你写的{%- assign this_link = "block_"{{NUMBER}}"_link" %}这种混合写法违反了Liquid的语法规则，模板解析器无法识别这种格式，所以抛出了语法错误。

下面给你两种解决方案，其中第二种更推荐，因为代码更简洁易维护：

方案一：修复动态变量引用逻辑 #

用capture标签先拼接出完整的变量名，再通过lookup过滤器从上下文里获取对应变量的值，同时注意去除NUMBER里的空格（因为你用, 分割字符串后，每个元素会带空格）：

{% 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 %}
      {%- capture link_var %}block_{{ NUMBER | strip }}_link{% endcapture %}
      {%- capture img_var %}block_{{ NUMBER | strip }}_img{% endcapture %}
      {%- capture title_var %}block_{{ NUMBER | strip }}_title{% endcapture %}
      {%- assign this_link = link_var | lookup: page %}
      {%- assign this_image = img_var | lookup: page %}
      {%- assign this_title = title_var | lookup: page %}
      <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>
      </div>
    {% endfor %}
  </div>
</div>

方案二：使用对象数组（更推荐） #

直接把滑块需要的所有数据定义成一个对象数组，完全避免动态变量引用的问题，代码结构更清晰，后续维护也更方便：

{% assign slider_items = [
  {
    "link": "/collections/col-1",
    "title": "Title 1",
    "img": "imglink"
  },
  {
    "link": "/collections/col-2",
    "title": "Title 2",
    "img": "imglink"
  },
  {
    "link": "/collections/col-3",
    "title": "Title 3",
    "img": "imglink"
  },
  {
    "link": "/collections/col-4",
    "title": "Title 4",
    "img": "imglink"
  },
  {
    "link": "/collections/col-5",
    "title": "Title 5",
    "img": "imglink"
  }
] %}
<div class="slick-slider-row">
  <div class="wrapper">
    <h2><a href="x">MyCompants</a></h2>
    {% for item in slider_items %}
      <div class="responsive carousel slider-mobile-hide">
        <div class="slick-slide">
          <a href="{{ item.link }}">
            <img class="lazyload" alt="{{ item.title }}" src="{{ item.img }}">
          </a>
          <p><a class="slider-collection-name-link" href="{{ item.link }}">{{ item.title }}</a></p>
        </div>
      </div>
    {% endfor %}
  </div>
</div>

额外注意事项 #

1. 你的原始代码里{% for %}循环结束后，没有闭合.responsive carousel的</div>标签，记得补全，否则会导致HTML结构混乱；
2. 确保你已经正确引入了Slick滑块的CSS和JS文件，否则滑块无法正常初始化（这部分属于前端配置问题，和Liquid语法无关）。

内容的提问来源于stack exchange，提问作者NothingToSeeHere