create-brainerce-store 1.8.0 → 1.9.0

package/dist/index.js

@@ -31,7 +31,7 @@ var require_package = __commonJS({
   "package.json"(exports2, module2) {
     module2.exports = {
       name: "create-brainerce-store",
-      version: "1.8.0",
+      version: "1.9.0",
       description: "Scaffold a production-ready e-commerce storefront connected to Brainerce",
       bin: {
         "create-brainerce-store": "dist/index.js"

package/messages/en.json

@@ -74,7 +74,10 @@
     "addedToCart": "Added to Cart!",
     "outOfStock": "Out of Stock",
     "decreaseQuantity": "Decrease quantity",
-    "increaseQuantity": "Increase quantity"
+    "increaseQuantity": "Increase quantity",
+    "youMayAlsoLike": "You May Also Like",
+    "similarProducts": "Similar Products",
+    "upgradeYourChoice": "Upgrade Your Choice"
   },
   "cart": {
     "pageTitle": "Shopping Cart",
@@ -83,7 +86,8 @@
     "emptySubtitle": "Looks like you haven't added anything to your cart yet.",
     "proceedToCheckout": "Proceed to Checkout",
     "orderSummary": "Order Summary",
-    "taxAtCheckout": "Calculated at checkout"
+    "taxAtCheckout": "Calculated at checkout",
+    "youMightAlsoNeed": "You Might Also Need"
   },
   "checkout": {
     "pageTitle": "Checkout",

package/messages/he.json

@@ -74,7 +74,10 @@
     "addedToCart": "נוסף לעגלה!",
     "outOfStock": "אזל מהמלאי",
     "decreaseQuantity": "הפחת כמות",
-    "increaseQuantity": "הגדל כמות"
+    "increaseQuantity": "הגדל כמות",
+    "youMayAlsoLike": "אולי גם תאהבו",
+    "similarProducts": "מוצרים דומים",
+    "upgradeYourChoice": "שדרגו את הבחירה"
   },
   "cart": {
     "pageTitle": "עגלת קניות",
@@ -83,7 +86,8 @@
     "emptySubtitle": "נראה שעדיין לא הוספת מוצרים לעגלה.",
     "proceedToCheckout": "המשך לתשלום",
     "orderSummary": "סיכום הזמנה",
-    "taxAtCheckout": "יחושב בקופה"
+    "taxAtCheckout": "יחושב בקופה",
+    "youMightAlsoNeed": "אולי גם תצטרכו"
   },
   "checkout": {
     "pageTitle": "תשלום",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-brainerce-store",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "description": "Scaffold a production-ready e-commerce storefront connected to Brainerce",
   "bin": {
     "create-brainerce-store": "dist/index.js"

package/templates/nextjs/base/src/app/cart/page.tsx

@@ -1,12 +1,16 @@
 'use client';
 
+import { useEffect, useState } from 'react';
 import Link from 'next/link';
+import type { CartRecommendationsResponse } from 'brainerce';
+import { getClient } from '@/lib/brainerce';
 import { useCart } from '@/providers/store-provider';
 import { CartItem } from '@/components/cart/cart-item';
 import { CartSummary } from '@/components/cart/cart-summary';
 import { CouponInput } from '@/components/cart/coupon-input';
 import { CartNudges } from '@/components/cart/cart-nudges';
 import { ReservationCountdown } from '@/components/cart/reservation-countdown';
+import { CartRecommendationSection } from '@/components/products/recommendation-section';
 import { LoadingSpinner } from '@/components/shared/loading-spinner';
 import { useTranslations } from '@/lib/translations';
 
@@ -14,6 +18,17 @@ export default function CartPage() {
   const { cart, cartLoading, refreshCart, itemCount } = useCart();
   const t = useTranslations('cart');
   const tc = useTranslations('common');
+  const [cartRecs, setCartRecs] = useState<CartRecommendationsResponse | null>(null);
+
+  // Load cross-sell recommendations when cart changes
+  useEffect(() => {
+    if (!cart?.id || cart.items.length === 0) {
+      setCartRecs(null);
+      return;
+    }
+    const client = getClient();
+    client.getCartRecommendations(cart.id, 4).then(setCartRecs).catch(() => {});
+  }, [cart?.id, cart?.items.length]);
 
   if (cartLoading) {
     return (
@@ -105,6 +120,15 @@ export default function CartPage() {
           </div>
         </div>
       </div>
+
+      {/* Cross-sell recommendations */}
+      {cartRecs?.recommendations && cartRecs.recommendations.length > 0 && (
+        <CartRecommendationSection
+          title={t('youMightAlsoNeed')}
+          items={cartRecs.recommendations}
+          className="mt-10"
+        />
+      )}
     </div>
   );
 }

package/templates/nextjs/base/src/app/products/[slug]/page.tsx

@@ -4,7 +4,13 @@ import { useEffect, useState, useMemo } from 'react';
 import { useParams } from 'next/navigation';
 import Image from 'next/image';
 import Link from 'next/link';
-import type { Product, ProductVariant, ProductImage, ProductMetafield } from 'brainerce';
+import type {
+  Product,
+  ProductVariant,
+  ProductImage,
+  ProductMetafield,
+  ProductRecommendationsResponse,
+} from 'brainerce';
 import { getProductPriceInfo, getDescriptionContent } from 'brainerce';
 import { getClient } from '@/lib/brainerce';
 import { useCart } from '@/providers/store-provider';
@@ -12,6 +18,7 @@ import { PriceDisplay } from '@/components/shared/price-display';
 import { LoadingSpinner } from '@/components/shared/loading-spinner';
 import { VariantSelector } from '@/components/products/variant-selector';
 import { StockBadge } from '@/components/products/stock-badge';
+import { RecommendationSection } from '@/components/products/recommendation-section';
 import { useTranslations } from '@/lib/translations';
 import { cn } from '@/lib/utils';
 
@@ -113,6 +120,9 @@ export default function ProductDetailPage() {
   const [quantity, setQuantity] = useState(1);
   const [addingToCart, setAddingToCart] = useState(false);
   const [addedMessage, setAddedMessage] = useState(false);
+  const [recommendations, setRecommendations] = useState<ProductRecommendationsResponse | null>(
+    null
+  );
 
   // Load product
   useEffect(() => {
@@ -128,6 +138,9 @@ export default function ProductDetailPage() {
         if (p.variants && p.variants.length > 0) {
           setSelectedVariant(p.variants[0]);
         }
+
+        // Load recommendations in background
+        client.getProductRecommendations(p.id).then(setRecommendations).catch(() => {});
       } catch {
         setError(t('notFound'));
       } finally {
@@ -430,6 +443,24 @@ export default function ProductDetailPage() {
           )}
         </div>
       </div>
+
+      {/* Upsells — premium alternatives (product page) */}
+      {recommendations?.upsells && recommendations.upsells.length > 0 && (
+        <RecommendationSection
+          title={t('upgradeYourChoice')}
+          items={recommendations.upsells}
+          className="mt-12"
+        />
+      )}
+
+      {/* Related products — similar items (bottom of product page) */}
+      {recommendations?.related && recommendations.related.length > 0 && (
+        <RecommendationSection
+          title={t('similarProducts')}
+          items={recommendations.related}
+          className="mt-12"
+        />
+      )}
     </div>
   );
 }

package/templates/nextjs/base/src/components/products/recommendation-section.tsx

@@ -0,0 +1,110 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import Link from 'next/link';
+import Image from 'next/image';
+import type { ProductRecommendation } from 'brainerce';
+import { PriceDisplay } from '@/components/shared/price-display';
+import { cn } from '@/lib/utils';
+
+interface RecommendationCardProps {
+  item: ProductRecommendation;
+  className?: string;
+}
+
+function RecommendationCard({ item, className }: RecommendationCardProps) {
+  const imageUrl = item.images?.[0]?.url || null;
+  const slug = item.slug || item.id;
+  const basePrice = parseFloat(item.basePrice);
+  const salePrice = item.salePrice ? parseFloat(item.salePrice) : undefined;
+  const isOnSale = salePrice != null && salePrice < basePrice;
+
+  return (
+    <Link
+      href={`/products/${slug}`}
+      className={cn(
+        'border-border bg-background group block overflow-hidden rounded-lg border transition-shadow hover:shadow-md',
+        className
+      )}
+    >
+      <div className="bg-muted relative aspect-square overflow-hidden">
+        {imageUrl ? (
+          <Image
+            src={imageUrl}
+            alt={item.name}
+            fill
+            sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 20vw"
+            className="object-cover transition-transform duration-300 group-hover:scale-105"
+          />
+        ) : (
+          <div className="text-muted-foreground absolute inset-0 flex items-center justify-center">
+            <svg className="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={1.5}
+                d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+              />
+            </svg>
+          </div>
+        )}
+      </div>
+      <div className="space-y-1.5 p-3">
+        <h3 className="text-foreground group-hover:text-primary line-clamp-2 text-sm font-medium transition-colors">
+          {item.name}
+        </h3>
+        <PriceDisplay
+          price={basePrice}
+          salePrice={isOnSale ? salePrice : undefined}
+          size="sm"
+        />
+      </div>
+    </Link>
+  );
+}
+
+interface RecommendationSectionProps {
+  title: string;
+  items: ProductRecommendation[];
+  className?: string;
+}
+
+export function RecommendationSection({ title, items, className }: RecommendationSectionProps) {
+  if (items.length === 0) return null;
+
+  return (
+    <div className={cn('', className)}>
+      <h2 className="text-foreground mb-4 text-xl font-semibold">{title}</h2>
+      <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
+        {items.map((item) => (
+          <RecommendationCard key={item.id} item={item} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+interface CartRecommendationSectionProps {
+  title: string;
+  items: ProductRecommendation[];
+  className?: string;
+}
+
+export function CartRecommendationSection({
+  title,
+  items,
+  className,
+}: CartRecommendationSectionProps) {
+  if (items.length === 0) return null;
+
+  return (
+    <div className={cn('', className)}>
+      <h2 className="text-foreground mb-4 text-lg font-semibold">{title}</h2>
+      <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
+        {items.map((item) => (
+          <RecommendationCard key={item.id} item={item} />
+        ))}
+      </div>
+    </div>
+  );
+}