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 dandole un aspecto profesional y como no usable.

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

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

Ahora si no lo tienes esto 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.

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

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

Bien lo que vas 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, eso si recuerda que no doy soporte que lo que hagas en tu tienda o archivos, es responsabilidad tuya y no mía, si algo no te sale como en el tutorial debes de repasar  esto esta probado.

Saludos.

7 comentarios

  1. Yo recomiendo Sublime text o notepad++, son editores de código gratuitos, aunque como dice Javier, puedes editarlo con cualquier cosa, bloc de notas por ejemplo.

  2. ojo con las comillas de la linea del div que va en el footer:

    Las comillas del cierro del class no son estas comillas dobles » y hay que substituirla.

  3. Hola:
    Javier, primero agradecerte la ayuda que nos brindas a los que intentamos montar una tienda online, gracias a ti nos quitamos muchos quebraderos de cabeza. Queria preguntarte respecto al «boton de volver arriba» he seguido tus pasos pero a mi me aparece un boton negro con este simbolo dentro: /* me imagino que algo he realizado mal pero no se que puede ser por mas que lo reviso.
    Muchas gracias por adelantado.
    Un saludo.

  4. Puedes abrirlo con cualquier editor, pero seguramente debes de configurar la extensión .tpl con dicho editor.

    Saludos.

  5. Hola Javier, un blog genial. Un respiro para los que somos nuevos en esto de las tiendas online.
    Una pregunta: los archivos .tpl con que programa lo editamos? He intentado editarlo con textEdit
    pero cuando voy a abrir el local me sale todo el rato el Photoshop (CS6)…
    Gracias de antemano!
    Un saludo.

  6. Buenas tardes Javier, ante todo agradecerte el tutorial, gestiono una tienda online con prestashop, pero en programación estoy muy pegado, ¿Podrías decirme en que parte de los archivos hay que insertar el código?¿Al final, en algún lugar especifico?
    Utilizo prestashop 1.6.0.14 co la plantilla default.

    Un saludo y gracias.

  7. Sí, hay tres archivos, uno es Global.js, otro es footer.tpl y el último el CSS en Global.css lo pongo en el post, fíjate sale cada trozo de código en el fichero que va.

    Saludos.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Información básica sobre protección de datos Ver más

  • Responsable Javier Valero.
  • Finalidad  Moderar los comentarios. Responder las consultas.
  • Legitimación Tu consentimiento.
  • Destinatarios  Javier Valero.
  • Derechos Acceder, rectificar y suprimir los datos.
  • Información Adicional Puedes consultar la información detallada en la Política de Privacidad.

Publicar comentario