¿Botón 'scroll to top' no funciona?

patriciadigital

¡Hola a todos!

Estoy intentando añadir un botón de "volver arriba" (scroll to top) en mi tienda PrestaShop 8.2.2. He añadido el HTML para el botón en footer.tpl y el CSS básico para posicionarlo y ocultarlo por defecto en custom.css.

El problema es que la lógica JavaScript que he puesto en themes/classic/assets/js/custom.js no parece funcionar. El botón aparece en el HTML si lo fuerzo, y el CSS está bien, pero la función de mostrarlo al hacer scroll y de subir al hacer clic no se activa. Es como si el JS no estuviera escuchando los eventos de scroll o click.

He puesto un console.log y el elemento del botón parece estar ahí, pero la interacción no va. ¿Alguien ha tenido este problema o sabe la forma correcta de integrar JS para estas funcionalidades en PrestaShop 8.2.2?

Aquí tenéis el código de custom.js que estoy usando:

document.addEventListener('DOMContentLoaded', function() {
  const scrollBtn = document.getElementById('scrollToTopBtn');
  console.log('Elemento del botón de scroll:', scrollBtn);
  if (scrollBtn) {
    window.addEventListener('scroll', () => {
      if (window.scrollY > 250) {
        scrollBtn.style.display = 'block';
      } else {
        scrollBtn.style.display = 'none';
      }
    });

    scrollBtn.addEventListener('click', (e) => {
      e.preventDefault();
      window.scrollTo({ top: 0, behavior: 'smooth' });
    });
  }
});

silvia94

Hola @patriciadigital,

Esto suena a un problema clásico de timing en PrestaShop. ¿Qué versión exacta de PrestaShop estás usando? A veces, DOMContentLoaded puede ser un poco engañoso si el custom.js se carga de forma asíncrona o muy temprano en el proceso de renderizado del tema.

Has comprobado la consola del navegador para ver si hay algún error de JS que te impida ejecutar el script? Asegúrate también de que tu custom.js está correctamente registrado en config/theme.yml de tu tema y que se carga al final del body.

ruben_digital62

Yo tuve un problema similar con la versión 8.1. La mayoría de las veces, DOMContentLoaded es suficiente, pero con PrestaShop, si el elemento scrollToTopBtn se inyecta en el DOM después de que el evento DOMContentLoaded ya se haya disparado (por ejemplo, por algún módulo o script que se carga más tarde), tu scrollBtn podría ser null incluso si existe en el HTML final.

Como dice @silvia94, es crucial la versión. Si custom.js está en el theme.yml como bottom, puede que DOMContentLoaded no sea lo más óptimo. Podrías probar a envolver tu código en un window.onload para asegurar que todo el contenido, incluyendo las imágenes, se ha cargado.

Milo

Hola @patriciadigital,

Gracias por la descripción detallada. Los compañeros @silvia94 y @ruben_digital62 están en lo cierto, el problema es casi con toda seguridad un tema de timing en la ejecución de tu JavaScript.

Aunque DOMContentLoaded es el estándar para ejecutar JS cuando el DOM está listo, en entornos como PrestaShop donde los scripts pueden ser cargados de diversas maneras (bundles, asíncronamente, por módulos que inyectan contenido), puede que el elemento scrollToTopBtn no esté disponible cuando tu script intenta adjuntar los listeners.

Una solución más robusta y que garantiza que todos los elementos HTML han sido cargados (incluyendo la imagen y otros recursos que puedan retrasar el DOM) es usar window.onload. Esto asegura que el script se ejecuta cuando todo en la página, incluyendo tu botón, ya está disponible.

Aquí tienes la modificación que puedes aplicar a tu themes/classic/assets/js/custom.js:

window.onload = function() {
  const scrollBtn = document.getElementById('scrollToTopBtn');
  if (scrollBtn) {
    // Asegurarse de que el botón está oculto inicialmente por JS, si no lo hace el CSS
    scrollBtn.style.display = 'none'; 

    window.addEventListener('scroll', () => {
      if (window.scrollY > 250) {
        scrollBtn.style.display = 'block';
      } else {
        scrollBtn.style.display = 'none';
      }
    });

    scrollBtn.addEventListener('click', (e) => {
      e.preventDefault();
      window.scrollTo({ top: 0, behavior: 'smooth' });
    });
  }
};

Con este cambio, el script esperará a que toda la página se haya cargado completamente antes de intentar buscar el botón y adjuntar los oyentes de eventos. También he añadido una línea para asegurar que el botón está oculto inicialmente por JS, por si el CSS no lo está aplicando correctamente al principio.

Ten en cuenta que hacer modificaciones directas en los archivos del tema como custom.js o footer.tpl siempre conlleva el riesgo de que tus cambios se pierdan con las actualizaciones del tema. Para una solución más mantenible y profesional en tiendas de producción, siempre recomiendo utilizar un módulo dedicado. Puedes encontrar una solución para desplazar la página hacia arriba que se integra sin overrides y ofrece opciones de configuración avanzadas.

patriciadigital

¡Muchísimas gracias, @Milo! ¡Era justo eso! Cambiar DOMContentLoaded por window.onload en el custom.js ha hecho que el botón funcione perfectamente. Ahora el botón aparece y desaparece con el scroll y el clic sube la página sin problemas.

Agradezco también el consejo sobre el módulo. Para mi tienda principal, buscaré esa opción para evitar problemas con futuras actualizaciones. Por ahora, con este ajuste, estoy listo. ¡Un saludo a todos por vuestra ayuda!