diff --git a/workloads/ecommerce/components/product/mobile-add-to-cart.tsx b/workloads/ecommerce/components/product/mobile-add-to-cart.tsx index e91ffaa..c4781aa 100644 --- a/workloads/ecommerce/components/product/mobile-add-to-cart.tsx +++ b/workloads/ecommerce/components/product/mobile-add-to-cart.tsx @@ -18,12 +18,21 @@ const SCROLL_THRESHOLD_PX = 80; // ProductPurchase, visible tambien en mobile) no esta en pantalla -- // ya sea porque todavia no se llego a el, o porque se scrolleo mas // alla. -// - !pastRecommendations: una vez que se llega a "También te puede -// gustar" (#recommendations-section en app/product/[slug]/page.tsx) -// la barra se oculta y ya no vuelve a aparecer bajando mas -- pedido -// explicito del usuario (antes quedaba pegada hasta el footer, sin -// sentido una vez que el contenido principal del producto ya quedó -// atrás). +// - !pastRecommendations: una vez que "También te puede gustar" +// (#recommendations-section en app/product/[slug]/page.tsx) empieza a +// entrar en pantalla, la barra se oculta y sigue oculta el resto del +// scroll (footer incluido) -- pedido explicito del usuario. OJO: +// condicionar esto a que el borde superior de la seccion cruce el +// 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 }) { const addItem = useCartStore((state) => state.addItem); const [buttonVisible, setButtonVisible] = useState(true); @@ -47,7 +56,7 @@ export function MobileAddToCart({ product }: { product: Product }) { if (!target) return; const observer = new IntersectionObserver((entries) => { const entry = entries[0]; - if (entry) setPastRecommendations(entry.boundingClientRect.top <= 0); + if (entry) setPastRecommendations(entry.boundingClientRect.top < window.innerHeight); }, { threshold: 0 }); observer.observe(target); return () => observer.disconnect();