Products
Functions
- restoreSortOrder(skus, products) ⇒
Array Sort products based on the original order of SKUs
Typedefs
Products ⇒ React.Element
Page Builder Products component.
This component is part of the Page Builder / PWA integration. It can be consumed without Page Builder.
Kind: global functional component
Returns: React.Element - A React component that displays a Products based on a number of skus.
| Param | Type | Description |
|---|---|---|
| props | props |
React component props |
restoreSortOrder(skus, products) ⇒ Array
Sort products based on the original order of SKUs
Kind: global function
| Param | Type |
|---|---|
| skus | Array |
| products | Array |
props
Props for Products
Kind: global typedef
Properties
| Name | Type | Description |
|---|---|---|
| classes | Object |
An object containing the class names for the Products |
| classes.root | String |
CSS class for products |
| classes.carousel | String |
CSS class for products carousel appearance |
| classes.centerMode | String |
CSS class for products carousel appearance with center mode |
| classes.centerModeSmall | String |
CSS class for products carousel appearance with center mode on small screen |
| classes.galleryItems | String |
CSS class to modify child gallery items |
| classes.error | String |
CSS class for displaying fetch errors |
| appearance | String |
Sets products appearance |
| autoplay | Boolean |
Whether the carousel should autoplay |
| autoplaySpeed | Number |
The speed at which the autoplay should move the slide on |
| infinite | Boolean |
Whether to infinitely scroll the carousel |
| arrows | Boolean |
Whether to show arrows on the slide for navigation |
| dots | Boolean |
Whether to show navigation dots at the bottom of the carousel |
| draggable | Boolean |
Enable scrollable via dragging on desktop |
| carouselMode | String |
Carousel mode |
| centerPadding | String |
Horizontal padding in centerMode |
| skus | Array |
List of SKUs to load into product list |
| textAlign | String |
Alignment of content within the products list |
| border | String |
CSS border property |
| borderColor | String |
CSS border color property |
| borderWidth | String |
CSS border width property |
| borderRadius | String |
CSS border radius property |
| marginTop | String |
CSS margin top property |
| marginRight | String |
CSS margin right property |
| marginBottom | String |
CSS margin bottom property |
| marginLeft | String |
CSS margin left property |
| paddingTop | String |
CSS padding top property |
| paddingRight | String |
CSS padding right property |
| paddingBottom | String |
CSS padding bottom property |
| paddingLeft | String |
CSS padding left property |
| cssClasses | Array |
List of CSS classes to be applied to the component |
| slidesToShow | Number |
# of slides to show at a time |
| slidesToShowSmall | Number |
# of slides to show at a time on small screen |
| slidesToShowSmallCenterMode | Number |
# of slides to show at a time on small screen in centerMode |
For implementation details View Source.