Product details Tastic

Tastic name:

Product details

Page type:

Master page

Example images:

Product Details Page Added to cart
Added to cart Product added to cart

Schema.json

{
  "tasticType": "frontastic/product/product-details",
  "name": "Product Details",
  "category": "Product",
  "icon": "card_giftcard",
  "schema": [
    {
      "name": "Main Configuration",
      "fields": [
        {
          "label": "Stream",
          "field": "stream",
          "type": "stream",
          "streamType": "product",
          "default": null
        }
      ]
    }
  ]
}

Tastic.jsx

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 '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)
)

Still need help? Contact us Contact us