@cimplify/sdk 0.44.6 → 0.44.8

package/templates/storefront-fashion/app/products/[slug]/product-detail.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { useRouter } from "next/navigation";
 import Image from "next/image";
 import { ProductPage as SdkProductPage, useCart } from "@cimplify/sdk/react";
 import type { Product, ProductWithDetails } from "@cimplify/sdk";
@@ -23,7 +22,6 @@ export function ProductDetail({
   product: ProductWithDetails;
   related: Product[];
 }) {
-  const router = useRouter();
   const { addItem } = useCart();
 
   return (
@@ -33,7 +31,6 @@ export function ProductDetail({
         showRelated={false}
         onAddToCart={async (p, qty, options) => {
           await addItem(p, qty, options);
-          router.push("/cart");
         }}
         renderImage={({ src, alt, className }) => (
           <Image

package/templates/storefront-fashion/components/cart-drawer.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { CartDrawer as SdkCartDrawer } from "@cimplify/sdk/react";
+
+/**
+ * Side-drawer cart. Auto-opens when an item is added (via
+ * `<CartDrawerProvider>` in `providers.tsx`). The header's cart pill
+ * also calls `useCartDrawer().open()` to reveal it on click.
+ */
+export function CartDrawer() {
+  const router = useRouter();
+  return <SdkCartDrawer onCheckout={() => router.push("/checkout")} />;
+}

package/templates/storefront-fashion/components/cart-pill.tsx

@@ -1,22 +1,26 @@
 "use client";
 
-import Link from "next/link";
+import { useCartDrawer } from "@cimplify/sdk/react";
 import { useCartCount } from "@/lib/cart";
 
 /**
  * Cart pill — dynamic island. Reads the live cart count via the SDK and
- * renders a link to `/cart`. Wrap in `<Suspense fallback={<CartPillSkeleton/>}>`
- * so the cached header chrome streams without blocking on the cart fetch.
+ * opens the side cart drawer on click (instead of navigating to /cart).
+ * Wrap in `<Suspense fallback={<CartPillSkeleton/>}>` so the cached
+ * header chrome streams without blocking on the cart fetch.
  */
 export function CartPill() {
   const { count } = useCartCount();
+  const { open } = useCartDrawer();
   return (
-    <Link
-      href="/cart"
-      className="inline-flex items-center gap-1.5 px-3.5 py-2 rounded-full bg-foreground text-background text-xs font-semibold tracking-wide transition-transform hover:scale-105"
+    <button
+      type="button"
+      onClick={open}
+      aria-label={`Open cart, ${count} ${count === 1 ? "item" : "items"}`}
+      className="inline-flex items-center gap-1.5 px-3.5 py-2 rounded-full bg-foreground text-background text-xs font-semibold tracking-wide transition-transform hover:scale-105 cursor-pointer"
     >
       Cart · {count}
-    </Link>
+    </button>
   );
 }
 

package/templates/storefront-fashion/components/providers.tsx

@@ -2,7 +2,7 @@
 
 import { useMemo, type ReactNode } from "react";
 import { createCimplifyClient } from "@cimplify/sdk";
-import { CimplifyProvider } from "@cimplify/sdk/react";
+import { CimplifyProvider, CartDrawerProvider } from "@cimplify/sdk/react";
 
 /**
  * Boots the Cimplify SDK client once on the client-side and exposes it via
@@ -27,5 +27,9 @@ export function Providers({ children }: { children: ReactNode }) {
     });
   }, []);
 
-  return <CimplifyProvider client={client}>{children}</CimplifyProvider>;
+  return (
+    <CimplifyProvider client={client}>
+      <CartDrawerProvider>{children}</CartDrawerProvider>
+    </CimplifyProvider>
+  );
 }

package/templates/storefront-fashion/lib/cart.ts

@@ -1,27 +1,12 @@
 "use client";
 
-import { useEffect, useState } from "react";
-import { useCimplifyClient } from "@cimplify/sdk/react";
+import { useCart } from "@cimplify/sdk/react";
 
 /**
- * Tiny hook for the live cart-count pill in the header. Re-fetches on
- * mount and exposes a refresh callback. The SDK's `useCart` hook is
- * fine-grained but heavier — this is enough for a header badge.
+ * Reactive cart count for the header pill. Subscribes to the SDK cart
+ * state — updates immediately on add / remove / quantity change.
  */
-export function useCartCount(): { count: number; refresh: () => void } {
-  const { client } = useCimplifyClient();
-  const [count, setCount] = useState(0);
-
-  const refresh = () => {
-    void client.cart.getCount().then((r) => {
-      if (r.ok) setCount(r.value);
-    });
-  };
-
-  useEffect(() => {
-    refresh();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [client]);
-
-  return { count, refresh };
+export function useCartCount(): { count: number } {
+  const { itemCount } = useCart();
+  return { count: itemCount };
 }

package/templates/storefront-grocery/components/product-modal.tsx

@@ -73,7 +73,6 @@ export function ProductModal() {
             onAddToCart={async (p, qty, options) => {
               await addItem(p, qty, options);
               close();
-              router.push("/cart");
             }}
             renderImage={({ src, alt, className }) => (
               <Image

package/templates/storefront-grocery/lib/cart.ts

@@ -1,27 +1,12 @@
 "use client";
 
-import { useEffect, useState } from "react";
-import { useCimplifyClient } from "@cimplify/sdk/react";
+import { useCart } from "@cimplify/sdk/react";
 
 /**
- * Tiny hook for the live cart-count pill in the header. Re-fetches on
- * mount and exposes a refresh callback. The SDK's `useCart` hook is
- * fine-grained but heavier — this is enough for a header badge.
+ * Reactive cart count for the header pill. Subscribes to the SDK cart
+ * state — updates immediately on add / remove / quantity change.
  */
-export function useCartCount(): { count: number; refresh: () => void } {
-  const { client } = useCimplifyClient();
-  const [count, setCount] = useState(0);
-
-  const refresh = () => {
-    void client.cart.getCount().then((r) => {
-      if (r.ok) setCount(r.value);
-    });
-  };
-
-  useEffect(() => {
-    refresh();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [client]);
-
-  return { count, refresh };
+export function useCartCount(): { count: number } {
+  const { itemCount } = useCart();
+  return { count: itemCount };
 }

package/templates/storefront-restaurant/components/product-modal.tsx

@@ -73,7 +73,6 @@ export function ProductModal() {
             onAddToCart={async (p, qty, options) => {
               await addItem(p, qty, options);
               close();
-              router.push("/cart");
             }}
             renderImage={({ src, alt, className }) => (
               <Image

package/templates/storefront-restaurant/lib/cart.ts

@@ -1,27 +1,12 @@
 "use client";
 
-import { useEffect, useState } from "react";
-import { useCimplifyClient } from "@cimplify/sdk/react";
+import { useCart } from "@cimplify/sdk/react";
 
 /**
- * Tiny hook for the live cart-count pill in the header. Re-fetches on
- * mount and exposes a refresh callback. The SDK's `useCart` hook is
- * fine-grained but heavier — this is enough for a header badge.
+ * Reactive cart count for the header pill. Subscribes to the SDK cart
+ * state — updates immediately on add / remove / quantity change.
  */
-export function useCartCount(): { count: number; refresh: () => void } {
-  const { client } = useCimplifyClient();
-  const [count, setCount] = useState(0);
-
-  const refresh = () => {
-    void client.cart.getCount().then((r) => {
-      if (r.ok) setCount(r.value);
-    });
-  };
-
-  useEffect(() => {
-    refresh();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [client]);
-
-  return { count, refresh };
+export function useCartCount(): { count: number } {
+  const { itemCount } = useCart();
+  return { count: itemCount };
 }

package/templates/storefront-retail/app/products/[slug]/product-detail.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { useRouter } from "next/navigation";
 import Image from "next/image";
 import { ProductPage as SdkProductPage, useCart } from "@cimplify/sdk/react";
 import type { Product, ProductWithDetails } from "@cimplify/sdk";
@@ -23,7 +22,6 @@ export function ProductDetail({
   product: ProductWithDetails;
   related: Product[];
 }) {
-  const router = useRouter();
   const { addItem } = useCart();
 
   return (
@@ -33,7 +31,6 @@ export function ProductDetail({
         showRelated={false}
         onAddToCart={async (p, qty, options) => {
           await addItem(p, qty, options);
-          router.push("/cart");
         }}
         renderImage={({ src, alt, className }) => (
           <Image

package/templates/storefront-retail/lib/cart.ts

@@ -1,27 +1,12 @@
 "use client";
 
-import { useEffect, useState } from "react";
-import { useCimplifyClient } from "@cimplify/sdk/react";
+import { useCart } from "@cimplify/sdk/react";
 
 /**
- * Tiny hook for the live cart-count pill in the header. Re-fetches on
- * mount and exposes a refresh callback. The SDK's `useCart` hook is
- * fine-grained but heavier — this is enough for a header badge.
+ * Reactive cart count for the header pill. Subscribes to the SDK cart
+ * state — updates immediately on add / remove / quantity change.
  */
-export function useCartCount(): { count: number; refresh: () => void } {
-  const { client } = useCimplifyClient();
-  const [count, setCount] = useState(0);
-
-  const refresh = () => {
-    void client.cart.getCount().then((r) => {
-      if (r.ok) setCount(r.value);
-    });
-  };
-
-  useEffect(() => {
-    refresh();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [client]);
-
-  return { count, refresh };
+export function useCartCount(): { count: number } {
+  const { itemCount } = useCart();
+  return { count: itemCount };
 }

package/templates/storefront-services/components/product-modal.tsx

@@ -73,7 +73,6 @@ export function ProductModal() {
             onAddToCart={async (p, qty, options) => {
               await addItem(p, qty, options);
               close();
-              router.push("/cart");
             }}
             renderImage={({ src, alt, className }) => (
               <Image

package/templates/storefront-services/lib/cart.ts

@@ -1,27 +1,12 @@
 "use client";
 
-import { useEffect, useState } from "react";
-import { useCimplifyClient } from "@cimplify/sdk/react";
+import { useCart } from "@cimplify/sdk/react";
 
 /**
- * Tiny hook for the live cart-count pill in the header. Re-fetches on
- * mount and exposes a refresh callback. The SDK's `useCart` hook is
- * fine-grained but heavier — this is enough for a header badge.
+ * Reactive cart count for the header pill. Subscribes to the SDK cart
+ * state — updates immediately on add / remove / quantity change.
  */
-export function useCartCount(): { count: number; refresh: () => void } {
-  const { client } = useCimplifyClient();
-  const [count, setCount] = useState(0);
-
-  const refresh = () => {
-    void client.cart.getCount().then((r) => {
-      if (r.ok) setCount(r.value);
-    });
-  };
-
-  useEffect(() => {
-    refresh();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [client]);
-
-  return { count, refresh };
+export function useCartCount(): { count: number } {
+  const { itemCount } = useCart();
+  return { count: itemCount };
 }