Skip to product information
Beautiful Letterbox Flowers
  • Beautiful Letterbox Flowers
  • Beautiful Letterbox Flowers
Beautiful Letterbox Flowers

Beautiful Letterbox Flowers

£19.99

Dev details for Order Goal PDP Widget

1. Cart Updates

The widget listens to cart:update events from the theme. When the cart updates:

  • The progress bar is updated to reflect the new cart sub-total.
  • The tier messages are updated to reflect the new cart sub-total.

The progress bar updates' progress is relative to the tier that is currently being reached, resulting in a smoother progress bar animation that is more indicative of the actual progress towards the next tier.

2. Events Dispatched

This widget dispatches the following custom events:

Event: discount-kit:widget:mount

Fired when the widget is initialized and mounted to the DOM. Example payload:

{
  "detail": {
    "resource": {
      "widgetType": "order-goal-pdp",
      "widgetId": "order-goal-pdp-23830276202",
      "currentTier": {
        "tierLevel": 1,
        "minSpendCents": 10000,
        "discountAmount": 1000,
        "discountType": "percentage",
        "message": "10% off"
      },
      "cartTotalCents": 10000
    }
  }
}
Event: discount-kit:order-goal:tier-change

Fired when a tier is selected or changed. Includes both previous and current tier details. Example payload:

{
  "detail": {
    "resource": {
      "widgetId": "order-goal-pdp-23830276202",
      "widgetType": "order-goal-pdp",
      "previousTier": {
        "tierLevel": 1,
        "minSpendCents": 10000,
        "discountAmount": 10,
        "discountType": "percentage",
        "message": "10% off"
      },
      "currentTier": {
        "tierLevel": 2,
        "minSpendCents": 20000,
        "discountAmount": 20,
        "discountType": "percentage",
        "message": "20% off"
      },
      "cartTotalCents": 20000
    }
  }
}
Event: discount:update (Theme-level)

Fired for broader theme integrations. Same payload as tier-change above, but uses the theme's standard discount:update event name.

Event: discount-kit:widget:unmount

Fired when the widget is disconnected from the DOM. Same structure as widget:mount.

Note: All events bubble, so you can listen on document or any ancestor element.

Spend £100 more to save 10% on your order!

Save 10%
when you spend £100+
Save 20%
when you spend £200+

With Discount Kit you can set up Order Goal discounts for items listed in your store.

An example of an Order Goal could be:

Spend £50 and get 10% off your order% 😊

You can see that the discount has been applied at checkout and is showing the details of the promotion just above the "estimated total" section.

You may also like