Frontend Next Cart

Cart

Stores

Cart Store

export const useCartStore = create<CartStore>()(
  persist((set, get) => ({
    items: [],
    addItem: (product, variation, quantity) => {
      // Dedupe by variation.id
    },
    removeItem: (variationId) => { ... },
    getTotalPrice: () => {
      // Read useConfigStore for intl shipping
    },
    refreshCart: async () => {
      // Re-fetch stale variation prices/stock
    },
  }), { name: 'diaflower-cart' })
);

Add to Cart

// components/cart/AddToCartButton.tsx
useCartStore.getState().addItem(product, variation, qty);
trackAddToCart(...);  // analytics
useCartUiStore.getState().openCartSheet();

CartSync

Null-render component in layout — useEffect(() => refreshCart(), []) on mount.

Cart UI

• Desktop: CartSheet in header
• Mobile: MobileCartDrawer
• Open via cart-ui.store after add

Region Conflict

RegionConflictValidator — if -gl locale + items without international shipping → modal to remove items or switch to -ae.

International Pricing

useProductPrice / useAugmentedCartItems — adds variation.international_shipping_costs[zoneId].price for non-local countries.

Logging

logService.log({ type: 'ADD_TO_CART', ... }) — behavioral tracking to backend.

Navigate to Checkout

import { useRouter } from '@/i18n/navigation';
router.push('/checkout');