<MIqdad> fixed product filter

2 files changed, 73 insertions, 48 deletions

diff --git a/src/lib/product/components/ProductSearch.jsx b/src/lib/product/components/ProductSearch.jsx
index 850d00cc..9503d400 100644
--- a/src/lib/product/components/ProductSearch.jsx
+++ b/src/lib/product/components/ProductSearch.jsx
@@ -6,7 +6,10 @@ import { HStack, Image, Tag, TagCloseButton, TagLabel } from '@chakra-ui/react';
 import axios from 'axios';
 import _ from 'lodash';
 import { toQuery } from 'lodash-contrib';
-import { FunnelIcon, AdjustmentsHorizontalIcon } from '@heroicons/react/24/outline';
+import {
+  FunnelIcon,
+  AdjustmentsHorizontalIcon,
+} from '@heroicons/react/24/outline';
 import odooApi from '@/core/api/odooApi';
 import searchSpellApi from '@/core/api/searchSpellApi';
 import Link from '@/core/components/elements/Link/Link';
@@ -57,7 +60,8 @@ const ProductSearch = ({
     if (!router.isReady) return;
 
     const onBrandsPage = router.pathname.includes('brands');
-    const hasOrder = typeof router.query?.orderBy === 'string' && router.query.orderBy !== '';
+    const hasOrder =
+      typeof router.query?.orderBy === 'string' && router.query.orderBy !== '';
 
     if (onBrandsPage && !hasOrder && !appliedDefaultBrandOrder.current) {
       let params = {
@@ -175,7 +179,11 @@ const ProductSearch = ({
   }, [dataCategoriesProduct, dataLob]);
 
   useEffect(() => {
-    if (prefixUrl.includes('category') || prefixUrl.includes('lob') || router.asPath.includes('penawaran')) {
+    if (
+      prefixUrl.includes('category') ||
+      prefixUrl.includes('lob') ||
+      router.asPath.includes('penawaran')
+    ) {
       setQueryFinal({ ...finalQuery, q, limit, orderBy });
     } else {
       setQueryFinal({ ...query, q, limit, orderBy });
@@ -430,7 +438,9 @@ const ProductSearch = ({
         <div className='p-4 pt-0'>
           {isNotReadyStockPage && isBrand && isBrand.logo && (
             <div className='mb-3'>
-              <h1 className='mb-2 font-semibold text-h-sm'>Brand Pencarian {q}</h1>
+              <h1 className='mb-2 font-semibold text-h-sm'>
+                Brand Pencarian {q}
+              </h1>
               <Link
                 href={createSlug('/shop/brands/', isBrand.name, isBrand.id)}
                 className='inline'
@@ -462,7 +472,8 @@ const ProductSearch = ({
                 {pageCount > 1 ? (
                   <>
                     {productStart + 1}-
-                    {parseInt(productStart) + parseInt(productRows) > productFound
+                    {parseInt(productStart) + parseInt(productRows) >
+                    productFound
                       ? productFound
                       : parseInt(productStart) + parseInt(productRows)}
                     &nbsp;dari&nbsp;
@@ -474,7 +485,8 @@ const ProductSearch = ({
                 &nbsp;produk{' '}
                 {query.q && (
                   <>
-                    untuk pencarian <span className='font-semibold'>{query.q}</span>
+                    untuk pencarian{' '}
+                    <span className='font-semibold'>{query.q}</span>
                   </>
                 )}
               </>
@@ -512,7 +524,9 @@ const ProductSearch = ({
             </div>
           )}
           {!!dataLob?.length && <LobSectionCategory categories={dataLob} />}
-          {!!dataCategories?.length && <CategorySection categories={dataCategories} />}
+          {!!dataCategories?.length && (
+            <CategorySection categories={dataCategories} />
+          )}
           <div className='grid grid-cols-2 gap-3'>
             {products &&
               products.map((product) => (
@@ -561,16 +575,16 @@ const ProductSearch = ({
               </div>
             )}
 
-            <ProductFilterDesktop
-              brands={brands || []}
-              categories={categories || []}
-              prefixUrl={prefixUrl}
-              defaultBrand={defaultBrand}
-            />
-
-            <div className='h-6' />
-
-            <SideBanner query={search} />
+            <div className='fixed'>
+              <ProductFilterDesktop
+                brands={brands || []}
+                categories={categories || []}
+                prefixUrl={prefixUrl}
+                defaultBrand={defaultBrand}
+              />
+              <div className='h-6' />
+              <SideBanner query={search} />
+            </div>
           </div>
 
           <div className='w-9/12 pl-6'>
@@ -621,7 +635,7 @@ const ProductSearch = ({
                       <>
                         {productStart + 1}-
                         {parseInt(productStart) + parseInt(productRows) >
-                          productFound
+                        productFound
                           ? productFound
                           : parseInt(productStart) + parseInt(productRows)}
                         &nbsp;dari&nbsp;
@@ -697,8 +711,8 @@ const ProductSearch = ({
                       href={
                         query?.q
                           ? whatsappUrl('productSearch', {
-                            name: query.q,
-                          })
+                              name: query.q,
+                            })
                           : whatsappUrl()
                       }
                       className='text-danger-500'
@@ -783,9 +797,9 @@ const FilterChoicesComponent = ({
         </Tag>
       )}
       {brandValues?.length > 0 ||
-        categoryValues?.length > 0 ||
-        priceFrom ||
-        priceTo ? (
+      categoryValues?.length > 0 ||
+      priceFrom ||
+      priceTo ? (
         <span>
           <button
             className='btn-transparent py-2 px-5 h-[40px] text-red-700'
diff --git a/src/pages/shop/search.jsx b/src/pages/shop/search.jsx
index db3b449a..65b642af 100644
--- a/src/pages/shop/search.jsx
+++ b/src/pages/shop/search.jsx
@@ -1,39 +1,50 @@
-import dynamic from 'next/dynamic'
-import { useRouter } from 'next/router'
-import _ from 'lodash-contrib'
-import Seo from '@/core/components/Seo'
-import { Breadcrumb, BreadcrumbItem, BreadcrumbLink } from '@chakra-ui/react'
-import Link from 'next/link'
+import dynamic from 'next/dynamic';
+import { useRouter } from 'next/router';
+import _ from 'lodash-contrib';
+import Seo from '@/core/components/Seo';
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink } from '@chakra-ui/react';
+import Link from 'next/link';
 
-const BasicLayout = dynamic(() => import('@/core/components/layouts/BasicLayout'))
-const ProductSearch = dynamic(() => import('@/lib/product/components/ProductSearch'))
+const BasicLayout = dynamic(() =>
+  import('@/core/components/layouts/BasicLayout')
+);
+const ProductSearch = dynamic(() =>
+  import('@/lib/product/components/ProductSearch')
+);
 
 export default function Search() {
-  const router = useRouter()
+  const router = useRouter();
 
   return (
     <BasicLayout>
       <Seo title={`Cari produk ${router.query.q || ''} di Indoteknik.com`} />
 
-      <div className='container mx-auto py-4 md:py-6'>
+      <div className='container mx-auto py-4 md:py-6 mb-3'>
         {router.query?.q && (
-          <Breadcrumb>
-            <BreadcrumbItem>
-              <BreadcrumbLink as={Link} href='/' className='!text-danger-500 whitespace-nowrap'>
-                Home
-              </BreadcrumbLink>
-            </BreadcrumbItem>
+          <div className='fixed'>
+            <Breadcrumb>
+              <BreadcrumbItem>
+                <BreadcrumbLink
+                  as={Link}
+                  href='/'
+                  className='!text-danger-500 whitespace-nowrap'
+                >
+                  Home
+                </BreadcrumbLink>
+              </BreadcrumbItem>
 
-            <BreadcrumbItem isCurrentPage>
-              <BreadcrumbLink className='whitespace-nowrap'>
-                Cari: {router.query.q || ''}
-              </BreadcrumbLink>
-            </BreadcrumbItem>
-          </Breadcrumb>
+              <BreadcrumbItem isCurrentPage>
+                <BreadcrumbLink className='whitespace-nowrap'>
+                  Cari: {router.query.q || ''}
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+            </Breadcrumb>
+          </div>
         )}
       </div>
-
-      {!_.isEmpty(router.query) && <ProductSearch query={router.query} prefixUrl='/shop/search' />}
+      {!_.isEmpty(router.query) && (
+        <ProductSearch query={router.query} prefixUrl='/shop/search' />
+      )}
     </BasicLayout>
-  )
+  );
 }