Product slider Tastic

Tastic name:

Product slider

Page type:

All pages

Example image:

Product Slider Tastic

Schema.json:

{
    "tasticType": "frontastic/product/product-slider",
    "name": "Product Slider",
    "icon": "menu",
    "category": "Product",
    "schema": [
        {
            "name": "Stream Selection",
            "fields": [
                {
                    "label": "title",
                    "field": "title",
                    "type": "string",
                    "default": ""
                },
                {
                    "label": "Desctiprion",
                    "field": "description",
                    "type": "string",
                    "default": ""
                },
                {
                    "label": "Stream",
                    "field": "stream",
                    "type": "stream",
                    "streamType": "product-list",
                    "default": null
                },
                {
                    "label": "# Products",
                    "field": "productCount",
                    "type": "integer",
                    "default": 5
                }
            ]
        }
    ]
}

Tastic.jsx:

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 'Molecules/ProductTeaser/useWishlistFlaggedProducts'
import ProductSlider from 'Organisms/Slider'

function ProductSliderTastic ({ data: {
    title,
    description,
    stream,
    productCount,
},
}) {
    const products = (stream || {}).items ? stream.items.slice(0, productCount) : []
    // eslint-disable-next-line no-unused-vars
    const { wishlistedProducts, wishlistId, loading } = 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)

Still need help? Contact us Contact us