diff options
| author | HATEC\SPVDEV001 <tri.susilo@altama.co.id> | 2023-10-20 14:02:51 +0700 |
|---|---|---|
| committer | HATEC\SPVDEV001 <tri.susilo@altama.co.id> | 2023-10-20 14:02:51 +0700 |
| commit | 85e0a7e47db518fb5fb2531b2ea7c6d50408875f (patch) | |
| tree | 23bf01bc04e59bcada89e8fc4a908477ac09049c | |
| parent | 40c30c5ea9a61ce39e6faf72504a141afa2d1505 (diff) | |
logo brand di page brand
| -rw-r--r-- | src/lib/brand/components/Brand.jsx | 24 | ||||
| -rw-r--r-- | src/lib/product/components/ProductSearch.jsx | 41 | ||||
| -rw-r--r-- | src/pages/shop/brands/[slug].jsx | 6 |
3 files changed, 30 insertions, 41 deletions
diff --git a/src/lib/brand/components/Brand.jsx b/src/lib/brand/components/Brand.jsx index 4afbcb3e..78a9d5bd 100644 --- a/src/lib/brand/components/Brand.jsx +++ b/src/lib/brand/components/Brand.jsx @@ -20,8 +20,8 @@ const swiperBanner = { modules: [Pagination, Autoplay] } -const Brand = ({ id }) => { - const { brand } = useBrand({ id }) +const Brand = ({ brand }) => { + // const { brand } = useBrand({ id }) return ( <> @@ -91,7 +91,7 @@ const Brand = ({ id }) => { </MobileView> <DesktopView> - <div className='container mx-auto'> + <div className='container mx-auto mb-10'> <Skeleton isLoaded={!brand.isLoading} aspectRatio='4/1' @@ -131,23 +131,7 @@ const Brand = ({ id }) => { ))} </Swiper> - <div className='p-4'> - <div className='text-caption-1 text-gray_r-11 mb-2'>Produk dari brand:</div> - {brand?.data?.logo && ( - <Image - src={brand?.data?.logo} - alt={brand?.data?.name} - className='w-32 p-2 border borde-gray_r-6 rounded' - width={1024} - height={512} - /> - )} - {!brand?.data?.logo && ( - <div className='bg-danger-500 text-white text-center text-body-1 py-2 px-4 rounded w-fit'> - {brand?.data?.name} - </div> - )} - </div> + </> )} </Skeleton> diff --git a/src/lib/product/components/ProductSearch.jsx b/src/lib/product/components/ProductSearch.jsx index a4e3d872..630e3a74 100644 --- a/src/lib/product/components/ProductSearch.jsx +++ b/src/lib/product/components/ProductSearch.jsx @@ -19,14 +19,17 @@ import { HStack, Image, Tag, TagCloseButton, TagLabel } from '@chakra-ui/react' import odooApi from '@/core/api/odooApi' import { formatCurrency } from '@/core/utils/formatValue' -const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => { +const ProductSearch = ({ query, prefixUrl, defaultBrand = null, brand = null }) => { const router = useRouter() 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, orderBy } , operation : router?.pathname?.includes('brands') ? 'OR' : 'AND' }) + const { productSearch } = useProductSearch({ + query: { ...query, q, limit, orderBy }, + operation: router?.pathname?.includes('brands') ? 'OR' : 'AND' + }) const [products, setProducts] = useState(null) const [spellings, setSpellings] = useState(null) const [bannerPromotionHeader, setBannerPromotionHeader] = useState(null) @@ -34,7 +37,7 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => { const popup = useActive() const numRows = [30, 50, 80, 100] const [brandValues, setBrand] = useState( - !router.pathname.includes('brands') ? query.brand ? query.brand.split(',') : [] : [] + !router.pathname.includes('brands') ? (query.brand ? query.brand.split(',') : []) : [] ) const [categoryValues, setCategory] = useState(query?.category?.split(',') || []) const [priceFrom, setPriceFrom] = useState(query?.priceFrom || null) @@ -87,15 +90,6 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => { brands.push({ brand, qty }) } } - /*const brandsList = productSearch.data?.facetCounts?.facetFields?.manufactureName?.filter( - (value, index) => { - if (index % 2 === 0) { - const brand = value - const qty = index + 1 - brands.push({ brand, qty }) - } - } - )*/ const categories = [] for (let i = 0; i < productSearch.data?.facetCounts?.facetFields?.categoryName.length; i += 2) { @@ -106,14 +100,6 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => { } } - /*const categories = productSearch.data?.facetCounts?.facetFields?.categoryName?.filter( - (value, index) => { - if (index % 2 === 0) { - return true - } - } - )*/ - const orderOptions = [ { value: 'price-asc', label: 'Harga Terendah' }, { value: 'price-desc', label: 'Harga Tertinggi' }, @@ -309,6 +295,21 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => { <DesktopView> <div className='container mx-auto flex mb-3'> <div className='w-3/12'> + <div className='p-4'> + <div className='text-caption-1 text-gray_r-11 mb-2'>Produk dari brand:</div> + {brand?.data?.logo && ( + <Image + src={brand?.data?.logo} + alt={brand?.data?.name} + className='w-32 p-2 border borde-gray_r-6 rounded' + /> + )} + {!brand?.data?.logo && ( + <div className='bg-danger-500 text-white text-center text-body-1 py-2 px-4 rounded w-fit'> + {brand?.data?.name} + </div> + )} + </div> <ProductFilterDesktop brands={brands || []} categories={categories || []} diff --git a/src/pages/shop/brands/[slug].jsx b/src/pages/shop/brands/[slug].jsx index d75475b7..c3a7299f 100644 --- a/src/pages/shop/brands/[slug].jsx +++ b/src/pages/shop/brands/[slug].jsx @@ -4,6 +4,7 @@ import { useRouter } from 'next/router' import _ from 'lodash' import Seo from '@/core/components/Seo' import Breadcrumb from '@/lib/brand/components/Breadcrumb' +import useBrand from '@/lib/brand/hooks/useBrand' const BasicLayout = dynamic(() => import('@/core/components/layouts/BasicLayout')) const ProductSearch = dynamic(() => import('@/lib/product/components/ProductSearch')) @@ -14,6 +15,8 @@ export default function BrandDetail() { const { slug = '' } = router.query const brandName = getNameFromSlug(slug) + const id = getIdFromSlug(slug) + const {brand} = useBrand({id}) return ( <BasicLayout> <Seo @@ -29,12 +32,13 @@ export default function BrandDetail() { <Breadcrumb brandName={brandName} /> - <Brand id={getIdFromSlug(slug)} /> + <Brand brand={brand} /> {!_.isEmpty(router.query) && ( <ProductSearch query={_.omit(router.query, 'slug')} prefixUrl={`/shop/brands/${slug}`} defaultBrand={getNameFromSlug(slug)} + brand={brand} /> )} </BasicLayout> |
