Shopify中Liquid变量重置失效问题求助

你遇到的问题核心是Liquid的{% increment %}标签的特殊机制：它创建的是全局持久化的特殊计数器变量，完全不受普通assign语句的控制。你用{% assign image_position = 0 %}重置的是一个普通变量，但{% increment image_position %}调用的是Liquid内部维护的独立计数变量，两者根本不是同一个东西，所以重置操作完全无效。

方案1：使用for循环自带的索引（推荐） #

Liquid的for循环内置了现成的索引变量，forloop.index0从0开始计数，forloop.index从1开始计数，直接用这个就不用手动维护计数器，代码更简洁可靠：

<!-- Capture desktop images -->
{%- capture desk_slideshow_images -%}
  {%- for image in product.images -%}
    <div class="desktop__image" data-image-index="{{ forloop.index0 }}">
          <img src="{{ image | img_url: 'x1600' }}">
    </div>
  {%- endfor -%}
{%- endcapture -%}

<!-- Capture mobile images -->
{%- capture mobile_slideshow_images -%}
  {%- for image in product.images -%}
    <img class="mobile__image" src="{{ image | img_url: 'x1600' }}" data-image-index="{{ forloop.index0 }}">
  {%- endfor -%}
{%- endcapture -%}

方案2：手动用普通变量维护计数 #

如果需要自定义计数器的起始值或步长，可以用普通变量配合assign手动递增，避免使用increment：

<!-- Capture desktop images -->
{%- capture desk_slideshow_images -%}
  {% assign image_position = 0 %}
  {%- for image in product.images -%}
    <div class="desktop__image" data-image-index="{{ image_position }}">
          <img src="{{ image | img_url: 'x1600' }}">
    </div>
    {% assign image_position = image_position | plus: 1 %}
  {%- endfor -%}
{%- endcapture -%}

<!-- Capture mobile images -->
{%- capture mobile_slideshow_images -%}
  {% assign image_position = 0 %}
  {%- for image in product.images -%}
    <img class="mobile__image" src="{{ image | img_url: 'x1600' }}" data-image-index="{{ image_position }}">
    {% assign image_position = image_position | plus: 1 %}
  {%- endfor -%}
{%- endcapture -%}

Liquid的变量作用域和JavaScript差异很大：

• {% increment %}创建的计数器是全局生效的，从页面渲染开始到结束一直累加，无法用assign重置
• 用{% assign %}创建的普通变量，作用域是当前上下文（比如capture块、if块内部），在每个块内重新assign就能重置变量值

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