summaryrefslogtreecommitdiff
path: root/src/lib/product
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib/product')
-rw-r--r--src/lib/product/components/Product/ProductDesktop.jsx27
-rw-r--r--src/lib/product/components/Product/ProductMobile.jsx11
-rw-r--r--src/lib/product/components/ProductCard.jsx39
-rw-r--r--src/lib/product/components/ProductFilter.jsx6
-rw-r--r--src/lib/product/components/ProductSearch.jsx12
5 files changed, 44 insertions, 51 deletions
diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index 701750b2..a8cca416 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -25,6 +25,7 @@ import { useProductCartContext } from '@/contexts/ProductCartContext'
import { Box, Skeleton, Tooltip } from '@chakra-ui/react'
import { Info } from 'lucide-react'
import Breadcrumb from './Breadcrumb'
+import { sellingProductFormat } from '@/core/utils/formatValue'
const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
const router = useRouter()
@@ -44,21 +45,9 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
const { setRefreshCart, refreshCart } = useProductCartContext()
- const getLowestPrice = useCallback(() => {
- const prices = product.variants.map((variant) => ({
- price: variant.price,
- isFlashsale: variant.isFlashsale
- }))
- const lowest = prices.reduce((lowest, price) => {
- return price.price < lowest.price ? price : lowest
- }, prices[0])
- return lowest
- }, [product])
-
useEffect(() => {
- const lowest = getLowestPrice()
- setLowestPrice(lowest)
- }, [getLowestPrice])
+ setLowestPrice({ price: product?.lowestPrice })
+ }, [product])
useEffect(() => {
const getBackgound = async () => {
@@ -418,7 +407,7 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
</div>
</div>
- <div className='w-[25%]'>
+ <div className='w-[30%]'>
{product.variants.length > 1 && product.lowestPrice.priceDiscount > 0 && (
<div className='text-gray_r-12/80'>Harga mulai dari: </div>
)}
@@ -447,7 +436,11 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
)}
</div>
)} */}
-
+ {product?.qtySold > 0 && (
+ <div className='text-gray_r-9'>
+ {sellingProductFormat(product?.qtySold) + ' Terjual'}
+ </div>
+ )}
{lowestPrice?.isFlashsale && lowestPrice?.price.discountPercentage > 0 ? (
<>
<div className='flex gap-x-1 items-center mt-2'>
@@ -632,7 +625,7 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => {
rel='noopener noreferrer'
target='_blank'
>
- Call for price
+ Call for Inquiry
</a>
)}
</div>
diff --git a/src/lib/product/components/Product/ProductMobile.jsx b/src/lib/product/components/Product/ProductMobile.jsx
index 70ac1cbc..ef2c0002 100644
--- a/src/lib/product/components/Product/ProductMobile.jsx
+++ b/src/lib/product/components/Product/ProductMobile.jsx
@@ -21,6 +21,7 @@ import ImageNext from 'next/image'
import CountDown2 from '@/core/components/elements/CountDown/CountDown2'
import Breadcrumb from './Breadcrumb'
import useAuth from '@/core/hooks/useAuth'
+import { sellingProductFormat } from '@/core/utils/formatValue'
const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
const router = useRouter()
@@ -62,7 +63,8 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
price: getLowestPrice(),
stock: product.stockTotal,
weight: product.weight,
- hasProgram: false
+ hasProgram: false,
+ qtySold: product.qtySold
})
const variantOptions = product.variants?.map((variant) => {
@@ -105,7 +107,8 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
stock: variant.stock,
weight: variant.weight,
hasProgram: variant.hasProgram,
- isFlashsale: variant.isFlashsale
+ isFlashsale: variant.isFlashsale,
+ qtySold: variant.qtySold
}
setActiveVariant(newActiveVariant)
@@ -245,7 +248,9 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
</button>
</div>
<h1 className='leading-6 font-medium mb-3'>{activeVariant?.name}</h1>
-
+ {product?.qtySold > 0 && (
+ <div className='text-gray_r-9'>{sellingProductFormat(activeVariant?.qtySold) + ' Terjual'}</div>
+ )}
{product.variants.length > 1 &&
activeVariant.price.priceDiscount > 0 &&
!selectedVariant && (
diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx
index 3b96ac32..9500a3fd 100644
--- a/src/lib/product/components/ProductCard.jsx
+++ b/src/lib/product/components/ProductCard.jsx
@@ -1,6 +1,7 @@
import Image from '@/core/components/elements/Image/Image'
import Link from '@/core/components/elements/Link/Link'
import currencyFormat from '@/core/utils/currencyFormat'
+import { sellingProductFormat } from '@/core/utils/formatValue'
import { createSlug } from '@/core/utils/slug'
import whatsappUrl from '@/core/utils/whatsappUrl'
import ImageNext from 'next/image'
@@ -82,9 +83,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
)}
<Link
href={createSlug('/shop/product/', product?.name, product?.id)}
- className={`mb-3 !text-gray_r-12 leading-6 block ${
- simpleTitle ? 'line-clamp-2 h-12' : 'line-clamp-3 h-[64px]'
- }`}
+ className={`mb-2 !text-gray_r-12 leading-6 block line-clamp-3 h-[64px]`}
title={product?.name}
>
{product?.name}
@@ -103,7 +102,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
{product?.lowestPrice.priceDiscount > 0 ? (
currencyFormat(product?.lowestPrice.priceDiscount)
) : (
- <a href={callForPriceWhatsapp}>Call for price</a>
+ <a href={callForPriceWhatsapp}>Call for Inquiry</a>
)}
</div>
</>
@@ -118,17 +117,16 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
</div>
</>
) : (
- <a href={callForPriceWhatsapp}>Call for price</a>
+ <a href={callForPriceWhatsapp}>Call for Inquiry</a>
)}
</div>
)}
- {product?.stockTotal > 0 && (
- <div className='flex gap-x-1'>
- <div className='badge-solid-red'>Ready Stock</div>
- <div className='badge-gray'>{product?.stockTotal > 5 ? '> 5' : '< 5'}</div>
- </div>
- )}
+ <div className='flex w-full items-center gap-x-1 '>
+ {product?.stockTotal > 0 && <div className='badge-solid-red'>Ready Stock</div>}
+ {/* <div className='badge-gray'>{product?.stockTotal > 5 ? '> 5' : '< 5'}</div> */}
+ {product?.qtySold > 0 && <div className='text-gray_r-9 text-[11px]'>{sellingProductFormat(product?.qtySold) + ' Terjual'}</div>}
+ </div>
</div>
</div>
)
@@ -186,9 +184,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
)}
<Link
href={createSlug('/shop/product/', product?.name, product?.id)}
- className={`mb-3 !text-gray_r-12 leading-6 ${
- simpleTitle ? 'line-clamp-2' : 'line-clamp-3'
- }`}
+ className={`mb-3 !text-gray_r-12 leading-6 line-clamp-3`}
>
{product?.name}
</Link>
@@ -209,7 +205,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
{product?.lowestPrice?.priceDiscount > 0 ? (
currencyFormat(product?.lowestPrice?.priceDiscount)
) : (
- <a href={callForPriceWhatsapp}>Call for price</a>
+ <a href={callForPriceWhatsapp}>Call for Inquiry</a>
)}
</div>
</>
@@ -224,17 +220,16 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
</div>
</>
) : (
- <a href={callForPriceWhatsapp}>Call for price</a>
+ <a href={callForPriceWhatsapp}>Call for Inquiry</a>
)}
</div>
)}
- {product?.stockTotal > 0 && (
- <div className='flex gap-x-1'>
- <div className='badge-solid-red'>Ready Stock</div>
- <div className='badge-gray'>{product?.stockTotal > 5 ? '> 5' : '< 5'}</div>
- </div>
- )}
+ <div className='flex w-full items-center gap-x-1 '>
+ {product?.stockTotal > 0 && <div className='badge-solid-red'>Ready Stock</div>}
+ {/* <div className='badge-gray'>{product?.stockTotal > 5 ? '> 5' : '< 5'}</div> */}
+ {product?.qtySold > 0 && <div className='text-gray_r-9 text-[11px]'>{sellingProductFormat(product?.qtySold) + ' Terjual'}</div>}
+ </div>
</div>
</div>
)
diff --git a/src/lib/product/components/ProductFilter.jsx b/src/lib/product/components/ProductFilter.jsx
index 14eef0ba..d52fcb90 100644
--- a/src/lib/product/components/ProductFilter.jsx
+++ b/src/lib/product/components/ProductFilter.jsx
@@ -15,7 +15,7 @@ const orderOptions = [
const ProductFilter = ({ active, close, brands, categories, prefixUrl, defaultBrand = null }) => {
const router = useRouter()
const { query } = router
- const [order, setOrder] = useState(query?.orderBy)
+ const [order, setOrder] = useState(query?.orderBy || 'popular')
const [brand, setBrand] = useState(query?.brand)
const [category, setCategory] = useState(query?.category)
const [priceFrom, setPriceFrom] = useState(query?.priceFrom)
@@ -184,7 +184,7 @@ const ProductFilter = ({ active, close, brands, categories, prefixUrl, defaultBr
))}
</div>
</div>
- <div>
+ {/* <div>
<label>Ketersedian Stok</label>
<div className='mt-2'>
<Checkbox
@@ -196,7 +196,7 @@ const ProductFilter = ({ active, close, brands, categories, prefixUrl, defaultBr
Ketersedian Stok
</Checkbox>
</div>
- </div>
+ </div> */}
<button type='button' className='btn-solid-red w-full mt-2' onClick={handleSubmit}>
Terapkan Filter
</button>
diff --git a/src/lib/product/components/ProductSearch.jsx b/src/lib/product/components/ProductSearch.jsx
index fd75d587..9d59b305 100644
--- a/src/lib/product/components/ProductSearch.jsx
+++ b/src/lib/product/components/ProductSearch.jsx
@@ -23,8 +23,9 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
const { page = 1 } = query
const [q, setQ] = useState(query?.q || '*')
const [limit, setLimit] = useState(query?.limit || 30)
+ const [orderBy, setOrderBy] = useState(router.query?.orderBy || 'popular')
if (defaultBrand) query.brand = defaultBrand.toLowerCase()
- const { productSearch } = useProductSearch({ query: { ...query, q, limit } })
+ const { productSearch } = useProductSearch({ query: { ...query, q, limit, orderBy } })
const [products, setProducts] = useState(null)
const [spellings, setSpellings] = useState(null)
const [bannerPromotionHeader, setBannerPromotionHeader] = useState(null)
@@ -70,11 +71,11 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
const brands = []
for (
let i = 0;
- i < productSearch.data?.facetCounts?.facetFields?.manufactureName.length;
+ i < productSearch.data?.facetCounts?.facetFields?.manufactureNameS.length;
i += 2
) {
- const brand = productSearch.data?.facetCounts?.facetFields?.manufactureName[i]
- const qty = productSearch.data?.facetCounts?.facetFields?.manufactureName[i + 1]
+ const brand = productSearch.data?.facetCounts?.facetFields?.manufactureNameS[i]
+ const qty = productSearch.data?.facetCounts?.facetFields?.manufactureNameS[i + 1]
if (qty > 0) {
brands.push({ brand, qty })
}
@@ -303,10 +304,9 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
<select
name='urutan'
className='form-input mt-2'
- value={router.query?.orderBy || ''}
+ value={orderBy}
onChange={(e) => handleOrderBy(e)}
>
- <option value=''>Urutkan</option>
{orderOptions.map((option, index) => (
<option key={index} value={option.value}>
{' '}
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 04:42:33 +0000