Discounts​

Discounts can be applied to the cart, checkout, order items, or the entire order. This means discounts can flexibly apply to specific order items or the entire cart/order.

In this tutorial, you will learn how to display discounts in your theme.

Requirements​

You have already created a cart template or a customer/order template.

Resources​

To display discounts in your theme, you will use the following:

• discount_application object
• discount_allocation object
• line_item object

discount_application object​

When a discount is applied in the cart, order, or checkout, a discount_allocation object will exist. Depending on where the discount is applied, you can access the corresponding discount information through the parent object.

• For the cart template:
  • cart.discount_applications
  • cart.cart_level_discount_applications

discount_allocation object​

The discount_allocation object links a discount_application to an order item.

You can access all discount information related to an order item using the line_item.line_level_discount_allocations property.

line_item object​

To complete the price display, you will use the price and discount properties of the line_item object, including:

• original_line_price
• line_level_total_discount
• final_price
• final_line_price
• original_price

Implementing Discount Displays​

Since discounts can be applied to order items, the entire cart, or the order, you need to display discount information in two places:

• Individual line items
• Order total section

This tutorial uses the cart as an example. Similarly, you can adjust these examples to use the order object to add discounts to the customer/order template.

You can implement these components directly in the Handlebars template or within a section of the JSON template.

Line Item Discounts​

If an order item has a discount, the discount needs to be displayed within the order item. To display a discount for an order item, you need to show the following:

• Line item price
• Line item discounts

Line Item Price​

If a discount is applied to an order item, the original price should be struck through, and the new discounted price should be displayed. You can use the Handlebars line_item object to access the following properties:

• original_price
• original_line_price
• final_price
• final_line_price

Line Item Discounts​

If a discount is applied to an order item, each discount and its associated amount or the total discount amount should be displayed. You can access the specific discounts for an order item using the line_item object's line_level_discount_allocations property and the total line item discount via the line_level_total_discount property.

Example​

Below is an example of displaying the price and discount information:

{{#for cart.items as |line_item| }}
  {{#if line_item.original_price > line_item.final_price }}
    <s>{{ money line_item.original_price }}</s>
  {{/if}}
  <span>{{ money line_item.final_price }}</span>
  {{#if line_item.line_level_discount_allocations.length > 0 }}
    <span>Discounts:</span>
    <ul>
      {{#for line_item.line_level_discount_allocations as |discount_allocation| }}
        <li>
          {{ discount_allocation.discount_application.title }}-{{ money discount_allocation.amount }}
        </li>
      {{/for}}
    </ul>
  {{/if}}
{{/for}}

Cart Discounts​

The subtotal is the sum of the order items after applying the line item discounts, and the total is the cart amount after applying the cart-level discounts. If discounts apply to the whole cart, they should be shown between the subtotal and total.

Cart-level discounts can be accessed via the cart or order object's cart_level_discount_applications property.

<strong>Subtotal:</strong> {{ money cart.items_subtotal_price }}
{{#if cart.cart_level_discount_applications.length > 0 }}
  <strong>Discounts:</strong>
  <ul>
    {{#each cart.cart_level_discount_applications as |discount_application|}}
      <li>
        {{ discount_application.title }}-{{ money discount_application.total_allocated_amount }}
      </li>
    {{/each}}
  </ul>
{{/if}}
<strong>Total:</strong> {{ money cart.total_price }}