From f1d9a308f61e67f4c896608e73ac8413f61fa8af Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Wed, 11 Oct 2023 10:22:11 +0700
Subject: Add breadcrumb on detail product, search, brand, category page

---
 src/pages/shop/brands/[slug].jsx   |  3 +++
 src/pages/shop/cart.jsx            | 15 +++++++++++++++
 src/pages/shop/category/[slug].jsx |  4 ++++
 src/pages/shop/search.jsx          | 20 ++++++++++++++++++++
 4 files changed, 42 insertions(+)

(limited to 'src/pages')

diff --git a/src/pages/shop/brands/[slug].jsx b/src/pages/shop/brands/[slug].jsx
index 88f19bc0..d75475b7 100644
--- a/src/pages/shop/brands/[slug].jsx
+++ b/src/pages/shop/brands/[slug].jsx
@@ -3,6 +3,7 @@ import { getIdFromSlug, getNameFromSlug } from '@/core/utils/slug'
 import { useRouter } from 'next/router'
 import _ from 'lodash'
 import Seo from '@/core/components/Seo'
+import Breadcrumb from '@/lib/brand/components/Breadcrumb'
 
 const BasicLayout = dynamic(() => import('@/core/components/layouts/BasicLayout'))
 const ProductSearch = dynamic(() => import('@/lib/product/components/ProductSearch'))
@@ -26,6 +27,8 @@ export default function BrandDetail() {
         ]}
       />
 
+      <Breadcrumb brandName={brandName} />
+
       <Brand id={getIdFromSlug(slug)} />
       {!_.isEmpty(router.query) && (
         <ProductSearch
diff --git a/src/pages/shop/cart.jsx b/src/pages/shop/cart.jsx
index a7f2037b..2da58c96 100644
--- a/src/pages/shop/cart.jsx
+++ b/src/pages/shop/cart.jsx
@@ -3,7 +3,9 @@ import BasicLayout from '@/core/components/layouts/BasicLayout'
 import DesktopView from '@/core/components/views/DesktopView'
 import MobileView from '@/core/components/views/MobileView'
 import IsAuth from '@/lib/auth/components/IsAuth'
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink } from '@chakra-ui/react'
 import dynamic from 'next/dynamic'
+import Link from 'next/link'
 
 const AppLayout = dynamic(() => import('@/core/components/layouts/AppLayout'))
 const CartComponent = dynamic(() => import('@/lib/cart/components/Cart'))
@@ -22,6 +24,19 @@ export default function Cart() {
 
         <DesktopView>
           <BasicLayout>
+            <div className='container mx-auto py-4 md:py-6 pb-0'>
+              <Breadcrumb>
+                <BreadcrumbItem>
+                  <BreadcrumbLink as={Link} href='/' className='!text-danger-500 whitespace-nowrap'>
+                    Home
+                  </BreadcrumbLink>
+                </BreadcrumbItem>
+
+                <BreadcrumbItem isCurrentPage>
+                  <BreadcrumbLink className='whitespace-nowrap'>Keranjang</BreadcrumbLink>
+                </BreadcrumbItem>
+              </Breadcrumb>
+            </div>
             <CartComponent />
           </BasicLayout>
         </DesktopView>
diff --git a/src/pages/shop/category/[slug].jsx b/src/pages/shop/category/[slug].jsx
index dbc17c06..e3650235 100644
--- a/src/pages/shop/category/[slug].jsx
+++ b/src/pages/shop/category/[slug].jsx
@@ -3,6 +3,7 @@ import { getIdFromSlug, getNameFromSlug } from '@/core/utils/slug'
 import { useRouter } from 'next/router'
 import _ from 'lodash'
 import Seo from '@/core/components/Seo'
+import Breadcrumb from '@/lib/category/components/Breadcrumb'
 
 const BasicLayout = dynamic(() => import('@/core/components/layouts/BasicLayout'))
 const ProductSearch = dynamic(() => import('@/lib/product/components/ProductSearch'))
@@ -16,6 +17,7 @@ export default function CategoryDetail() {
   const query = {
     fq: `manufacture_id_i:${categoryId}`
   }
+
   return (
     <BasicLayout>
       <Seo
@@ -29,6 +31,8 @@ export default function CategoryDetail() {
         ]}
       />
 
+      <Breadcrumb categoryId={categoryId} />
+
       {!_.isEmpty(router.query) && (
         <ProductSearch query={query} prefixUrl={`/shop/category/${slug}`} />
       )}
diff --git a/src/pages/shop/search.jsx b/src/pages/shop/search.jsx
index 907465b7..db3b449a 100644
--- a/src/pages/shop/search.jsx
+++ b/src/pages/shop/search.jsx
@@ -2,6 +2,8 @@ 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'))
@@ -13,6 +15,24 @@ export default function Search() {
     <BasicLayout>
       <Seo title={`Cari produk ${router.query.q || ''} di Indoteknik.com`} />
 
+      <div className='container mx-auto py-4 md:py-6'>
+        {router.query?.q && (
+          <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>
+        )}
+      </div>
+
       {!_.isEmpty(router.query) && <ProductSearch query={router.query} prefixUrl='/shop/search' />}
     </BasicLayout>
   )
-- 
cgit v1.2.3