/
productDetailPageLayout.tsx
75 lines (63 loc) · 2.31 KB
/
productDetailPageLayout.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
import ProductPrice from 'components/elements/ProductPrice'
import ProductList from 'components/ProductList'
import {getName, getAllVariants} from 'lib/commercetools/productHelper'
import {useTranslation} from 'next-i18next'
import {useRouter} from 'next/router'
import Breadcrumb from 'components/elements/Breadcrumb'
import ProductVariants from 'components/elements/ProductVariants'
import {useEffect, useState} from 'react'
import GalleryWidget from 'components/GalleryWidget'
type ProductDetailPageProps = {
product: any
relatedProducts: any[]
}
const ProductDetailPageLayout = ({
product,
relatedProducts,
}: ProductDetailPageProps) => {
const {locale} = useRouter()
const {t} = useTranslation('common')
const [variants, setVariants] = useState<any[]>([])
const [currentVariant, setCurrentVariant] = useState<any>()
const setVariant = (variant: any) => {
setCurrentVariant(variant)
}
useEffect(() => {
if (product) {
const allVariants = getAllVariants(product)
setVariants(allVariants)
if (allVariants && allVariants.length > 0) {
setVariant(allVariants[0])
}
}
}, [product])
if (!product || !currentVariant) {
return <div>{t('product-not-found')}</div>
}
return (
<div className="px-[6.25vw] py-[3.25vw]">
<div className="mb-16 text-2xl">
<Breadcrumb product={product} locale={locale} />
</div>
<div className="mb-16 pb-8 md:grid md:grid-cols-5 lg:mx-[10vw]">
<div className="col-span-3 mr-8">
{/* <Carousel assets={getUniqueAssets(currentVariant.assets)} /> */}
<GalleryWidget productId={product.id} variant={currentVariant} />
</div>
<div className="md:col-span-2">
<div className="flex flex-row justify-between text-3xl font-medium">
{getName(product, locale)}
<ProductPrice price={currentVariant.prices[0]?.value} />
</div>
<ProductVariants variants={variants} setVariant={setVariant} />
{/* <ProductSize variant={currentVariant} /> */}
<button className="mt-6 rounded-3xl bg-orangeNew px-20 py-3 text-2xl font-medium text-white ">
Add to cart
</button>
</div>
</div>
<ProductList products={relatedProducts} onDetailPage />
</div>
)
}
export default ProductDetailPageLayout