See it in action Savings badge events
On this page
All are bubbling CustomEvents with widgetType: "badge". Listen on
document. For every widget’s events, see
Events.
| Event | When | Detail |
|---|---|---|
andor:widget:mount |
The badge is first seen | widgetType, widgetId, productId |
andor:widget:unmount |
The badge left the page. Also fires on document. |
Same as mount |
andor:display:change |
The badge’s state changed | Mount fields, plus previous and current |
previous and current hold discountId, kind, mode, visible
and endsAt. No event fires on first paint, and a change can arrive up
to one second late.
Examples
document.addEventListener("andor:display:change", (event) => {
const { widgetType, current, previous } = event.detail.resource;
if (widgetType === "badge" && previous?.visible && !current.visible) {
console.log("this deal just ended:", previous.discountId);
}
});Data attributes and states
| Attribute or class | On | Meaning |
|---|---|---|
.andor-badge--applied |
host | the code is already applied |
.andor-code--applied |
chip | the same, on the code chip |
hidden |
host | no deal for this variant now |
For the attributes every widget shares, like data-andor-state and
data-andor-progress, see
Data attributes and states.