Product slider

The Product slider component can be used on any page.

Example image

product-slider.png

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"
}
]
}
]
}
Clipboard icon
import ProductSlider from 'components/commercetools-ui/products/slider';
function ProductSliderTastic({ data }) {
if (!data?.data?.dataSource?.items) return <p>No products found.</p>;
return (
<ProductSlider
products={data.data.dataSource.items}
title={data.title}
ctaLabel={data.ctaLabel}
ctaLink={data.ctaLink}
/>
);
}
export default ProductSliderTastic;
Clipboard icon
Warning icon

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.