Product slider

Frontastic component name

Product slider

Suggested page placement

Any page type

Example images

Code samples

824 Bytes
{
  "tasticType": "frontastic/ui/products/slider",
  "name": "Frontastic 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/frontastic-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;

🚧

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.


Did this page help you?