[Tutorial] Crear un botón para volver arriba

Si tienes una tienda PrestaShop, Crear un botón para volver arriba facilita hacer scroll y facilita la vida al usuario para que su navegación sea más fluida.

En este post quiero enseñarte como crear dicho botón, así más que un post es un tutorial que te servirá para hacer como en las plantillas profesionales dándole un aspecto profesional y como no usable.

Veamos que ventajas puede tener un botón de esta característica en tu tienda:

• Mejor accesibilidad
• Mejor navegación
• Menos scroll
• Menos abandono

Ahora si no lo tienes esto mismo que he dicho se convierte en negativo o sea:

• Peor accesibilidad
• Peor navegación
• Más Scroll
• Más abandono

Solemos ver este tipo de botones en las plantillas profesionales, pero no en la que trae por defecto, y yo creo que tener esto facilitara que tu tienda sea más usable porque para que engañarnos todo lo que sea mejorar facilita el éxito.

Veamos pues como realizar ese botón para volver hacia arriba, cuando digo hacia arriba me refiero volver a la cabecera o parte superior de nuestra tienda.

Así que manos a la obra:

Bueno decirte que puedes hacerlo sin módulo también y es como voy a explicarlo, pero si no quieres hacerlo manualmente pues ya sabes.

Ah por cierto no doy soporte a mis tutoriales si quieres podemos comentar, esto debes de hacerlo tú por tu propia cuenta OK yo no me hago responsable.

Bien lo primero será entrar a los archivos de nuestro PrestaShop y buscar nuestra plantilla, en este caso default-bootstrap y busco la carpeta js, ahí encontrarás el archivo global.js debes de abrirlo sin más con cualquier editor que tengas.

Lo que vas a hacer es copiar este código que te pongo aquí:

$(".jv_scrollup").hide();
 
 // fade in .jv_scrollup
 $(function () {
  $(window).scroll(function () {
   if ($(this).scrollTop() > 100) {
    $('.jv_scrollup').fadeIn();
   } else {
    $('.jv_scrollup').fadeOut();
   }
  });
  // scroll body to 0px on click
  $('.jv_scrollup').click(function () {
   $('body,html').animate({
    scrollTop: 0
   }, 800);
   return false;
  });

Segundo paso:

Abrimos el footer.tpl e insertamos este código:

<div class="back-top"><a href= "#" class="jv_scrollup hidden-phone icon-double-angle-up”></a></div>

Tercer paso:

Abrimos nuestro Global.css e insertamos este código:

div.back-top .jv_scrollup {
    background: none repeat scroll 0 0 #000;
    border-radius: 5px;
    bottom: 15px;
    color: #FFFFFF;
    font-size: 30px;
    height: 40px;
    line-height: 40px;
    position: fixed;
    right: 15px;
    text-align: center;
    width: 40px;
    text-decoration: none;
 }

Abrimos la recopilación de archivos para que PrestaShop cargue de nuevo y voala listo.

Ahora deberías de tener un botón en tu tienda.

Espero que te haya sido de utilidad y ya me cuentas como te ha quedado.

Saludos.