diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/lib/product/components/ProductSearch.jsx | 52 | ||||
| -rw-r--r-- | src/pages/api/shop/brands.js | 6 |
2 files changed, 53 insertions, 5 deletions
diff --git a/src/lib/product/components/ProductSearch.jsx b/src/lib/product/components/ProductSearch.jsx index 3740d264..29bb987e 100644 --- a/src/lib/product/components/ProductSearch.jsx +++ b/src/lib/product/components/ProductSearch.jsx @@ -18,11 +18,15 @@ import whatsappUrl from '@/core/utils/whatsappUrl' import { HStack, Image, Tag, TagCloseButton, TagLabel } from '@chakra-ui/react' import odooApi from '@/core/api/odooApi' import { formatCurrency } from '@/core/utils/formatValue' +import axios from 'axios' +import Skeleton from 'react-loading-skeleton' +import { createSlug } from '@/core/utils/slug' const ProductSearch = ({ query, prefixUrl, defaultBrand = null, brand = null }) => { const router = useRouter() const { page = 1 } = query const [q, setQ] = useState(query?.q || '*') + const [search, setSearch] = useState(query?.q || '*') const [limit, setLimit] = useState(query?.limit || 30) const [orderBy, setOrderBy] = useState(router.query?.orderBy || 'popular') if (defaultBrand) query.brand = defaultBrand.toLowerCase() @@ -34,6 +38,7 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null, brand = null }) const [spellings, setSpellings] = useState(null) const [bannerPromotionHeader, setBannerPromotionHeader] = useState(null) const [bannerPromotionFooter, setBannerPromotionFooter] = useState(null) + const [isBrand, setIsBrand] = useState(null) const popup = useActive() const numRows = [30, 50, 80, 100] const [brandValues, setBrand] = useState( @@ -78,6 +83,23 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null, brand = null }) } }, [productFound, query, spellings]) + useEffect(() => { + const checkIfBrand = async () => { + const brand = await axios( + `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/brands?params=search&q=${search}` + ) + console.log('ini brand', brand) + if (brand.data.length > 0) { + setIsBrand(brand?.data[0]) + } else { + setIsBrand(null) + } + } + if (router.pathname.includes('search')) { + checkIfBrand() + } + }, [q]) + const brands = [] for ( let i = 0; @@ -148,7 +170,11 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null, brand = null }) const SpellingComponent = useMemo(() => { return ( <> - {spellings?.length > 0 ? <>Mungkin yang anda cari </> : <>Produk yang cari anda tidak ada</>} + {spellings?.length > 0 ? ( + <>Mungkin yang anda cari </> + ) : ( + <>Produk yang cari anda tidak ada</> + )} {spellings?.map((spelling, i) => ( <Link href={`/shop/search?q=${spelling}`} key={i} className='inline'> {spelling} @@ -207,6 +233,12 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null, brand = null }) <MobileView> {productSearch.isLoading && <ProductSearchSkeleton />} <div className='p-4 pt-0'> + {isBrand && isBrand.logo && ( + <div className='mb-3'> + <h1 className='mb-2 font-semibold text-h-sm'>Brand Pencarian {q}</h1> + <Image src={isBrand?.logo} alt='' className='object-cover object-center h-[60px]' /> + </div> + )} <h1 className='mb-2 font-semibold text-h-sm'>Produk</h1> <FilterChoicesComponent brandValues={brandValues} @@ -331,6 +363,18 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null, brand = null }) </div> )} + {isBrand && isBrand.logo && ( + <div className='mb-3'> + <h1 className='text-2xl mb-2 font-semibold'>Brand Pencarian {q}</h1> + <Link + href={createSlug('/shop/brands/', isBrand.name, isBrand.id)} + className='inline' + > + <Image src={isBrand?.logo} alt='' className='object-cover object-center h-24' /> + </Link> + </div> + )} + <h1 className='text-2xl mb-2 font-semibold'>Hasil Pencarian</h1> <FilterChoicesComponent brandValues={brandValues} @@ -466,14 +510,14 @@ const FilterChoicesComponent = ({ }) => ( <div className='flex items-center'> <HStack spacing={2} className='flex-wrap'> - {brandValues.map((value, index) => ( + {brandValues?.map((value, index) => ( <Tag size='lg' key={index} borderRadius='lg' variant='outline' colorScheme='gray'> <TagLabel>{value}</TagLabel> <TagCloseButton onClick={() => handleDeleteFilter('brands', value)} /> </Tag> ))} - {categoryValues.map((value, index) => ( + {categoryValues?.map((value, index) => ( <Tag size='lg' key={index} borderRadius='lg' variant='outline' colorScheme='gray'> <TagLabel>{value}</TagLabel> <TagCloseButton onClick={() => handleDeleteFilter('category', value)} /> @@ -485,7 +529,7 @@ const FilterChoicesComponent = ({ <TagCloseButton onClick={() => handleDeleteFilter('price', priceFrom)} /> </Tag> )} - {brandValues.length > 0 || categoryValues.length > 0 || priceFrom || priceTo ? ( + {brandValues?.length > 0 || categoryValues?.length > 0 || priceFrom || priceTo ? ( <span> <button className='btn-transparent py-2 px-5 h-[40px] text-red-700' diff --git a/src/pages/api/shop/brands.js b/src/pages/api/shop/brands.js index e93fe2c9..dbbfcfe3 100644 --- a/src/pages/api/shop/brands.js +++ b/src/pages/api/shop/brands.js @@ -12,6 +12,11 @@ export default async function handler(req, res) { case 'level_s': params = 'level_s:prioritas' break + case 'search': + params = `name_s:${req?.query?.q.toLowerCase()}` + sort = '' + rows = 1 + break; default: params = `name_s:${req.query.params}` } @@ -20,7 +25,6 @@ export default async function handler(req, res) { process.env.SOLR_HOST + `/solr/brands/select?q=${params}&q.op=OR&indent=true&rows=${rows}&${sort}` ) - let dataBrands = responseMap(brands.data.response.docs) res.status(200).json(dataBrands) |