fix(ecommerce): corrige condición para ocultar el CTA fijo en mobile
Build and Push Frontend / Escaneo de Secretos (Gitleaks) (push) Successful in 22s
Build and Push Frontend / Construir y Subir Imagen (push) Successful in 8m10s

Bug real encontrado armando la prueba automatizada que valida el
commit anterior (cd72962): condicionar el ocultamiento a que el borde
superior de "También te puede gustar" cruce el TOPE del viewport
(top <= 0) no es alcanzable en páginas sin suficiente contenido/footer
debajo -- el scroll máximo del documento nunca llega a ese punto, y el
bug original (barra pegada hasta el fondo) seguía reproduciéndose en
la práctica, aunque el código "parecía" correcto.

Se compara ahora contra la ALTURA del viewport (top < innerHeight): la
barra se oculta apenas la sección empieza a asomar desde abajo, y
sigue oculta el resto del scroll sin depender de cuánto contenido haya
más abajo.

Co-Authored-By: Claude Sonnet 5 <[email protected]>
Claude-Session: https://claude.ai/code/session_012Y4df3Z7odr9Cg8F2nw6uV
This commit is contained in:
devopsandClaude Sonnet 5 committed 2026-09-14 01:45:25 +00:00
1 parent 58a1fd1597
commit 0723b43c54
1 file changed
+16 -7
@@ -18,12 +18,21 @@ const SCROLL_THRESHOLD_PX = 80;
// ProductPurchase, visible tambien en mobile) no esta en pantalla -- // ProductPurchase, visible tambien en mobile) no esta en pantalla --
// ya sea porque todavia no se llego a el, o porque se scrolleo mas // ya sea porque todavia no se llego a el, o porque se scrolleo mas
// alla. // alla.
// - !pastRecommendations: una vez que se llega a "También te puede // - !pastRecommendations: una vez que "También te puede gustar"
// gustar" (#recommendations-section en app/product/[slug]/page.tsx) // (#recommendations-section en app/product/[slug]/page.tsx) empieza a
// la barra se oculta y ya no vuelve a aparecer bajando mas -- pedido // entrar en pantalla, la barra se oculta y sigue oculta el resto del
// explicito del usuario (antes quedaba pegada hasta el footer, sin // scroll (footer incluido) -- pedido explicito del usuario. OJO:
// sentido una vez que el contenido principal del producto ya quedó // condicionar esto a que el borde superior de la seccion cruce el
// atrás). // TOPE del viewport (top <= 0) rompe en paginas cortas -- si no hay
// suficiente contenido/footer debajo, nunca se puede scrollear tan
// lejos y el bug original (barra pegada hasta el fondo) segunia
// reproduciendose. En cambio, se compara contra la ALTURA del
// viewport (top < innerHeight): se oculta apenas la seccion empieza a
// asomar desde abajo, se mantiene oculta al seguir scrolleando mas
// alla (top se vuelve cada vez mas negativo, sigue siendo <
// innerHeight), y solo reaparece si se vuelve a scrollear hacia
// arriba lo suficiente como para que la seccion salga de pantalla per
// completo otra vez.
export function MobileAddToCart({ product }: { product: Product }) { export function MobileAddToCart({ product }: { product: Product }) {
const addItem = useCartStore((state) => state.addItem); const addItem = useCartStore((state) => state.addItem);
const [buttonVisible, setButtonVisible] = useState(true); const [buttonVisible, setButtonVisible] = useState(true);
@@ -47,7 +56,7 @@ export function MobileAddToCart({ product }: { product: Product }) {
if (!target) return; if (!target) return;
const observer = new IntersectionObserver((entries) => { const observer = new IntersectionObserver((entries) => {
const entry = entries[0]; const entry = entries[0];
if (entry) setPastRecommendations(entry.boundingClientRect.top <= 0); if (entry) setPastRecommendations(entry.boundingClientRect.top < window.innerHeight);
}, { threshold: 0 }); }, { threshold: 0 });
observer.observe(target); observer.observe(target);
return () => observer.disconnect(); return () => observer.disconnect();