# Frontend Next Cart

> Next.js cart Zustand store, add-to-cart, cart UI sheet, CartSync refresh, region conflict validation, international pricing. Use when implementing cart, add to cart, or cart drawer functionality.

- Skill: `xmuhameed/frontend-next-cart` (Agent Skill)
- Install (CLI): `npx skillmds@latest add xmuhameed/frontend-next-cart`
- Raw SKILL.md: https://api.skillmd.com/api/skills/xmuhameed/frontend-next-cart/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: xmuhameed (https://skillmd.com/u/xmuhameed)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/xmuhameed/frontend-next-cart

---


# Cart

## Stores

| Store | File | Persist |
|-------|------|---------|
| Cart data | `stores/cart.store.ts` | `{brand}-cart` |
| Cart UI | `stores/cart-ui.store.ts` | No |

## Cart Store

```typescript
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

```typescript
// 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

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