Wishlist Count
A link to the wishlist page with how many items are saved, for the header. Like the cart's count, the number never travels in the HTML, so it is safe behind a page cache, and it takes the same size, line and colour as the cart and search icons next to it.
Its options
Props
| Prop | Type | Default | What it does |
|---|---|---|---|
| Accessible name | text | Wishlist | Read by screen readers; once the count is known it says «Wishlist: 3 items». |
| Icon | image | the built-in icon | Any SVG, from the media library or pasted as a data: URI. Its colours are replaced by the icon colour, so it follows the palette. |
| Link | text | {options.fefav.url} | The wishlist page chosen in Fancy Etch → Wishlist. Without one there is nowhere to go. |
| Hide badge when empty | on / off | on | A zero in a header is noise. The count stays in the link's accessible name either way. |
| Badge position | choice: after, before, over | after | On the icon is what a compact header wants: the link is as wide as the heart. |
| Colors → Icon | text | currentColor | |
| Colors → Badge background | text | var(--fe-woo-accent, #1f2937) | |
| Colors → Badge text | text | var(--fe-woo-accent-color, #ffffff) | |
| Size → Icon size | text | var(--fe-woo-icon-size, 1.5rem) |
Variables of its own
| Variable | Default | What it controls |
|---|---|---|
--fe-fav-size | var(--fe-woo-control-size, 2.75rem) | How big the button is — the target a finger has to hit. Reads --fe-woo-control-size. |
--fe-fav-icon-size | var(--fe-woo-icon-size, 1.5rem) | The heart. In the Count it reads --fe-woo-icon-size, shared with the cart and search icons. |
--fe-fav-stroke | var(--fe-woo-icon-stroke, 2) | How thick the heart's line is. Reads --fe-woo-icon-stroke, shared with the cart and search icons. |
--fe-fav-hover | color-mix(in srgb, var(--fe-woo-accent, #111827) 12%, transparent) | The tint behind it under the pointer — the same as the cart and search icons. |
--fe-fav-control-radius | var(--fe-woo-control-radius, 0.63rem) | The corners of that tint. |
--fe-fav-color | var(--fe-woo-color, #111827) | The heart, and its label, while nothing is saved. |
--fe-fav-badge-bg | var(--fe-woo-accent, #1f2937) | The little circle carrying the number. |
--fe-fav-badge-color | var(--fe-woo-accent-color, #ffffff) | The number itself. |
--fe-fav-badge-size | 1.25rem | How big that circle is. |
--fe-fav-gap | 0.5rem | The space between the heart and its label, or its badge. |
--fe-fav-focus-ring | var(--fe-woo-focus-ring, #2563eb) | The ring the keyboard focus draws. |