Hacer que las páginas de producto empiecen arriba en Prestashop

Hace unos días un cliente os comentó que los usuarios se quejaban porque al pinchar en la paginación de Prestashop, la nueva página se cargaba en la parte inferior y no al comienzo. Eso les obligaba a hacer scroll hasta arriba.

Os dejamos la solución.

Tenéis dos maneras de solucionarlo.

Botón Volver Arriba.

En móviles Prestashop pone un botón de volver arriba. En escritorio lo esconde, pero podéis activarlo por CSS haciendo esto:

.hidden-md-up.text-xs-right.up {display:block!important;}

Esto debía ser suficiente … pero no lo era para los usuarios de nuestro cliente. Así que tuvimos que desarrollar una segunda opción.

Hacer que cada página se cargue automáticamente al principio.

Lo que vamos a incluir es un JQuery para que cuando pulse en la paginación, la siguiente carga comience al principio. Tras probar varios, el código lo encontramos aquí.

Es el siguiente:

 $( '#products' ).on( 'click', '.js-search-link', function( event ) {
    var target = $( "#header" );
    if ( target.length ) {
      event.preventDefault();
      $( 'html, body' ).animate( {
        scrollTop: target.offset().top+300
      }, 1000 );
    }
  });

Se puede poner en varios sitios, pero nosotros lo pusimos al final del fichero  /themes/core.js

Como veis, lo que hace es que cuando pinches en la clase .js-search-link hace un scrollTop hasta el principio.

Funciona muy bien en modo desktop y tablet, en móviles después del la cabecera vienen los menús, así que tienes que bajar un poco más. Lo ideal sería que subiera a un anchor. Si lo modificamos lo colgaremos aquí.