For configurable products, there is a section to select the options and allow to choose one product variant.
This spec corresponds to the first version of the feature as an MVP. Future version will add more complex UI and behavior.
¶ UI Details
- This PDP version applies only for products with type
configurable. - For each configurable attribute, the UI should show a dropdown with its possible options (see image above).
Integration:- The configurable attributes are taken from the system attribute
configurableAttrs, that holds an array of attribute Ids. - The order to show the dropdowns must be the one in the array of configurable attributes.
- The configurable attributes are all of type "List". That is, only
stringattributes that hasinclusionvalidation to have a limited possible values. - The dropdowns hold all the possible options for the corresponding attributes plus an empty option at the beginning with empty code
""and title"Select an option". - The dropdowns use the "Code"s and "Title"s of the attribute options for their values and titles.
- The configurable attributes are taken from the system attribute
¶ Behavior
-
All possible values are listed in the dropdowns, no matter the existence of variants for the configurable product.
-
By default, the empty option is selected.
-
When adding to cart, all dropdowns must have a non-empty option selected.
-
The configurable cart items must include the selected options in the field
variantOptions.
Integration:- The
varianOptionsfield is an object of the form:
{ "attr Id 1": "selected attr value 1", "attr Id 2": "selected attr value 2", ... "attr Id n": "selected attr value n", }For example:
{ "00de4b03-b2d7-4597-a11f-88b9d97d9f03": "36", "f82e0ddb-f297-40e4-b4ba-b068b2f216a9": "cian", }Where
00de4b03-b2d7-4597-a11f-88b9d97d9f03andf82e0ddb-f297-40e4-b4ba-b068b2f216a9would be the attribute Ids forsizeandcolor. - The