summaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/core/components/elements/Appbar/Appbar.jsx24
-rw-r--r--src/core/components/elements/Navbar/NavbarDesktop.jsx33
-rw-r--r--src/core/components/elements/Navbar/NavbarMobile.jsx22
-rw-r--r--src/core/utils/cart.js2
-rw-r--r--src/pages/api/shop/search.js10
5 files changed, 79 insertions, 12 deletions
diff --git a/src/core/components/elements/Appbar/Appbar.jsx b/src/core/components/elements/Appbar/Appbar.jsx
index f1456a7c..e19d5f0a 100644
--- a/src/core/components/elements/Appbar/Appbar.jsx
+++ b/src/core/components/elements/Appbar/Appbar.jsx
@@ -1,6 +1,8 @@
import { useRouter } from 'next/router'
import Link from '../Link/Link'
import { HomeIcon, Bars3Icon, ShoppingCartIcon, ChevronLeftIcon } from '@heroicons/react/24/outline'
+import { useEffect, useState } from 'react'
+import { getCart } from '@/core/utils/cart'
/**
* The AppBar component is a navigation component used to display a header or toolbar
@@ -13,6 +15,21 @@ import { HomeIcon, Bars3Icon, ShoppingCartIcon, ChevronLeftIcon } from '@heroico
const AppBar = ({ title }) => {
const router = useRouter()
+ const [cartCount, setCartCount] = useState(0)
+
+ useEffect(() => {
+ const handleCartChange = () => {
+ setCartCount(Object.keys(getCart()).length)
+ }
+ handleCartChange()
+
+ window.addEventListener('localStorageChange', handleCartChange)
+
+ return () => {
+ window.removeEventListener('localStorageChange', handleCartChange)
+ }
+ }, [])
+
return (
<nav className='sticky top-0 z-50 bg-white border-b border-gray_r-6 flex justify-between'>
<div className='flex items-center'>
@@ -23,7 +40,12 @@ const AppBar = ({ title }) => {
</div>
<div className='flex items-center px-2'>
<Link href='/shop/cart' className='py-4 px-2'>
- <ShoppingCartIcon className='w-6 text-gray_r-12' />
+ <div className='relative'>
+ <ShoppingCartIcon className='w-6 text-gray_r-12' />
+ <span className='absolute -top-2 -right-2 badge-solid-red rounded-full w-5 h-5 flex items-center justify-center'>
+ {cartCount}
+ </span>
+ </div>
</Link>
<Link href='/' className='py-4 px-2'>
<HomeIcon className='w-6 text-gray_r-12' />
diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx
index fcb54802..837d436c 100644
--- a/src/core/components/elements/Navbar/NavbarDesktop.jsx
+++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx
@@ -10,9 +10,10 @@ import DesktopView from '../../views/DesktopView'
import dynamic from 'next/dynamic'
import IndoteknikLogo from '@/images/logo.png'
import Category from '@/lib/category/components/Category'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
import useAuth from '@/core/hooks/useAuth'
import NavbarUserDropdown from './NavbarUserDropdown'
+import { getCart } from '@/core/utils/cart'
const Search = dynamic(() => import('./Search'))
@@ -20,6 +21,21 @@ const NavbarDesktop = () => {
const [isOpenCategory, setIsOpenCategory] = useState(false)
const auth = useAuth()
+ const [cartCount, setCartCount] = useState(0)
+
+ useEffect(() => {
+ const handleCartChange = () => {
+ setCartCount(Object.keys(getCart()).length)
+ }
+ handleCartChange()
+
+ window.addEventListener('localStorageChange', handleCartChange)
+
+ return () => {
+ window.removeEventListener('localStorageChange', handleCartChange)
+ }
+ }, [])
+
return (
<DesktopView>
<div className='py-3 bg-warning-400' id='desktop-nav-top'>
@@ -57,10 +73,17 @@ const NavbarDesktop = () => {
Quotation
</Link>
<Link href='/shop/cart' className='flex items-center gap-x-2 !text-gray_r-12/80'>
- <ShoppingCartIcon className='w-7' />
- Keranjang
- <br />
- Belanja
+ <div className='relative mr-2'>
+ <ShoppingCartIcon className='w-7' />
+ <span className='absolute -top-2 -right-2 badge-solid-red rounded-full w-5 h-5 flex items-center justify-center'>
+ {cartCount}
+ </span>
+ </div>
+ <span>
+ Keranjang
+ <br />
+ Belanja
+ </span>
</Link>
<Link href='/my/wishlist' className='flex items-center gap-x-2 !text-gray_r-12/80'>
<HeartIcon className='w-7' />
diff --git a/src/core/components/elements/Navbar/NavbarMobile.jsx b/src/core/components/elements/Navbar/NavbarMobile.jsx
index 24ff3a51..0502dba5 100644
--- a/src/core/components/elements/Navbar/NavbarMobile.jsx
+++ b/src/core/components/elements/Navbar/NavbarMobile.jsx
@@ -5,12 +5,29 @@ import { Bars3Icon, HeartIcon, ShoppingCartIcon } from '@heroicons/react/24/outl
import useSidebar from '@/core/hooks/useSidebar'
import dynamic from 'next/dynamic'
import IndoteknikLogo from '@/images/logo.png'
+import { useEffect, useState } from 'react'
+import { getCart } from '@/core/utils/cart'
const Search = dynamic(() => import('./Search'))
const NavbarMobile = () => {
const { Sidebar, open } = useSidebar()
+ const [cartCount, setCartCount] = useState(0)
+
+ useEffect(() => {
+ const handleCartChange = () => {
+ setCartCount(Object.keys(getCart()).length)
+ }
+ handleCartChange()
+
+ window.addEventListener('localStorageChange', handleCartChange)
+
+ return () => {
+ window.removeEventListener('localStorageChange', handleCartChange)
+ }
+ }, [])
+
return (
<MobileView>
<nav className='px-4 py-2 pb-3 sticky top-0 z-50 bg-white shadow'>
@@ -22,8 +39,11 @@ const NavbarMobile = () => {
<Link href='/my/wishlist'>
<HeartIcon className='w-6 text-gray_r-12' />
</Link>
- <Link href='/shop/cart'>
+ <Link href='/shop/cart' className='relative'>
<ShoppingCartIcon className='w-6 text-gray_r-12' />
+ <span className='absolute -top-2 -right-2 badge-solid-red rounded-full w-5 h-5 flex items-center justify-center'>
+ {cartCount}
+ </span>
</Link>
<button type='button' onClick={open}>
<Bars3Icon className='w-6 text-gray_r-12' />
diff --git a/src/core/utils/cart.js b/src/core/utils/cart.js
index 2bdffb1c..d987cda7 100644
--- a/src/core/utils/cart.js
+++ b/src/core/utils/cart.js
@@ -19,7 +19,9 @@ const getCart = () => {
*/
const setCart = (cart) => {
if (typeof window !== 'undefined' && window.localStorage) {
+ const storageChangeEvent = new Event('localStorageChange')
localStorage.setItem('cart', JSON.stringify(cart))
+ window.dispatchEvent(storageChangeEvent)
return true
}
return false
diff --git a/src/pages/api/shop/search.js b/src/pages/api/shop/search.js
index bab96237..19b9655a 100644
--- a/src/pages/api/shop/search.js
+++ b/src/pages/api/shop/search.js
@@ -15,19 +15,19 @@ export default async function handler(req, res) {
limit = 30
} = req.query
- let paramOrderBy = 'product_rating_f DESC'
+ let paramOrderBy = ''
switch (orderBy) {
case 'price-asc':
- paramOrderBy += ', price_discount_f ASC'
+ paramOrderBy += 'price_discount_f ASC'
break
case 'price-desc':
- paramOrderBy += ', price_discount_f DESC'
+ paramOrderBy += 'price_discount_f DESC'
break
case 'popular':
- paramOrderBy += ', search_rank_i DESC'
+ paramOrderBy += 'search_rank_i DESC'
break
case 'stock':
- paramOrderBy += ', stock_total_f DESC'
+ paramOrderBy += 'stock_total_f DESC'
break
}
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 04:10:14 +0000