From c3f3857a921f0ca1d3dc558b6421a09ba84606fa Mon Sep 17 00:00:00 2001 From: Cristian Felipe Cruz Buitron Date: Sun, 13 Sep 2026 22:20:40 +0000 Subject: [PATCH] =?UTF-8?q?feat(ecommerce):=20aprovechar=20mejor=20el=20es?= =?UTF-8?q?pacio=20en=20la=20p=C3=A1gina=20de=20producto?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - "Detalles del producto" (marca, edad, categoría, colección) pasa de acordeón colapsado a una mini tabla siempre visible -- mismos datos reales de siempre, solo que ya no hace falta un click para verlos. - Buy-box: nueva franja de confianza real con enlaces a /envios y /cambios (5 días hábiles, envío de vuelta gratis) -- mismas políticas ya publicadas en el footer, no texto inventado. - "También te puede interesar" ahora muestra hasta 2 sugerencias en vez de 1, mismo cálculo real por categoría/colección que ya alimentaba el carrusel de abajo. Investigado de paso (sin fix): la discrepancia de stock reportada ("Quedan 1" vs available:false) no es un bug de ProductPurchase -- la página de producto usa /store/products de Medusa (en vivo, correcto), mientras que /store/search (Meilisearch) devuelve inventario desactualizado para el mismo producto. Eso vive en commerce-backend, fuera de alcance de este cambio de frontend. Co-Authored-By: Claude Sonnet 5 Claude-Session: https://claude.ai/code/session_012Y4df3Z7odr9Cg8F2nw6uV --- .../ecommerce/app/product/[slug]/page.tsx | 31 ++++++++++++------- .../components/product/product-purchase.tsx | 18 ++++++++++- 2 files changed, 37 insertions(+), 12 deletions(-) diff --git a/workloads/ecommerce/app/product/[slug]/page.tsx b/workloads/ecommerce/app/product/[slug]/page.tsx index 276d1ea..4d1bdfb 100644 --- a/workloads/ecommerce/app/product/[slug]/page.tsx +++ b/workloads/ecommerce/app/product/[slug]/page.tsx @@ -34,7 +34,7 @@ export default async function ProductPage({ params }: ProductPageProps) { 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); - const suggested = recommended[0]; + const suggestions = recommended.slice(0, 2); return ( <> @@ -51,11 +51,18 @@ export default async function ProductPage({ params }: ProductPageProps) { {product.category} · {product.collection}

{product.name}

{product.description}

- - - Detalles del producto - Marca: {product.brand}. Edad recomendada: {product.ageRange}. La disponibilidad y presentación final se confirman con Ari Shopping. - + {/* Antes escondido detrás de un click en el acordeón -- + siempre visible, estilo Amazon, con los mismos datos + reales que ya existían (marca/edad/categoría/colección), + sin inventar specs que el catálogo no tiene. */} +

Detalles del producto

+
+
Marca
{product.brand}
+
Edad recomendada
{product.ageRange}
+
Categoría
{product.category}
+
Colección
{product.collection}
+
+ Envíos y entregas Coordinamos envíos nacionales y entrega según ubicación. Los tiempos se confirman durante la cotización. @@ -64,17 +71,19 @@ export default async function ProductPage({ params }: ProductPageProps) { {/* Buy box estilo Amazon: precio/variantes/carrito en su propia tarjeta, sticky desde xl mientras el resto de la pagina - scrollea. El sugerido usa el mismo cálculo de "recommended" - que ya alimenta el carrusel de abajo -- mismo criterio real - (categoría/colección), no un dato inventado. */} + scrollea. Los sugeridos (hasta 2) usan el mismo cálculo de + "recommended" que ya alimenta el carrusel de abajo -- mismo + criterio real (categoría/colección), no un dato inventado. */}
- {suggested && ( + {suggestions.length > 0 && (

También te puede interesar

- +
+ {suggestions.map((item) => )} +
)}
diff --git a/workloads/ecommerce/components/product/product-purchase.tsx b/workloads/ecommerce/components/product/product-purchase.tsx index 8055f5e..9d18309 100644 --- a/workloads/ecommerce/components/product/product-purchase.tsx +++ b/workloads/ecommerce/components/product/product-purchase.tsx @@ -1,6 +1,7 @@ "use client"; -import { CheckCircle2, ShoppingBag, TriangleAlert, Truck, XCircle } from "lucide-react"; +import { CheckCircle2, RotateCcw, ShoppingBag, TriangleAlert, Truck, XCircle } from "lucide-react"; +import Link from "next/link"; import { useState } from "react"; import { Button } from "@/components/ui/button"; import type { Product } from "@/lib/headless/types"; @@ -79,6 +80,21 @@ export function ProductPurchase({ product }: { product: Product }) { Envíos nacionales + {/* Franja de confianza real (estilo Walmart) -- enlaza a las + páginas reales de /envios y /cambios en vez de repetir texto + suelto, con los datos reales que confirmó el usuario (5 días + hábiles, envío de vuelta a cargo de ARI Shopping). Nada + inventado: mismas políticas ya publicadas en el footer. */} +
+ + + Envíos calculados en el checkout · ver detalles + + + + Cambios en 5 días hábiles, envío de vuelta gratis + +
); }