See it in action Data attributes and states
On this page
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
hiddenattribute and an inlinedisplay: none. Never write a rule that forces it back on, such asandor-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 nodata-andor-widget. It is still a host. - On the offers list, each row is a host, not the
<andor-offers>wrapper. appliedmeans the host has an--appliedclass. Only the badge reaches it.data-andor-stateis 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.
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
- Savings badge
- Countdown
- Current offers, on its Styling page
- Volume tiers, the table and the picker cards
- Bundle card, and the Buy X get Y and gift banners
- Buy X get Y, with the cart claim rows
- Free gift slot, with the gift slot states
- Goal bar
- Discount callout, on its Styling page
- Collection banner, 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.