devops
ca26c6ebea
Reportado en produccion: en mobile aparecian dos botones 'Añadir al carrito' apilados. ProductPurchase.tsx nunca ocultaba su boton en mobile, y MobileAddToCart.tsx (barra fija abajo, solo lg:hidden) ya cubre esa misma accion ahi -- se agrega hidden lg:inline-flex al primero para que solo uno este visible por breakpoint. De paso, dos leftovers del esquema arcoiris original en la misma pagina, vistos en la misma sesion de pruebas: el badge de variante seleccionada (border-fuchsia-500 bg-fuchsia-50 text-fuchsia-700 -> azul de marca) y la etiqueta de categoria/coleccion (text-fuchsia-600 -> ari-coral).
38 lines
3.4 KiB
TypeScript
38 lines
3.4 KiB
TypeScript
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 }> }
|
|
|
|
// generateStaticParams + revalidate quedaban aquí para pre-renderizar en
|
|
// build time, pero HEADLESS_PROVIDER/MEDUSA_* no existen en el contexto del
|
|
// Docker build: el snapshot estático quedaba congelado con el catálogo mock
|
|
// (todos los productos con price: null) hasta que ISR lo revalidara. Con
|
|
// frontend-deploy corriendo 2 réplicas y sin cacheHandler compartido, cada
|
|
// pod revalida su propia caché de forma independiente, así que un producto
|
|
// podía mostrar "Consultar precio" en un pod y el precio real en el otro
|
|
// según cuál hubiera sido "calentado". force-dynamic elimina esa caché por
|
|
// pod y deja esta ruta en vivo contra Medusa, igual que el listado
|
|
// (dinámico por searchParams).
|
|
export const dynamic = "force-dynamic";
|
|
|
|
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-ari-coral">{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} /></>;
|
|
}
|