Skip to main content

AttributeValuePresentation

Overview​

Attribute value presentation is a discriminated union of possible ways a variation attribute value can be presented.

This enables providing the correct data needed to render the attribute value selection UI. You need an image url to render an image swatch button, but a color hex code for rendering swatch buttons.

type AttributeValuePresentation =  
     ButtonPresentationAttributeValue
   | SwatchPresentationAttributeValue
   | DropdownPresentationAttributeValue
   | ImageSwatchPresentationAttributeValue

ButtonPresentationAttributeValue​

Attributes​

type​

type: literal = 'button'


displayValue​

type: string


Readable string value of this attribute value

Example value(s): "Large", "Red"

SwatchPresentationAttributeValue​

Attributes​

type​

type: literal = 'swatch'

color​

type: string


CSS color value swatch

Example value(s): "#FFFF00"

displayValue​

type: string


Readable string value of this attribute value

Example value(s): "Large", "Red"

Attributes​

type​

type: literal = 'dropdown'


displayValue​

type: string


Readable string value of this attribute value

Example value(s): "Large", "Red"

ImageSwatchPresentationAttributeValue​

Attributes​

type​

type: literal = 'imageSwatch'

imageUrl​

type: string


Full image url of background image url for the swatch

Example value(s): "https://placehold.co/600x400"

displayValue​

type: string


Readable string value of this attribute value

Example value(s): "Large", "Red"