Web Component

There is no gift-selector element

The Gift Selector has no <dkl-gift-selector> tag. It is the quickview dialog opened in its selection mode, and nothing you place opens it for a tier: the Gift with purchase app embed does that itself when the cart unlocks a gift. A <dkl-quickview> trigger never opens the gift selector.

The one element you place for it is <dkl-change-gifts> — the cart trigger that reopens the dialog on the gifts already claimed so the shopper can swap them. It never opens a plain product quickview: the two triggers share the dialog, not the job. To open selection mode with your own groups and slots, use the JavaScript API.

<dkl-change-gifts>

A trigger: a click reopens the gift selector on the tiers the shopper has already claimed, with the gifts currently in the cart pre-filled, so they can change them. It shows only while there is something to change and hides itself otherwise, so it needs no guard in your Liquid.

With the embed’s Show a “Change gifts” button in the cart setting on, one is placed for you after button#checkout (Dawn and Horizon) or any [name="checkout"] control, and kept there through the theme’s cart re-renders. You can place your own instead of, or as well as, that one.

Usage

Wrap whatever should open the dialog — a button, a link, an icon:

<dkl-change-gifts>
  <button type="button" class="button button--secondary">Swap your gifts</button>
</dkl-change-gifts>

An empty tag renders a plain button, with data-label as its text:

<dkl-change-gifts data-label="Pick different gifts"></dkl-change-gifts>

That default button is the one the embed’s Discount Kit button style also uses; see Styling for its tokens.

What happens to clicks inside the trigger

• A click on an <a href> inside it opens the dialog instead of navigating.
• Anything inside marked data-dkl-change-gifts-ignore is exempt: clicks there behave normally.

When it shows

The element is hidden unless a claimed gift tier offers a real choice — more than one product, or more than one variant the tier permits. It stays hidden when:

• the Gift with purchase embed isn’t enabled, or Use the Live quickview is off;
• the embed’s Show a “Change gifts” button in the cart setting is off (the setting enables the behaviour for every trigger, not just the automatic one);
• every claimed gift has a single option;
• the cart holds no gifts.

On a page that loads with gifts already in the cart it is visible from the first paint; after that it follows every cart change.

Attributes

Attribute	Purpose
data-label	Text of the default button an empty tag renders (default “Change gifts”)
hidden	Managed by the element from the embed’s decision — don’t set it yourself

For developers

The element reads the embed’s decision and asks it to open:

• window.discount_kit.core.canChangeGifts() — whether there is something to change right now.
• window.discount_kit.core.openChangeGifts() — open the gift selector on the claimed tiers. Returns false when there is nothing to change.
• discount_kit:gift_choices on document, with detail.changeable, after every cart pass — the element listens to it; you can too.

The JavaScript API covers opening selection mode with your own groups and slots.