> ## Documentation Index
> Fetch the complete documentation index at: https://discountkit.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Web Component

> Drop <dkl-order-goal> into your theme markup and configure it with data-* attributes

A web component is the `<dkl-order-goal>` tag written directly into your theme's Liquid.
Order goals are order-level, so they live in the shop feed. On a product page the embed
pre-renders carriers for them, so the empty tag clones the default and renders server-side:

```html theme={null}
<dkl-order-goal></dkl-order-goal>
```

To target a specific order-goal discount (rather than the first eligible one), set
`data-discount-id` — that goal's carrier must also be present on the page. The `discount-`
prefix is optional, and you can place one `<dkl-order-goal>` tag per discount to show several:

```html theme={null}
<dkl-order-goal data-discount-id="1478638797012"></dkl-order-goal>
```

## Reacting to changes

`<dkl-order-goal>` emits `discount-kit-live:order-goal:tier-change` when the cart total
crosses a tier boundary (the initial render establishes the baseline silently). To run your
own code on a tier change, listen for that event — see its [Events](/components/order-goal/events)
page and [Listen for tier changes](#examples) in the examples below.

## Examples

For the full list of `data-*` attributes you can set, see
[Styling & Data Attributes](/components/order-goal/styling-and-data).

```html Override attributes + tokens theme={null}
<dkl-order-goal
  data-layout="stacked"
  data-message-template="Add [amount] more for [discount] off!"
  data-success-heading="You did it! 🎉"
  style="
    --dkl-og-progress-color: #6d28d9;
    --dkl-og-marker-active-color: #6d28d9;
    --dkl-og-background: #f5f3ff;
    --dkl-og-radius: 16px;
  "
></dkl-order-goal>
```

```html Stacked layout theme={null}
<dkl-order-goal data-layout="stacked"></dkl-order-goal>
```

```js Listen for tier changes theme={null}
// Fires whenever the cart total crosses a tier boundary
document.addEventListener(
  'discount-kit-live:order-goal:tier-change',
  (event) => {
    const { currentTier, previousTier, cartTotalCents, discountId } =
      event.detail.resource

    // currentTier is null below the first tier
    if (currentTier && (!previousTier || currentTier.tierLevel > previousTier.tierLevel)) {
      console.log(`Unlocked tier ${currentTier.tierLevel} on ${discountId}!`)
    }
  }
)
```

```js Example event payload theme={null}
// event.detail.resource on tier-change — here the cart crossed from tier 1 into tier 2
{
  widgetId: null,
  widgetType: 'order-goal',
  discountId: 'discount-1478638797012',
  previousTier: {
    tierLevel: 1,
    minSpendCents: 5000,
    discountAmount: 10,
    discountType: 'percentage',
    message: 'Save 10%'
  },
  currentTier: {
    tierLevel: 2,
    minSpendCents: 10000,
    discountAmount: 15,        // percent — or CENTS when discountType is 'fixedAmount'
    discountType: 'percentage',
    message: 'Save 15%'
  },
  cartTotalCents: 11000
}
```

## Next steps

<CardGroup cols={2}>
  <Card title="Styling & Data Attributes" icon="palette" href="/components/order-goal/styling-and-data">
    Every `data-*` attribute, `--dkl-og-*` token, and Light-DOM class.
  </Card>

  <Card title="App block" icon="puzzle-piece" href="/components/order-goal/app-block">
    The no-code, theme-editor placement.
  </Card>
</CardGroup>