...
The Variant selector is component designed to allow a customer to configure their product selection from a set of variants. For example, pack size, scent, etc.
Usage
Do
Use concise language to label options
Don’t
Use in any component other than Product header
This list may expand in the future
Over categorise product variant
Anatomy
...
Item | Type / component | Notes |
|---|---|---|
1 | Typography | Acts as selection label |
2 | Link | |
3 | Retailer link | Acts as submit/CTA |
Key Content
...
Item
...
Type
...
Notes
...
...
*Notes
...
Item | Type | Notes |
Label | Text |
|
Link | aria-label |
|
Behaviour
see Figma for variants
Progressive enhancement:
Non JS
N/A - These are links so should work without
JS
N/a
Links:
In this instance links behave like links but act as product option selection buttons.
Current product variant needs to be ‘selected’
Links will navigate to (either):
New URL
New query string
Links open in same tab
Editorial
Label may be pulled from a dictionary
Accessibility
Key | Interaction |
|---|
Aria considerations
Analytics & Data
...
Tab | Focus on link or move focus to next link |
Enter | Opens link |
Links need appropriate aria-labels.
In the case of retailer links hidden link text could be used
Analytics & Data
We need to be able to track clicks on retail links and be able to extract the product variant/SKU and the retailer name. Ideally this would be done through the dataLayer - but it might be worth considering adding as data-attributes temporarily so we could at least hook that in the MVP before the dataLayer comes.
Related/Similar Components
Future Expansion
Dropdowns
buttons etcProduct options could be presented as dropdowns
Product options could be presented as buttons and change state/selection without linking to a new page
Retailer links could be replaced with add to cart functionality
Wider Conversations that may impact this
...
Inspiration from elsewhere
XN/A
X
...
Examples
...
Useful links
N/A