Skip to product information
The Perfect Pair of Jeans!
  • The Perfect Pair of Jeans!
  • The Perfect Pair of Jeans!
  • The Perfect Pair of Jeans!
  • The Perfect Pair of Jeans!
The Perfect Pair of Jeans!

The Perfect Pair of Jeans!

£49.95

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+

Spend over £45 on a pair of our fabulous Jeans and receive a Free Pair of Sunglasses as a gift from us :)

👖 The Perfect Pair of Jeans: Dive into the world of denim and discover your new favourite pair of jeans. Crafted from premium quality material, our jeans offer unbeatable comfort and durability. With a flattering fit and timeless design, they are a wardrobe essential for any fashion-forward individual.

You may also like