From 0fd05dab2a9b411e81440b7deccfe1c5feafd261 Mon Sep 17 00:00:00 2001 From: Cristian Felipe Cruz Buitron Date: Sun, 20 Sep 2026 20:07:32 +0000 Subject: [PATCH] fix(ecommerce): comillas en url() del zoom, rompia con espacios/parentesis en el nombre de archivo --- .../components/product/product-gallery.tsx | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/workloads/ecommerce/components/product/product-gallery.tsx b/workloads/ecommerce/components/product/product-gallery.tsx index 97c1189..133c9cf 100644 --- a/workloads/ecommerce/components/product/product-gallery.tsx +++ b/workloads/ecommerce/components/product/product-gallery.tsx @@ -179,7 +179,18 @@ export function ProductGallery({ images, name }: { images: string[]; name: strin className="pointer-events-none absolute inset-0 bg-slate-50 transition-opacity duration-150 ease-out" style={{ opacity: hoverZoom && !hoverZoom.showPanel ? 1 : 0, - backgroundImage: `url(${selected})`, + // Comillas dentro de url() a proposito: sin ellas, un + // espacio o parentesis literal en el nombre de archivo + // (ej. "descarga (4)-xxx.png", el patron por defecto de + // Chrome al descargar una imagen sin renombrarla -- asi + // quedan las subidas manuales, a diferencia de las + // importadas por CSV) rompe la sintaxis de url() sin + // comillas -- el navegador descarta el valor completo en + // silencio (backgroundImage queda "none"). Confirmado en + // vivo 2026-09-20: reportado por el usuario como "el zoom + // interactivo no se visualiza" solo en fotos subidas a + // mano por el admin, nunca en las de CSV. + backgroundImage: `url("${selected}")`, backgroundRepeat: "no-repeat", backgroundSize: `${HOVER_ZOOM_SCALE * 100}%`, backgroundPosition: hoverZoom ? `${hoverZoom.bgX}% ${hoverZoom.bgY}%` : "center", @@ -217,7 +228,9 @@ export function ProductGallery({ images, name }: { images: string[]; name: strin top: hoverZoom.panelTop, width: hoverZoom.panelSize, height: hoverZoom.panelSize, - backgroundImage: `url(${selected})`, + // Ver el comentario en el overlay in-place de arriba -- mismo + // fix, mismo motivo (comillas necesarias dentro de url()). + backgroundImage: `url("${selected}")`, backgroundRepeat: "no-repeat", backgroundSize: `${HOVER_ZOOM_SCALE * 100}%`, backgroundPosition: `${hoverZoom.bgX}% ${hoverZoom.bgY}%`,