From 23f67959168cd0126582c44f2a5b1bfdc45b268a Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Wed, 11 Oct 2023 10:22:11 +0700 Subject: Add breadcrumb on detail product, search, brand, category page --- src/lib/brand/components/Brand.jsx | 4 +- src/lib/brand/components/Breadcrumb.jsx | 40 ++++++++++++ src/lib/category/components/Breadcrumb.jsx | 56 +++++++++++++++++ src/lib/category/components/Category.jsx | 2 +- src/lib/product/components/Product/Breadcrumb.jsx | 69 +++++++++++++++++++++ src/lib/product/components/Product/Product.jsx | 38 +++++------- .../product/components/Product/ProductDesktop.jsx | 71 +++++++++++----------- .../product/components/Product/ProductMobile.jsx | 2 + src/lib/product/components/ProductSearch.jsx | 4 +- .../promotinProgram/components/PromotionType.jsx | 2 +- 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 ++++++ 14 files changed, 267 insertions(+), 63 deletions(-) create mode 100644 src/lib/brand/components/Breadcrumb.jsx create mode 100644 src/lib/category/components/Breadcrumb.jsx create mode 100644 src/lib/product/components/Product/Breadcrumb.jsx (limited to 'src') diff --git a/src/lib/brand/components/Brand.jsx b/src/lib/brand/components/Brand.jsx index 3c411969..3985b888 100644 --- a/src/lib/brand/components/Brand.jsx +++ b/src/lib/brand/components/Brand.jsx @@ -84,7 +84,7 @@ const Brand = ({ id }) => { -
+
{brand.isLoading && } {brand.data?.banners?.length == 0 && ( @@ -117,6 +117,7 @@ const Brand = ({ id }) => { ))} +
Produk dari brand:
{brand?.data?.logo && ( @@ -137,7 +138,6 @@ const Brand = ({ id }) => { )}
-
diff --git a/src/lib/brand/components/Breadcrumb.jsx b/src/lib/brand/components/Breadcrumb.jsx new file mode 100644 index 00000000..0fec2dad --- /dev/null +++ b/src/lib/brand/components/Breadcrumb.jsx @@ -0,0 +1,40 @@ +import { Breadcrumb as ChakraBreadcrumb, BreadcrumbItem, BreadcrumbLink } from '@chakra-ui/react' +import Link from 'next/link' +import React from 'react' + +/** + * Renders a breadcrumb component with links to navigate through different pages. + * + * @param {Object} props - The props object containing the brand name. + * @param {string} props.brandName - The name of the brand to display in the breadcrumb. + * @return {JSX.Element} The rendered breadcrumb component. + */ +const Breadcrumb = ({ brandName }) => { + return ( +
+ + + + Home + + + + + + Brands + + + + + {brandName} + + +
+ ) +} + +export default Breadcrumb diff --git a/src/lib/category/components/Breadcrumb.jsx b/src/lib/category/components/Breadcrumb.jsx new file mode 100644 index 00000000..127904ee --- /dev/null +++ b/src/lib/category/components/Breadcrumb.jsx @@ -0,0 +1,56 @@ +import odooApi from '@/core/api/odooApi' +import { createSlug } from '@/core/utils/slug' +import { + Breadcrumb as ChakraBreadcrumb, + BreadcrumbItem, + BreadcrumbLink, + Skeleton +} from '@chakra-ui/react' +import Link from 'next/link' +import React from 'react' +import { useQuery } from 'react-query' + +/** + * Render a breadcrumb component. + * + * @param {object} categoryId - The ID of the category. + * @return {JSX.Element} The breadcrumb component. + */ +const Breadcrumb = ({ categoryId }) => { + const breadcrumbs = useQuery( + `category-breadcrumbs/${categoryId}`, + async () => await odooApi('GET', `/api/v1/category/${categoryId}/category-breadcrumb`) + ) + + return ( +
+ + + + + Home + + + + {breadcrumbs.data?.map((category, index) => ( + + {index === breadcrumbs.data.length - 1 ? ( + {category.name} + ) : ( + + {category.name} + + )} + + ))} + + +
+ ) +} + +export default Breadcrumb diff --git a/src/lib/category/components/Category.jsx b/src/lib/category/components/Category.jsx index af696d42..e6ea5acf 100644 --- a/src/lib/category/components/Category.jsx +++ b/src/lib/category/components/Category.jsx @@ -30,7 +30,7 @@ const Category = () => { return (
- {categories.map((category) => ( + {categories?.map((category) => (
{ + const categories = useQuery( + `detail/categories/${productId}`, + async () => await odooApi('GET', `/api/v1/product/${productId}/category-breadcrumb`), + { + enabled: !!productId + } + ) + + return ( + + + + + Home + + + + {categories.data?.map((category) => ( + + + {category.name} + + + ))} + + + {productName} + + + + ) +} + +export default Breadcrumb diff --git a/src/lib/product/components/Product/Product.jsx b/src/lib/product/components/Product/Product.jsx index 54490c26..6e983c2e 100644 --- a/src/lib/product/components/Product/Product.jsx +++ b/src/lib/product/components/Product/Product.jsx @@ -36,29 +36,21 @@ const Product = ({ product, isVariant = false }) => { } }, [product, isVariant]) - if (isVariant == true) { - return ( - <> - - - - ) - } else { - return ( - <> - - - - ) - } + return isVariant == true ? ( + <> + + + + ) : ( + <> + + + + ) } export default Product diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx index 47e98c1a..ceb0cad7 100644 --- a/src/lib/product/components/Product/ProductDesktop.jsx +++ b/src/lib/product/components/Product/ProductDesktop.jsx @@ -24,6 +24,7 @@ import ColumnsSLA from './ColumnsSLA' import { useProductCartContext } from '@/contexts/ProductCartContext' import { Box, Skeleton, Tooltip } from '@chakra-ui/react' import { Info } from 'lucide-react' +import Breadcrumb from './Breadcrumb' const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { const router = useRouter() @@ -199,47 +200,49 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { return (
+
- {product?.flashSale?.remainingTime > 0 && lowestPrice?.price.discountPercentage > 0 && ( -
-
- -
-
-
-
- - {Math.floor(product.lowestPrice.discountPercentage)}% - -
-
- - - {product?.flashSale?.tag != 'false' || product?.flashSale?.tag - ? product?.flashSale?.tag - : 'FLASH SALE'} - -
-
- + {product?.flashSale?.remainingTime > 0 && + lowestPrice?.price.discountPercentage > 0 && ( +
+
+ +
+
+
+
+ + {Math.floor(product.lowestPrice.discountPercentage)}% + +
+
+ + + {product?.flashSale?.tag != 'false' || product?.flashSale?.tag + ? product?.flashSale?.tag + : 'FLASH SALE'} + +
+
+ +
-
- )} + )} {product.name} { const router = useRouter() @@ -160,6 +161,7 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => { return ( +
{product?.flashSale?.remainingTime > 0 && activeVariant?.price.discountPercentage > 0 && (
diff --git a/src/lib/product/components/ProductSearch.jsx b/src/lib/product/components/ProductSearch.jsx index df9aa91b..f6987051 100644 --- a/src/lib/product/components/ProductSearch.jsx +++ b/src/lib/product/components/ProductSearch.jsx @@ -117,7 +117,7 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => { <> {productSearch.isLoading && } -
+

Produk

@@ -178,7 +178,7 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => { -
+
{ const programs = await getPromotionProgram({ id }) - if (programs.length > 0) { + if (programs?.length > 0) { setPromotionList(programs) setActiveTitle(programs?.[0].type.value) } 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() { ]} /> + + {!_.isEmpty(router.query) && ( import('@/core/components/layouts/AppLayout')) const CartComponent = dynamic(() => import('@/lib/cart/components/Cart')) @@ -22,6 +24,19 @@ export default function Cart() { +
+ + + + Home + + + + + Keranjang + + +
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 ( + + {!_.isEmpty(router.query) && ( )} 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() { +
+ {router.query?.q && ( + + + + Home + + + + + + Cari: {router.query.q || ''} + + + + )} +
+ {!_.isEmpty(router.query) && } ) -- cgit v1.2.3