Product details

Frontastic component name

Product details

Page type

Used on the Product Details dynamic page

Example images

Product Details Page

Added to cart

Product details pageProduct details page

Product added to cartProduct added to cart

Code samples

{
    "tasticType": "frontastic/product/product-details",
    "name": "Product details",
    "category": "Product",
    "icon": "card_giftcard",
    "schema": [
        {
            "name": "Data source selection",
            "fields": [
                {
                    "label": "Data source",
                    "field": "stream",
                    "type": "stream",
                    "streamType": "product",
                    "default": null
                }
            ]
        }
    ]
}
import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'

import productConnector from '@frontastic/catwalk/src/js/tastic/product/connector'
import tastify from '@frontastic/catwalk/src/js/helper/tastify'
import app from '@frontastic/catwalk/src/js/app/app'
import ProductDetails from '../../../patterns/organisms/Product/ProductDetails'

const ProductDetailsTastic = ({ product, wishlist }) => {
    if (!product || !wishlist.isComplete()) {
        return null
    }

    const wishlistItem = wishlist.data.lineItems.find((item) => {
        // For the time being we're using only first variant throughout the Boost theme
        return item.variant.sku === product.variants[0].sku
    })

    return (
        <>
            <ProductDetails
                product={product}
                handleAddToCart={(selectedVariant, count = 1) => {
                    return app.getLoader('cart').add(null, selectedVariant, count, null)
                }}
                handleAddToWishlist={() => {
                    app.getLoader('wishlist').add(product, product.variants[0], 1, null)
                }}
                handleRemoveFromWishlist={() => {
                    !!wishlistItem &&
                        app.getLoader('wishlist').removeLineItem(wishlist.data.wishlistId, {
                            lineItemId: wishlistItem.lineItemId,
                        })
                }}
                wishlisted={!!wishlistItem}
            />
        </>
    )
}

ProductDetailsTastic.propTypes = {
    product: PropTypes.object,
    wishlist: PropTypes.object,
}

ProductDetailsTastic.defaultProps = {}

export default tastify({ translate: true, connect: { wishlist: true } })(
    connect(productConnector)(ProductDetailsTastic)
)

Did this page help you?