折扣

折扣可以在行项目级别，或购物车、结账或订单级别应用。这意味着折扣可以直接作用于特定行项目，也可以作用于整个购物车或订单。

本教程将介绍如何在 theme 中展示折扣。

前提条件

您已创建 cart template 或 order template。

资源

要在 theme 中展示折扣，您需要使用以下资源：

• discount_applications object
• line_item object
• spz-cart 组件

discount_applications object

discount_application object 在购物车、结账或订单级别注册折扣。根据您实现折扣展示的位置，可通过相关父 object 访问折扣应用信息：

• 对于 cart template
  • cart.discount_applications
• 对于 order template
  • order.order_info.discount_applications

line_item object

要完成价格展示，您需要使用 line_item object 中的价格和折扣属性，包括：

• original_line_price
• final_price
• final_line_price

实现折扣展示

由于折扣可以作用于行项目或整个购物车/订单，您应在两个地方展示折扣信息：

• 与各行项目一起展示
• 与合计摘要一起展示

本教程中的示例使用 cart template。

行项目折扣

如果折扣作用于特定行项目，则应与这些项目一起展示。要与行项目一起展示折扣，需要在展示中包含以下内容：

• 行项目价格
• 行项目折扣

行项目价格

如果行项目已应用折扣，应显示折后新价格。可以通过 Liquid line_item object 的以下属性访问：

• final_price
• final_line_price

行项目折扣

如果行项目已应用折扣，应显示每个已应用的折扣及其关联的折扣金额或折扣图标。

<spz-cart layout="container">
  <template>
    <div>
      <div spz-for="line_item in data.line_items">
        <div spz-for="discount_application in line_item.discount_applications">
          <div>
            <spz-img
              spz-if="${!!discount_application.icon}"
              src="${discount_application.icon}"
              layout="fixed"
              width="16"
              height="16"
            ></spz-img>
            <span>${discount_application.title}</span>
          </div>
          <span spz-if="${discount_application.discount_amount > 0 || discount_application.amount > 0}">
            (-<spz-currency style="display: inline-block;" layout="container" value="${discount_application.discount_amount || discount_application.amount}"></spz-currency>)
          </span>
        </div>
      </div>
    </div>
  </template>
</spz-cart>

购物车折扣

行价格是行项目折扣应用后的行项目总价，总价是购物车折扣应用后的购物车总价。

<spz-cart layout="container">
  <template>
    <div>
      <div>行价格：<spz-currency layout="container" value="${data.line_price}" style="display: inline-block;"></spz-currency></div>

      <div spz-if="${data.total_discount > 0}">
        折扣：-<spz-currency layout="container" value="${data.total_discount}" style="display: inline-block;"></spz-currency>
      </div>

      <div>
        总计：<spz-currency layout="container" value="${data.total_price}" style="display: inline-block;"></spz-currency>
      </div>
    </div>
  </template>
</spz-cart>