# Service picker (`service-picker`)
Fresha-style menu rows with duration, price and a (+). A running "Your visit" total, and on phones a sticky From $X · Book bar that becomes "2 services · 1 h 45 min · $110".
| | |
|---|---|
| Tag | Showcase |
| Size | 2.9 KB gzipped own code (JS 1.5 KB + CSS 1.4 KB; 7.5 KB raw) |
| Dependency | none (vanilla + native APIs) |
| Best for | Salons, barbers, nails, med spa, massage, detailers, groomers, any BOOK business with a real price list |
| Demo | `index.html` in this folder (live: https://wbl-code-lib.pages.dev/modules/service-picker/) |
## What it does
Turns a plain price list (works without JS) into a picker: each row toggles with a 44 px (+) that becomes a check, a summary card on wide screens lists the picks with a total and time, and a bar sticks to the bottom of the picker on phones (inside the section only, so it never fights the page's own sticky bar). The Book link carries ?services=id1,id2, and a wbl:services event fires for a booking widget to pick up.
## When to use
- Top Mobbin upgrade #2: replaces the static price list in a BOOK preview.
- "from" prices (consult-based colour) via data-from: the total says "from $285".
- Hook into the builder's booking_widget by listening for wbl:services.
## Don't
- Invent prices: sample prices on a preview must be labelled as sample.
- More than ~15 rows without categories; use Menu tabs above it for long menus.
- Stack it with another sticky bottom bar on the same screen: hide the page's Book bar while the picker is in view (data-hide on Sticky book bar).
## Reduced motion, no JS, accessibility
- Every toggle is a real <button aria-pressed> with a visually hidden name and price; the total is aria-live.
- Reduced motion: no bump on the total, no icon morph.
- No JS: a clean price list (no + buttons, no bar).
## Notes
- Prices are typed as data-price numbers; display text is yours (so "$65+" or "from" stays as written).
## Relation to the effects libraries
New. Batch 3's fly-to-cart is the GSAP add-on flourish; this is the full picker without a library.
## Use it
Copy this folder to the site as `/wbl/service-picker/` (keep `vendor/` if there is one), then:
```html
```
Colours come from CSS variables with safe defaults: `--wbl-accent`, `--wbl-on-accent`, `--wbl-ink`, `--wbl-paper`,
`--wbl-card`, `--wbl-line`, `--wbl-muted`, `--wbl-band`, `--wbl-radius`, `--wbl-head` (see the library README for the
one-line bridge to the preview builder's `--a / --ink / --bg …`).
## License
Our code: WBL-owned, original. No third-party code.