如何实现购物车奇数商品显示原价、偶数商品显示促销价？

问题描述 #

店铺内所有商品均设置了原价（regular price）与促销价（sale price），需求为：顾客将商品加入购物车后，奇数位（第1、3、5...项）商品显示原价，偶数位（第2、4、6...项）商品显示促销价，但现有代码添加至main-cart-items.liquid后未生效。

原代码问题分析 #

核心错误在于偶数项的判断逻辑完全错误：

{% assign isEven = itemIndex | minus: 1 | times: -1 %}
{% if isEven %}

这段代码的计算逻辑是-(itemIndex-1)，比如：

• 第1项（itemIndex=1）：结果为0，Liquid中0会被视为false
• 第2项（itemIndex=2）：结果为-1，非0值被视为true
• 第3项（itemIndex=3）：结果为-2，非0值被视为true
  这会导致除了第1项外，所有项都进入偶数分支，完全不符合需求。

另外，原代码只修改了移动端的价格列（medium-hide large-up-hide类），桌面端的价格显示部分可能未同步修改，这也是常见的遗漏点。

修复后的代码 #

{% assign itemIndex = 0 %}

{% for item in cart.items %}
{% assign itemIndex = itemIndex | plus: 1 %}
<tr class="cart-item" id="CartItem-{{ itemIndex }}">
<!-- 原有图片、商品详情等代码 -->

<!-- 移动端价格列 -->
<td class="cart-item__totals right medium-hide large-up-hide">
  <div class="loading-overlay hidden">
    <!-- 原有加载层代码 -->
  </div>
  <div class="cart-item__price-wrapper">
    {% if itemIndex | modulo: 2 == 0 %}
      <!-- 偶数项：显示促销价 -->
      <span class="price price--end">
        {{ item.final_line_price | money }}
      </span>
    {% else %}
      <!-- 奇数项：显示原价 -->
      <span class="price price--end">
        {{ item.original_line_price | money }}
      </span>
    {% endif %}

    {%- if item.variant.available and item.unit_price_measurement -%}
      <div class="unit-price caption">
        <!-- 原有单价显示代码 -->
      </div>
    {%- endif -%}
  </div>
</td>

<!-- 同步修改桌面端价格列（通常带large-up-show类） -->
<td class="cart-item__totals right large-up-show">
  <div class="loading-overlay hidden">
    <!-- 原有加载层代码 -->
  </div>
  <div class="cart-item__price-wrapper">
    {% if itemIndex | modulo: 2 == 0 %}
      <span class="price price--end">
        {{ item.final_line_price | money }}
      </span>
    {% else %}
      <span class="price price--end">
        {{ item.original_line_price | money }}
      </span>
    {% endif %}

    {%- if item.variant.available and item.unit_price_measurement -%}
      <div class="unit-price caption">
        <!-- 原有单价显示代码 -->
      </div>
    {%- endif -%}
  </div>
</td>

<!-- 原有数量、删除按钮、错误提示等代码 -->
</tr>
{% endfor %}

关键修改说明 #

1. 正确的奇偶判断：使用Liquid的modulo过滤器，itemIndex | modulo: 2 == 0表示索引除以2余数为0时即为偶数项，逻辑准确。
2. 简化价格显示逻辑：根据需求直接显示对应价格，去掉原有的折扣价格判断（因所有商品都处于促销状态，无需额外校验原价与促销价是否相等）。
3. 同步桌面端价格：原代码仅修改了移动端价格列，需找到桌面端对应的价格列（通常带有large-up-show类），同步添加相同的奇偶判断逻辑，确保全设备显示一致。

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