feat(ecommerce): migrate Ari Shopping to Next.js 15 headless storefront v4

2026-07-19 19:37:41 -05:00
parent 383b644929
commit f263a9cc55
76 changed files with 1607 additions and 0 deletions
@@ -0,0 +1,3 @@
+export function GET() {
+  return Response.json({ status: "ok", service: "ari-shopping-frontend", version: "4.0.0" }, { status: 200 });
+}
@@ -0,0 +1,26 @@
+import type { Metadata } from "next";
+import { CatalogClient } from "@/components/catalog/catalog-client";
+import { getProducts } from "@/lib/headless/client";
+
+export const metadata: Metadata = { title: "Catálogo", description: "Explora todos los productos de Ari Shopping." };
+
+type CatalogPageProps = {
+  searchParams: Promise<Record<string, string | string[] | undefined>>;
+};
+
+function single(value: string | string[] | undefined): string {
+  return Array.isArray(value) ? value[0] ?? "" : value ?? "";
+}
+
+export default async function CatalogPage({ searchParams }: CatalogPageProps) {
+  const params = await searchParams;
+  const products = await getProducts();
+  return (
+    <CatalogClient
+      products={products}
+      initialCategory={single(params.category) || "Todos"}
+      initialCollection={single(params.collection)}
+      initialQuery={single(params.q)}
+    />
+  );
+}
@@ -0,0 +1,20 @@
+@import "tailwindcss";
+
+@theme {
+  --color-ari-cyan: #22d3ee;
+  --color-ari-magenta: #ec4899;
+  --color-ari-yellow: #fde047;
+  --color-ari-blue: #0e7490;
+  --animate-accordion-down: accordion-down .2s ease-out;
+  --animate-accordion-up: accordion-up .2s ease-out;
+}
+
+@keyframes accordion-down { from { height: 0; } to { height: var(--radix-accordion-content-height); } }
+@keyframes accordion-up { from { height: var(--radix-accordion-content-height); } to { height: 0; } }
+
+:root { color-scheme: light; }
+* { border-color: rgb(226 232 240); }
+html { scroll-behavior: smooth; }
+body { margin: 0; background: #fff; color: #0f172a; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
+button, a { -webkit-tap-highlight-color: transparent; }
+::selection { background: #fde047; color: #0f172a; }
@@ -0,0 +1,20 @@
+import type { Metadata, Viewport } from "next";
+import "./globals.css";
+import { CartDrawer } from "@/components/cart/cart-drawer";
+import { Footer } from "@/components/layout/footer";
+import { Navbar } from "@/components/layout/navbar";
+import { getProducts } from "@/lib/headless/client";
+
+export const metadata: Metadata = {
+  metadataBase: new URL(process.env.NEXT_PUBLIC_SITE_URL ?? "https://shop.cruzcloud.net"),
+  title: { default: "ARI Shopping | Juguetes, regalos y variedades", template: "%s | ARI Shopping" },
+  description: "Tienda online de juguetes, personajes, mochilas y regalos con atención personalizada.",
+  openGraph: { title: "ARI Shopping", description: "Tesoros para cada aventura.", type: "website", locale: "es_CO" },
+};
+
+export const viewport: Viewport = { width: "device-width", initialScale: 1, themeColor: "#22d3ee" };
+
+export default async function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
+  const products = await getProducts();
+  return <html lang="es"><body><Navbar products={products} /><main>{children}</main><Footer /><CartDrawer /></body></html>;
+}
@@ -0,0 +1,6 @@
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+
+export default function NotFound() {
+  return <section className="grid min-h-[60vh] place-items-center px-4 text-center"><div><span className="text-7xl font-black text-cyan-500">404</span><h1 className="mt-3 text-3xl font-black">Este tesoro no existe</h1><p className="mt-3 text-slate-500">Regresa al catálogo para continuar explorando.</p><Button asChild variant="magenta" className="mt-6"><Link href="/catalog">Ir al catálogo</Link></Button></div></section>;
+}
@@ -0,0 +1,14 @@
+import Link from "next/link";
+import { ArrowRight } from "lucide-react";
+import { CategoryTiles } from "@/components/home/category-tiles";
+import { HeroBento } from "@/components/home/hero-bento";
+import { TrustBar } from "@/components/home/trust-bar";
+import { ProductCarousel } from "@/components/product/product-carousel";
+import { Button } from "@/components/ui/button";
+import { getProducts } from "@/lib/headless/client";
+
+export default async function HomePage() {
+  const products = await getProducts();
+  const treasures = products.filter((product) => product.isNew || product.featured).slice(0, 10);
+  return <><HeroBento /><TrustBar /><CategoryTiles /><section className="mx-auto max-w-7xl px-4 py-14"><div className="mb-8 flex items-end justify-between gap-5"><div><span className="text-xs font-black uppercase tracking-[.18em] text-fuchsia-600">Novedades</span><h2 className="mt-2 text-4xl font-black tracking-tight sm:text-5xl">Tesoros recién llegados</h2><p className="mt-3 text-slate-500">Desliza y encuentra nuevos favoritos.</p></div><Button asChild variant="outline" className="hidden sm:inline-flex"><Link href="/catalog">Ver catálogo <ArrowRight className="size-4" /></Link></Button></div><ProductCarousel products={treasures} /></section><section className="mx-auto max-w-7xl px-4 pb-20"><div className="grid overflow-hidden rounded-[2rem] bg-gradient-to-r from-cyan-500 via-blue-600 to-violet-600 text-white shadow-2xl lg:grid-cols-[1fr_.7fr]"><div className="p-8 sm:p-12"><span className="text-xs font-black uppercase tracking-[.18em] text-yellow-300">Club ARI</span><h2 className="mt-3 text-4xl font-black tracking-tight sm:text-6xl">Promociones, lanzamientos y mucha diversión.</h2><p className="mt-5 max-w-xl text-white/80">Únete a nuestra comunidad y recibe primero las novedades del catálogo.</p><Button variant="yellow" size="lg" className="mt-7">Quiero unirme</Button></div><div className="min-h-64 bg-[url('/images/promo/promo-backpacks.webp')] bg-cover bg-center" /></div></section></>;
+}
@@ -0,0 +1,30 @@
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
+import { MobileAddToCart } from "@/components/product/mobile-add-to-cart";
+import { ProductCarousel } from "@/components/product/product-carousel";
+import { ProductGallery } from "@/components/product/product-gallery";
+import { ProductPurchase } from "@/components/product/product-purchase";
+import { getProductBySlug, getProducts } from "@/lib/headless/client";
+
+interface ProductPageProps { params: Promise<{ slug: string }> }
+
+export async function generateStaticParams() {
+  const products = await getProducts();
+  return products.map((product) => ({ slug: product.slug }));
+}
+
+export async function generateMetadata({ params }: ProductPageProps): Promise<Metadata> {
+  const { slug } = await params;
+  const product = await getProductBySlug(slug);
+  return product ? { title: product.name, description: product.shortDescription, openGraph: { images: [product.image] } } : { title: "Producto" };
+}
+
+export default async function ProductPage({ params }: ProductPageProps) {
+  const { slug } = await params;
+  const product = await getProductBySlug(slug);
+  if (!product) notFound();
+  const products = await getProducts();
+  const recommended = products.filter((candidate) => candidate.id !== product.id && (candidate.category === product.category || candidate.collection === product.collection)).slice(0, 8);
+  return <><section className="mx-auto grid max-w-7xl gap-10 px-4 py-10 lg:grid-cols-[1.08fr_.92fr] lg:py-16"><ProductGallery images={product.images} name={product.name} /><div><span className="text-xs font-black uppercase tracking-[.18em] text-fuchsia-600">{product.category} · {product.collection}</span><h1 className="mt-3 text-4xl font-black tracking-tight sm:text-6xl">{product.name}</h1><p className="mt-5 text-lg leading-8 text-slate-600">{product.description}</p><div className="mt-8"><ProductPurchase product={product} /></div><Accordion type="single" collapsible className="mt-8"><AccordionItem value="details"><AccordionTrigger>Detalles del producto</AccordionTrigger><AccordionContent>Marca: {product.brand}. Edad recomendada: {product.ageRange}. La disponibilidad y presentación final se confirman con Ari Shopping.</AccordionContent></AccordionItem><AccordionItem value="shipping"><AccordionTrigger>Envíos y entregas</AccordionTrigger><AccordionContent>Coordinamos envíos nacionales y entrega según ubicación. Los tiempos se confirman durante la cotización.</AccordionContent></AccordionItem></Accordion></div></section>{recommended.length > 0 && <section className="mx-auto max-w-7xl px-4 pb-24"><h2 className="mb-7 text-3xl font-black">También te puede gustar</h2><ProductCarousel products={recommended} /></section>}<MobileAddToCart product={product} /></>;
+}