Product slider
The Product slider component can be used on any page.
Example image
Code samples
{"tasticType": "commercetools/ui/products/slider","name": "commercetools UI product slider","icon": "menu","category": "Products","schema": [{"name": "Configuration","fields": [{"label": "Title","field": "title","type": "string","required": true},{"label": "products","field": "data","type": "dataSource","dataSourceType": "frontastic/product-list","required": true}]},{"name": "CTA","fields": [{"label": "Label","field": "ctaLabel","type": "string"},{"label": "Link","field": "ctaLink","type": "reference"}]}]}
import ProductSlider from 'components/commercetools-ui/products/slider';function ProductSliderTastic({ data }) {if (!data?.data?.dataSource?.items) return <p>No products found.</p>;return (<ProductSliderproducts={data.data.dataSource.items}title={data.title}ctaLabel={data.ctaLabel}ctaLink={data.ctaLink}/>);}export default ProductSliderTastic;
Data sources don't communicate with each other out-of-the-box so the same product could be displayed in multiple product sliders on the same page if it matches the criteria in all of them.