Skip to product information
Debloat Gummies
  • Debloat Gummies
  • Debloat Gummies
Debloat Gummies

Debloat Gummies

£10.00
Buy More, Save More!

Dev details for Volume - Radio Groups Widget

1. Quantity Syncing

When data-dkl-sync-with-quantity="true" is set, the widget bidirectionally syncs with the product's <quantity-selector-component>:

  • Tier → Quantity: Selecting a tier updates the quantity selector to match the tier's threshold (e.g., selecting "Buy 5+" sets quantity to 5).
  • Quantity → Tier: Changing the quantity selector auto-selects the highest tier ≤ current quantity (e.g., typing "7" selects the "Buy 5+" tier if tiers are 2, 5, 10).
  • If quantity falls below the smallest tier, all tiers are deselected.

When disabled, quantity and tier selections remain independent.

2. Price Syncing

When data-dkl-update-price-on-change="true" is set, the widget updates the main <product-price> component with the tier's discounted unit price:

  • Selecting a tier replaces the .price span with the tier's unitPriceCents (discounted price per unit).
  • The original base price is cached in data-dkl-base-price for restoration.
  • If quantity drops below the smallest tier or the tier is deselected, the original price is restored.

When disabled, the product price is never modified by the widget.

When 'Exclude Compare Price' is set to true in your discount: The product price is never modified by the widget and the radio groups are disabled when viewing a variant that is on sale.

3. Variant Changes

The widget listens to variant:update events from the theme. When a variant changes:

  • All tier unit prices are recomputed using the new variant's base price (variant.price).
  • Tier price elements animate briefly to highlight the update.
  • If price syncing is enabled and a tier is active, the <product-price> is refreshed with the new tier's discounted unit price.
  • The cached base price (data-dkl-base-price) is updated to the new variant's price.

4. 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": "volume-picker-radio-groups",
      "productId": 8388735991987,
      "variantId": 45171736903859,
      "widgetId": "dkl_volume_picker_1_De4L3K"
    }
  }
}
Event: discount-kit:volume-discount:tier-change

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

{
  "detail": {
    "resource": {
      "productId": 8388735991987,
      "variantId": 45171736903859,
      "widgetId": "dkl_volume_picker_1_De4L3K",
      "widgetType": "volume-picker-radio-groups",
      "previousTier": {
        "index": 0,
        "quantity": 2,
        "discountAmount": 10,
        "discountType": "percentage",
        "unitPriceCents": 1080
      },
      "currentTier": {
        "index": 1,
        "quantity": 5,
        "discountAmount": 15,
        "discountType": "percentage",
        "unitPriceCents": 1020
      }
    }
  }
}
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.

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+

Reduce bloating and improve digestion with Debloat Gummies. Made from natural ingredients, these gummies are formulated to provide relief from discomfort and promote a healthier gut. Expertly crafted for maximum effectiveness, these gummies are a convenient and tasty option for maintaining a balanced digestive system.

You may also like