为脚本更新 Liquid 模板

如果您在在线商店中运行脚本,则需要检查它们对在线店面中页面的影响。许多模板都包含支持脚本的代码,但有些模板则没有。如果您的模板没有该代码,则可以添加它。

故障排除

大多数与脚本和模板相关的问题都涉及提供折扣的订单项目脚本。例如,订单总价正确,但订单项目价格未显示折扣。客户需要了解其折扣的计算方式。他们希望看到原价和折扣价以及折扣的简短描述。如果您的购物车中缺少其中任何详细信息,则需要添加 Liquid 代码以使其显示。

若要检查脚本对在线店面的影响,一个很好的方法是以客户身份访问并执行触发脚本的操作。

Liquid 对象属性

以下列表包含在商店购物车中支持脚本时通常需要的 Liquid 对象属性:

购物车对象属性:

订单项目属性:

脚本对象:

  • 可使用 脚本对象 返回有关商店活跃脚本的信息。在调试脚本时,此对象非常有用。

示例

以下示例介绍了为支持订单项目脚本而可以对 cart.liquid 模板进行的更改。

购物车示例

例如,如果您的购物车中有三个订单项目:

  • 足球
    • 数量:1
    • 单价:15.00 美元
  • 网球
    • 数量:5
    • 单价:5.00 美元
  • 跑鞋
    • 数量:1
    • 单价:30.00 美元

并且您已发布一个应用以下折扣的脚本:

  • 购买两个或更多网球可享九折优惠
  • 所有鞋类减 5 美元

那么,您的 cart.liquid 模板可能是一个简单的表格,其中列出了订单项目及其总金额的摘要:

<table class="cart">
  <thead class="heading">
    <tr>
      <th>Product</th>
      <th>Quantity</th>
      <th>Total</th>
    </tr>
  </thead>

  <tbody class="line-items">
    {% for item in cart.items %}
    <tr>
      <td>{{ item.product.title }}</td>
      <td>{{ item.quantity }}</td>
      <td>{{ item.line_price | money }}</td>
    </tr>
    {% endfor %}
  </tbody>

  <tfoot class="summary">
    <tr>
      <td colspan="2">Total</td>
      <td>{{ cart.total_price | money }}</td>
    </tr>
  </tfoot>
</table>

应用脚本提供的折扣后,此模板会为您的购物车创建下表:

产品数量总计
足球115.00 美元
网球522.50 美元
跑鞋125.00 美元
总计62.50 美元

更新订单项目

为了显示脚本应用的折扣,我们需要更新订单项目以显示三个关键信息:

  • 折扣前的订单项目价格
  • 折扣后的订单项目价格
  • 描述所应用折扣的消息。

为此,请使用以下 Liquid 对象属性:

  • line_item.total_discount 返回已应用于订单项目的折扣金额
  • line_item.original_line_price 返回折扣前的订单项目价格
  • line_item.message 返回一条描述已应用于订单项目的折扣的消息。

使用删除线效果有助于区分原订单项目价格和折扣后的订单项目价格:

<tbody class="line-items">
  {% for item in cart.items %}
  <tr>
    <td>{{ item.product.title }}</td>
    <td>{{ item.quantity }}</td>
    <td>
      {{ item.line_price }}
      {% if item.total_discount > 0 %}
        <s>{{ item.original_line_price }}</s>
        ( {{ item.message }} )
      {% endif %}
    </td>
  </tr>
  {% endfor %}
</tbody>

您的购物车现在应如下所示:

产品数量总计
足球115.00 美元
网球522.50 美元 25.00 美元(购买两个或更多网球可享九折优惠)
跑鞋125.00 美元 30.00 美元(所有鞋类减 5 美元)
总计62.50 美元

更新购物车摘要

为了帮助客户跟踪其订单价格,您还应显示:

  • 购物车的原始小计,以便客户比较折扣前后的总计
  • 客户在购物车中获得的总节省金额。

同样,若要添加此信息,请使用以下 Liquid 对象属性:

  • cart.total_discount 返回应用于购物车中商品的折扣金额
  • cart.original_total_price 返回折扣前的购物车小计。

利用此信息,您更新后的 .summary 代码块可能如下所示:

<tfoot class="summary">
  <tr>
    <td colspan="2">Subtotal</td>
    <td>{{ cart.original_total_price | money }}</td>
  </tr>
  <tr>
    <td colspan="2">Discount Savings</td>
    <td>{{ cart.total_discount | money }}</td>
  </tr>
  <tr>
    <td colspan="2">Total</td>
    <td>{{ cart.total_price | money }}</td>
  </tr>
</tfoot>

您的购物车表格现在应如下所示:

产品数量总计
足球115.00 美元
网球522.50 美元 25.00 美元(购买两个或更多网球可享九折优惠)
跑鞋125.00 美元 30.00 美元(所有鞋类减 5 美元)
小计70.00 美元
折扣优惠金额7.50 美元
总计62.50 美元

通过向模板中添加一些新的 Liquid 对象,您可以帮助客户了解其折扣的计算方式。

其他示例

以下 Liquid 示例显示了每个订单项目的折扣:

{% if item.original_line_price != item.line_price %}
  <small class="original-price"><s>{{ item.original_line_price | money }}</s></small>
  {% endif %}
  {{ item.line_price | money }}
  {% for discount in item.discounts %}
  <small class="discount">{{ discount.title }}</small>
  {% endfor %}

查看另一个包含 Liquid 代码更改的折扣示例