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.