Building a Next.js 14 E-Commerce Cart with Persistent State Using Zustand

Ichchapuron-Limited — Sat, 18 Nov 2023 04:43:47 +0000

import { create } from 'zustand'
import { persist } from "zustand/middleware";

const useCartStore = create(persist((set, get) => ({
cartItems: [],
cartTotalQuantity: 0,
cartTotalAmount: 0,

ADD TO CART

addToCart: (payload) => {
const cart = get().cartItems
const cartItem = cart.find(item => item._id === payload._id)

if (cartItem) {
  const updatedCart = cart.map(item =>
    item._id === payload._id ? { ...item, cartQuantity: (item.cartQuantity) + 1 } : item
  )
  set(state => ({
    cartItems: updatedCart,
    cartTotalQuantity: state.cartTotalQuantity + 1,
    cartTotalAmount: state.cartTotalAmount + payload.price,
  }))
} else {
  const updatedCart = [...cart, { ...payload, cartQuantity: 1 }]

  set(state => ({
    cartItems: updatedCart,
    cartTotalQuantity: state.cartTotalQuantity + 1,
    cartTotalAmount: state.cartTotalAmount + payload.price,
  }))
}

REMOVE FROM CART

removeFromCart: (payload) => {
const cart = get().cartItems;
const updatedCart = cart.filter((item) => item._id !== payload._id);

set((state) => ({
  ...state,
  cartItems: updatedCart,
  cartTotalQuantity: state.cartTotalQuantity - 1,
  cartTotalAmount: state.cartTotalAmount - (payload.price * payload.cartQuantity),
}));

DECREMENT CART

decreaseCart: (payload) => {
const cart = get().cartItems;
let updatedCart = [...cart];

const itemIndex = updatedCart.findIndex((item) => item._id === payload._id);
if (updatedCart[itemIndex].cartQuantity > 1) {
  updatedCart[itemIndex].cartQuantity -= 1;
} else {
  updatedCart = updatedCart.filter((item) => item._id !== payload._id);
}

set((state) => ({
  cartItems: updatedCart,
  cartTotalQuantity: state.cartTotalQuantity - 1,
  cartTotalAmount: state.cartTotalAmount - payload.price,
}));

INCREMENT CART
incrementCart: (payload) => {
const cart = get().cartItems;
let updatedCart = [...cart];

const productIndex = updatedCart.findIndex((item) => item._id === payload._id);
if (productIndex >= 0) {
  updatedCart[productIndex] = {
    ...updatedCart[productIndex],
    cartQuantity: updatedCart[productIndex].cartQuantity + 1,
  };
} else {
  updatedCart = [...updatedCart, { ...payload, cartQuantity: 1 }];
}

set((state) => ({
  ...state,
  cartItems: updatedCart,
}));

CLEAR CART
clearCart: () => {
set({
cartItems: [],
cartTotalQuantity: 0,
cartTotalAmount: 0,
});
},
}),
{
name: 'cart'
}
));

export default useCartStore;

DEV Community: Ichchapuron-Limited

Building a Next.js 14 E-Commerce Cart with Persistent State Using Zustand