# Data attributes and states

> The data attributes and state classes every AndOr widget shares, with links to each widget's own.

Source: https://backtrackhq.com/docs/developers/data-attributes/

AndOr widgets say what they are doing with `data-*` attributes and
state classes. Style these, not the words. The words change with the
cart and the language. The attributes do not.

> **Caution:** A hidden widget or part carries both the `hidden`
> attribute and an inline `display: none`. Never write a rule that forces
> it back on, such as `andor-badge { display: block }`. It would bring
> back an expired sale.

## On every widget host

| Attribute | Values | Meaning |
|---|---|---|
| `data-andor-widget` | `badge`, `countdown`, `offer`, `goal`, `tiers`, `bundle`, `bxgy`, `gift` | the widget type |
| `data-andor-widget-id` | a block id, or `pasted` | which block drew it; `pasted` for a one-line tag |
| `data-andor-state` | `active`, `hidden`, `applied` | written by the events script on each pass |

- The sale price host, `<andor-price>`, carries no `data-andor-widget`.
  It is still a host.
- On the offers list, each row is a host, not the `<andor-offers>`
  wrapper.
- `applied` means the host has an `--applied` class. Only the badge
  reaches it.
- `data-andor-state` is a styling hook. Do not read it back as truth.

## Progress: `data-andor-progress`

Widgets that move through a deal's steps write their progress on the
host as `data-andor-progress`:

| Value | Meaning |
|---|---|
| `locked` | the cart has not reached the deal yet |
| `unlocked` | the cart reached a step, or the deal can be claimed now |
| `won` | the top step is reached, or checkout applied the deal |
| `off` | the cart earned it and another discount won instead |

The goal bar uses `locked`, `unlocked` and `won`. The bundle card uses
`locked` and `won`. The Buy X Get Y and gift banners use all four.

```css
andor-bundle[data-andor-progress="won"] {
  --andor-bundle-text-color: #1f5f3a;
  --andor-bundle-fill-color: #1f5f3a;
}
```

## Per widget

Each widget's own attributes and states are on its page:

- [Sale price](https://backtrackhq.com/docs/widgets/sale-price/events/#data-attributes-and-states)
- [Savings badge](https://backtrackhq.com/docs/widgets/savings-badge/events/#data-attributes-and-states)
- [Countdown](https://backtrackhq.com/docs/widgets/countdown/events/#data-attributes-and-states)
- [Current offers](https://backtrackhq.com/docs/widgets/current-offers/styling/), on its Styling page
- [Volume tiers](https://backtrackhq.com/docs/widgets/volume-tiers/events/#data-attributes-and-states), the table and the picker cards
- [Bundle card](https://backtrackhq.com/docs/widgets/bundle/events/#data-attributes-and-states), and the Buy X get Y and gift banners
- [Buy X get Y](https://backtrackhq.com/docs/widgets/buy-x-get-y/events/#data-attributes-and-states), with the cart claim rows
- [Free gift slot](https://backtrackhq.com/docs/widgets/free-gift/events/#data-attributes-and-states), with the gift slot states
- [Goal bar](https://backtrackhq.com/docs/widgets/goal-bar/events/#data-attributes-and-states)
- [Discount callout](https://backtrackhq.com/docs/widgets/discount-callout/styling/#states-and-data-attributes), on its Styling page
- [Collection banner](https://backtrackhq.com/docs/widgets/collection-banner/styling/#states-and-data-attributes), on its Styling page

## Style states with colour, not size

Widgets printed by JavaScript first print a skeleton at the finished
size. Some states are written only on the drawn widget. If you change a
size per state, the page moves when the widget is drawn. Change colors
per state, and sizes through the widget's custom properties.