Focus Gummies

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:

{
  "detail": {
    "resource": {
      "widgetType": "volume-picker-mini-buttons",
      "productId": 8388735991987,
      "variantId": 45171736903859,
      "widgetId": "dkl_volume_picker_1_De4L3K"
    }
  }
}

{
  "detail": {
    "resource": {
      "productId": 8388735991987,
      "variantId": 45171736903859,
      "widgetId": "dkl_volume_picker_1_De4L3K",
      "widgetType": "volume-picker-mini-buttons",
      "previousTier": {
        "index": 0,
        "quantity": 2,
        "discountAmount": 10,
        "discountType": "percentage",
        "unitPriceCents": 1080
      },
      "currentTier": {
        "index": 1,
        "quantity": 5,
        "discountAmount": 15,
        "discountType": "percentage",
        "unitPriceCents": 1020
      }
    }
  }
}