/
Brief: Variant selector [Variant]

Brief: Variant selector [Variant]

Owned by Nick Harris
Last updated: Jun 23, 2022
3 min read

Component type

Variant

Document status

IN PROGRESS

Design source (in Figma)

https://www.figma.com/file/0kGNJaC3xZ66WElO5TWvX3/Chameleon-System-(Phase-2)?node-id=2340%3A49320

Author

@Nick Harris

Responsible

 

Milestone

3

 

Variant selector is not a separate component but the documentation can’t be easily consumed by the Product header component brief without significant re-writing. I’s preserved here.

 

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

Variant selector as part of Product header

Item

Type / component

Notes

Item

Type / component

Notes

1

Typography

Acts as selection label

2

Link

 

3

Retailer link

Acts as submit/CTA

Key Content  

Item 

Type 

Notes 

Label

Text

  • Could be passed from dictionary

  • Needs translation

Link

aria-label

  • Needs appropriate aria label

    • “Buy at“ Sainsburys

 

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

Key

Interaction

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 

  • Product 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 

  • Retailer links: Is this a variant of links or a separate component

Inspiration from elsewhere 

  • N/A

Examples

Detol - Drop downs used instead of links
Detol - Drop-downs used instead of links

 

Useful links

N/A