diff options
Diffstat (limited to 'src/pages/shop/product')
| -rw-r--r-- | src/pages/shop/product/[slug].jsx | 114 | ||||
| -rw-r--r-- | src/pages/shop/product/variant/[slug].jsx | 76 |
2 files changed, 45 insertions, 145 deletions
diff --git a/src/pages/shop/product/[slug].jsx b/src/pages/shop/product/[slug].jsx index d8366d3c..73e8987c 100644 --- a/src/pages/shop/product/[slug].jsx +++ b/src/pages/shop/product/[slug].jsx @@ -1,110 +1,6 @@ -import Seo from '@/core/components/Seo' -import LogoSpinner from '@/core/components/elements/Spinner/LogoSpinner' -import { getIdFromSlug } from '@/core/utils/slug' -import productApi from '@/lib/product/api/productApi' -import PageNotFound from '@/pages/404' -import dynamic from 'next/dynamic' -import { useRouter } from 'next/router' -import cookie from 'cookie' -import axios from 'axios' -import { useProductContext } from '@/contexts/ProductContext' -import { useEffect } from 'react' -import { updateItemCart } from '@/core/utils/cart' +import ProductDetailPage, { + getServerSideProps, +} from '~/pages/shop/product/[slug]'; -const BasicLayout = dynamic(() => import('@/core/components/layouts/BasicLayout')) -const Product = dynamic(() => import('@/lib/product/components/Product/Product')) - -export async function getServerSideProps(context) { - const { slug } = context.query - const cookies = context.req.headers.cookie - const cookieObj = cookies ? cookie.parse(cookies) : {} - const auth = cookieObj.auth ? JSON.parse(cookieObj.auth) : {} - const tier = auth.pricelist ? auth.pricelist : false - const authToken = auth?.token || '' - - let response = await axios( - `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/product-detail?id=` + - getIdFromSlug(slug) + - '&auth=' + - tier - ) - let product = response.data - // let productSolr = await productApi({ id: getIdFromSlug(slug), headers: { Token: authToken } }) - // let productSolr = null - if (product?.length == 1) { - product = product[0] - } else { - product = null - } - - return { - props: { product } - } -} - -export default function ProductDetail({ product }) { - const router = useRouter() - const { setProduct } = useProductContext() - - useEffect(() => { - if (product) { - setProduct(product) - } - }, [product, setProduct]) - - useEffect(() => { - const { action, variantId, qty } = router.query - const addToCart = async () => { - const data = { - productId: variantId, - quantity: qty, - selected: true, - programLineId: null, - source: action - } - console.log('data dr test', data) - await updateItemCart(data) - const redirectURL = action === 'buy' ? '/shop/checkout?source=buy' : '/shop/cart' - router.push(redirectURL) - } - - if (action && variantId && qty) { - addToCart() - } - }, [router]) - - if (!product) return <PageNotFound /> - - return ( - <BasicLayout> - <Seo - title={product?.name || '' + ' - Indoteknik.com' || ''} - description='Temukan pilihan produk B2B Industri & Alat Teknik untuk Perusahaan, UMKM & Pemerintah dengan lengkap, mudah dan transparan.' - openGraph={{ - url: process.env.NEXT_PUBLIC_SELF_HOST + router.asPath, - images: [ - { - url: product?.image, - width: 800, - height: 800, - alt: product?.name - } - ], - type: 'product' - }} - additionalMetaTags={[ - { - name: 'keywords', - content: `${product?.name}, Harga ${product?.name}, Beli ${product?.name}, Spesifikasi ${product?.name}` - } - ]} - /> - {!product && ( - <div className='container mx-auto flex justify-center pt-10'> - <LogoSpinner width={36} height={36} /> - </div> - )} - {product && <Product product={product} />} - </BasicLayout> - ) -} +export { getServerSideProps }; +export default ProductDetailPage; diff --git a/src/pages/shop/product/variant/[slug].jsx b/src/pages/shop/product/variant/[slug].jsx index 401bce82..cb335e0a 100644 --- a/src/pages/shop/product/variant/[slug].jsx +++ b/src/pages/shop/product/variant/[slug].jsx @@ -1,37 +1,41 @@ -import Seo from '@/core/components/Seo' -import LogoSpinner from '@/core/components/elements/Spinner/LogoSpinner' -import { getIdFromSlug } from '@/core/utils/slug' -import PageNotFound from '@/pages/404' -import dynamic from 'next/dynamic' -import { useRouter } from 'next/router' -import cookie from 'cookie' -import variantApi from '@/lib/product/api/variantApi' -import axios from 'axios' -import { useProductContext } from '@/contexts/ProductContext' -import { useEffect } from 'react' +import axios from 'axios'; +import cookie from 'cookie'; +import dynamic from 'next/dynamic'; +import { useRouter } from 'next/router'; +import { useEffect } from 'react'; -const BasicLayout = dynamic(() => import('@/core/components/layouts/BasicLayout')) -const Product = dynamic(() => import('@/lib/product/components/Product/Product')) +import { useProductContext } from '@/contexts/ProductContext'; +import Seo from '@/core/components/Seo'; +import LogoSpinner from '@/core/components/elements/Spinner/LogoSpinner'; +import { getIdFromSlug } from '@/core/utils/slug'; +import PageNotFound from '@/pages/404'; + +const BasicLayout = dynamic(() => + import('@/core/components/layouts/BasicLayout') +); +const Product = dynamic(() => + import('@/lib/product/components/Product/Product') +); export async function getServerSideProps(context) { - const { slug } = context.query - const cookies = context.req.headers.cookie - const cookieObj = cookies ? cookie.parse(cookies) : {} - const auth = cookieObj.auth ? JSON.parse(cookieObj.auth) : {} - const tier = auth.pricelist ? auth.pricelist : false - const authToken = auth?.token || '' + const { slug } = context.query; + const cookies = context.req.headers.cookie; + const cookieObj = cookies ? cookie.parse(cookies) : {}; + const auth = cookieObj.auth ? JSON.parse(cookieObj.auth) : {}; + const tier = auth.pricelist ? auth.pricelist : false; + const authToken = auth?.token || ''; let response = await axios( `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/variant-detail?id=` + getIdFromSlug(slug) + '&auth=' + tier - ) - let product = response.data + ); + let product = response.data; // let product = await variantApi({ id: getIdFromSlug(slug), headers: { Token: authToken } }) if (product?.length == 1) { - product = product[0] + product = product[0]; /* const regexHtmlTags = /(<([^>]+)>)/gi const regexHtmlTagsExceptP = /<\/?(?!p\b)[^>]*>/g product.description = product.description @@ -39,26 +43,26 @@ export async function getServerSideProps(context) { .replace(regexHtmlTags, ' ') .trim()*/ } else { - product = null + product = null; } return { - props: { product } - } + props: { product }, + }; } export default function ProductDetail({ product }) { - const router = useRouter() + const router = useRouter(); - const { setProduct } = useProductContext() + const { setProduct } = useProductContext(); useEffect(() => { if (product) { - setProduct(product) + setProduct(product); } - }, [product, setProduct]) + }, [product, setProduct]); - if (!product) return <PageNotFound /> + if (!product) return <PageNotFound />; return ( <BasicLayout> @@ -72,16 +76,16 @@ export default function ProductDetail({ product }) { url: product?.image, width: 800, height: 800, - alt: product?.name - } + alt: product?.name, + }, ], - type: 'product' + type: 'product', }} additionalMetaTags={[ { name: 'keywords', - content: `${product?.name}, Harga ${product?.name}, Beli ${product?.name}, Spesifikasi ${product?.name}` - } + content: `${product?.name}, Harga ${product?.name}, Beli ${product?.name}, Spesifikasi ${product?.name}`, + }, ]} /> {!product && ( @@ -91,5 +95,5 @@ export default function ProductDetail({ product }) { )} {product && <Product product={product} isVariant={true} />} </BasicLayout> - ) + ); } |