Product slider

Frontastic component name

Product slider

Page type

Can be used on all pages

Example images

Code samples

{
    "tasticType": "frontastic/product/product-slider",
      "name": "Product slider",
      "icon": "menu",
      "category": "Product",
      "schema": [
        {
            "name": "Data source selection",
            "fields": [
                {
                    "label": "Title",
                    "field": "title",
                    "type": "string",
                    "default": ""
                },
                {
                    "label": "Description",
                    "field": "description",
                    "type": "string",
                    "default": ""
                },
                {
                    "label": "Data source",
                    "field": "stream",
                    "type": "stream",
                    "streamType": "product-list",
                    "default": null
                },
                {
                    "label": "Number of products",
                    "field": "productCount",
                    "type": "integer",
                    "default": 5
                }
            ]
        }
    ]
}
import React from 'react'
import PropTypes from 'prop-types'
import tastify from '@frontastic/catwalk/src/js/helper/tastify'
import app from '@frontastic/catwalk/src/js/app/app'

import useWishlistFlaggedProducts from '../../../patterns/molecules/ProductTeaser/useWishlistFlaggedProducts'
import ProductSlider from '../../../patterns/organisms/Slider'

function ProductSliderTastic ({ data: { title, description, stream, productCount } }) {
    const products = (stream || {}).items ? stream.items.slice(0, productCount) : []
    const { wishlistedProducts, wishlistId } = useWishlistFlaggedProducts(products)

    if (!stream) {
        return null
    }

    return (
        <ProductSlider
            title={title}
            description={description}
            products={wishlistedProducts}
            handleAddToWishlist={(product) => {
                app.getLoader('wishlist').add(product, product.variants[0], 1, null)
            }}
            handleRemoveFromWishlist={(product) => {
                !!wishlistId &&
                    app.getLoader('wishlist').removeLineItem(wishlistId, {
                        lineItemId: product.wishlistItemId,
                    })
            }}
        />
    )
}

ProductSliderTastic.propTypes = {
    data: PropTypes.object.isRequired,
}

export default tastify({ translate: true })(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?