From 4e634a9d3556e94c7ce0729ef9f15b73495b2e28 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Wed, 15 Mar 2023 14:52:16 +0700 Subject: product detail desktop --- .../components/Skeleton/PopularProductSkeleton.jsx | 23 +++- src/lib/product/api/productSimilarApi.js | 2 +- src/lib/product/components/ProductDesktop.jsx | 123 ++++++++++++++++++--- src/lib/product/components/ProductMobile.jsx | 18 +-- 4 files changed, 134 insertions(+), 32 deletions(-) (limited to 'src/lib') diff --git a/src/lib/home/components/Skeleton/PopularProductSkeleton.jsx b/src/lib/home/components/Skeleton/PopularProductSkeleton.jsx index 18a1b3d3..29fda966 100644 --- a/src/lib/home/components/Skeleton/PopularProductSkeleton.jsx +++ b/src/lib/home/components/Skeleton/PopularProductSkeleton.jsx @@ -1,10 +1,25 @@ import ProductCardSkeleton from '@/core/components/elements/Skeleton/ProductCardSkeleton' +import DesktopView from '@/core/components/views/DesktopView' +import MobileView from '@/core/components/views/MobileView' const PopularProductSkeleton = () => ( -
- - -
+ <> + +
+ + +
+ + +
+ + + + + +
+ + ) export default PopularProductSkeleton diff --git a/src/lib/product/api/productSimilarApi.js b/src/lib/product/api/productSimilarApi.js index 8fd17ab9..93c7f22c 100644 --- a/src/lib/product/api/productSimilarApi.js +++ b/src/lib/product/api/productSimilarApi.js @@ -2,7 +2,7 @@ import axios from 'axios' const productSimilarApi = async ({ query }) => { const dataProductSimilar = await axios( - `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/search?q=${query}&page=1&orderBy=popular` + `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/search?q=${query}&page=1&orderBy=popular&operation=OR` ) return dataProductSimilar.data.response } diff --git a/src/lib/product/components/ProductDesktop.jsx b/src/lib/product/components/ProductDesktop.jsx index dc733eac..6eba2aed 100644 --- a/src/lib/product/components/ProductDesktop.jsx +++ b/src/lib/product/components/ProductDesktop.jsx @@ -3,14 +3,17 @@ import Link from '@/core/components/elements/Link/Link' import DesktopView from '@/core/components/views/DesktopView' import currencyFormat from '@/core/utils/currencyFormat' import { HeartIcon } from '@heroicons/react/24/outline' -import { useEffect, useState } from 'react' +import { Fragment, useEffect, useRef, useState } from 'react' +import LazyLoad from 'react-lazy-load' +import ProductSimilar from './ProductSimilar' const ProductDesktop = ({ product, wishlist, toggleWishlist }) => { const [variantQuantity, setVariantQuantity] = useState(null) + const [informationTab, setInformationTab] = useState(informationTabOptions[0].value) useEffect(() => { const mapVariantQuantity = product.variants.reduce((acc, cur) => { - acc[cur.id] = 1 + acc[cur.id] = '1' return acc }, {}) setVariantQuantity(mapVariantQuantity) @@ -20,6 +23,23 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => { setVariantQuantity((variantQuantity) => ({ ...variantQuantity, [variantId]: quantity })) } + const variantSectionRef = useRef(null) + const goToVariantSection = () => { + if (variantSectionRef.current) { + const position = variantSectionRef.current.getBoundingClientRect() + window.scrollTo({ + top: position.top - 120 + window.pageYOffset, + behavior: 'smooth' + }) + } + } + + const productSimilarQuery = [ + product?.name.replace(/[()/"&]/g, ''), + `fq=-product_id:${product.id}`, + `fq=-manufacture_id:${product.manufacture?.id || 0}` + ].join('&') + return (
@@ -32,18 +52,18 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => { />
-

{product?.name}

-
-
-
Nomor SKU
+

{product?.name}

+
+
+
Nomor SKU
SKU-{product.id}
-
-
Part Number
+
+
Part Number
{product.code || '-'}
-
-
Manufacture
+
+
Manufacture
{product.manufacture?.name ? ( {product.manufacture?.name} @@ -52,8 +72,8 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => { )}
-
-
Berat Barang
+
+
Berat Barang
{product?.weight > 0 && {product?.weight} KG} {product?.weight == 0 && ( @@ -65,6 +85,7 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
+
{product.variants.length > 1 && product.lowestPrice.priceDiscount > 0 && (
Harga mulai dari:
@@ -79,7 +100,7 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
)} -

+

{product?.lowestPrice.priceDiscount > 0 ? ( currencyFormat(product?.lowestPrice.priceDiscount) ) : ( @@ -91,7 +112,11 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => { )}

- @@ -108,13 +133,13 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
-
+
Varian Produk
- + @@ -137,8 +162,8 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => { @@ -152,9 +177,71 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
No. SKUPart Number Harga Jumlah Action changeQuantity(variant.id, e.target.value)} />
+ +
+
Informasi Produk
+
+
+ {informationTabOptions.map((option) => ( + setInformationTab(option.value)} + > + {option.label} + + ))} +
+
+ +
+ +
+ + + Belum ada informasi. +
+
+ +
+
Kamu Mungkin Juga Suka
+ + + +
) } +const informationTabOptions = [ + { value: 'description', label: 'Deskripsi' }, + { value: 'information', label: 'Info Penting' } +] + +const TabButton = ({ children, active, ...props }) => { + const activeClassName = active + ? 'text-red_r-11 underline underline-offset-4' + : 'text-gray_r-12/80' + return ( + + ) +} + +const TabContent = ({ children, active, className, ...props }) => ( +
+ {children} +
+) + export default ProductDesktop diff --git a/src/lib/product/components/ProductMobile.jsx b/src/lib/product/components/ProductMobile.jsx index 790fcd57..07da876e 100644 --- a/src/lib/product/components/ProductMobile.jsx +++ b/src/lib/product/components/ProductMobile.jsx @@ -17,7 +17,7 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => { const [quantity, setQuantity] = useState('1') const [selectedVariant, setSelectedVariant] = useState(null) - const [informationTab, setInformationTab] = useState(null) + const [informationTab, setInformationTab] = useState(informationTabOptions[0].value) const [activeVariant, setActiveVariant] = useState({ id: product.id, @@ -58,12 +58,6 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => { } }, [selectedVariant, product]) - useEffect(() => { - if (!informationTab) { - setInformationTab(informationTabOptions[0].value) - } - }, [informationTab]) - const validAction = () => { let isValid = true if (!selectedVariant) { @@ -91,6 +85,12 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => { router.push(`/shop/checkout?productId=${activeVariant.id}&quantity=${quantity}`) } + const productSimilarQuery = [ + product?.name.replace(/[()/"&]/g, ''), + `fq=-product_id:${product.id}`, + `fq=-manufacture_id:${product.manufacture?.id || 0}` + ].join('&') + return ( {

Kamu Mungkin Juga Suka

- +
@@ -252,7 +252,7 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => { const informationTabOptions = [ { value: 'specification', label: 'Spesifikasi' }, { value: 'description', label: 'Deskripsi' }, - { value: 'important', label: 'Info Penting' } + { value: 'information', label: 'Info Penting' } ] const TabButton = ({ children, active, ...props }) => { -- cgit v1.2.3