MiniCart

Description

A mini cart widget that displays a cart icon with item count and a dropdown showing cart contents. Auto-opens when items are added. Supports custom icon and dropdown components.

Import

import { MiniCart } from '@components/frontStore/cart/MiniCart';

Usage

import { MiniCart } from '@components/frontStore/cart/MiniCart';

function Header() {
  return (
    <header>
      <MiniCart cartUrl="/cart" />
    </header>
  );
}

Props

Name	Type	Required	Default	Description
cartUrl	string	No	'/cart'	URL to full cart page
dropdownPosition	'left' | 'right'	No	'right'	Dropdown alignment
showItemCount	boolean	No	true	Show item count badge
CartIconComponent	React.FC	No	-	Custom icon component
CartDropdownComponent	React.FC	No	-	Custom dropdown component
className	string	No	''	Additional CSS classes
disabled	boolean	No	false	Disable cart interaction

Examples

Basic Usage

import { MiniCart } from '@components/frontStore/cart/MiniCart';

function SiteHeader() {
  return (
    <header className="site-header">
      <div className="logo">My Store</div>
      <nav>...</nav>
      <MiniCart />
    </header>
  );
}

Custom Position

import { MiniCart } from '@components/frontStore/cart/MiniCart';

function Header() {
  return (
    <div className="header">
      <MiniCart 
        dropdownPosition="left"
        cartUrl="/checkout/cart"
      />
    </div>
  );
}

Without Item Count

import { MiniCart } from '@components/frontStore/cart/MiniCart';

function Navigation() {
  return (
    <nav>
      <MiniCart showItemCount={false} />
    </nav>
  );
}

Custom Icon Component

import { MiniCart } from '@components/frontStore/cart/MiniCart';

function CustomIcon({ totalQty, onClick, isOpen, disabled }) {
  return (
    <button 
      onClick={onClick}
      disabled={disabled}
      className={`custom-cart-icon ${isOpen ? 'active' : ''}`}
    >
      <ShoppingBagIcon />
      {totalQty > 0 && (
        <span className="badge">{totalQty}</span>
      )}
    </button>
  );
}

function Header() {
  return (
    <MiniCart CartIconComponent={CustomIcon} />
  );
}

Custom Dropdown Component

import { MiniCart } from '@components/frontStore/cart/MiniCart';

function CustomDropdown({ cart, onClose, cartUrl }) {
  if (!cart?.items?.length) {
    return (
      <div className="empty-cart">
        <p>Your cart is empty</p>
      </div>
    );
  }

  return (
    <div className="custom-dropdown">
      <h3>Cart Items</h3>
      {cart.items.map(item => (
        <div key={item.cartItemId}>
          {item.productName} - {item.qty}
        </div>
      ))}
      <a href={cartUrl}>View Cart</a>
      <button onClick={onClose}>Close</button>
    </div>
  );
}

function Header() {
  return (
    <MiniCart CartDropdownComponent={CustomDropdown} />
  );
}

Custom Component Props

CartIconComponent Props

Name	Type	Description
totalQty	number	Total items in cart
onClick	() => void	Toggle dropdown handler
isOpen	boolean	Dropdown open state
disabled	boolean	Disabled state
showItemCount	boolean	Show count badge
syncStatus	object	Cart sync status

CartDropdownComponent Props

Name	Type	Description
cart	CartData | null	Cart data object
dropdownPosition	'left' | 'right'	Alignment position
onClose	() => void	Close dropdown handler
cartUrl	string	Full cart page URL
setIsDropdownOpen	(open: boolean) => void	Control dropdown state

Behavior

Auto-Open on Add

The dropdown automatically opens when an item is successfully added to the cart. This is triggered by the cart sync status.

Click Handling

Clicking the cart icon toggles the dropdown. When disabled, clicks are ignored.

Default Components

If no custom components are provided, uses:

• DefaultMiniCartIcon - Shopping bag icon with badge
• DefaultMiniCartDropdown - Dropdown with items list

Features

• Item Count Badge: Shows total quantity in cart
• Auto-Open: Opens when items added
• Custom Components: Replace icon or dropdown
• Position Control: Left or right alignment
• Disabled State: Prevent interaction when needed
• Sync Status: Shows loading/syncing states
• Responsive: Works on mobile and desktop

Related Components

• CartContext - Cart state management
• CartItems - Cart display component
• CartSummaryItems - Summary display
• AddToCart - Add to cart button