Inicio InformáticaCómo crear un Slider con las novedades de tu tienda Prestashop

Cómo crear un Slider con las novedades de tu tienda Prestashop

Publicado por entreunosyceros
Publicado el: Última actualización:

AVISO: Esta entrada tiene más de dos años desde su publicación. Es posible que el contenido esté desactualizado.

Este va a ser un pequeño «truco» para poder crear un slider en el que mostrar las novedades de tu tienda prestashop 1.6. El asunto no es muy complicado, utilizaremos el bxSlider con el que Prestashop nos permite crear un slider en la cabecera de la web. Nosotros solo añadiremos un id a una etiqueta y crearemos una pequeña función con la que llamar a las novedades y mostrarlas en el bloque novedades que trae consigo prestashop por defecto.

Para empezar habrá que localizar en el theme que utilices en tu tienda Prestashop (yo esto solo lo he probado en la versión 1.6.1.1, pero creo que funciona en todas las versiones 1.6 de Prestasho), el archivo blocknewproducts.tpl (lo encontraremos dentro de la carpeta blocknewproducts que a su vez está dentro de la carpeta modules y esta está dentro de la carpeta del theme que estés utilizando) .

Editaremos el archivo y buscaremos en su código lo siguiente:

ul class="products”

A mi me aparece en la línea 32 por lo que supongo que a todo el mundo le saldrá en esa línea o al rededor de ella.

El caso es que dentro de la etiqueta ul, justo después de class=»products» añadiremos id=»slider-blocknewproducts» (el id podemos cambiarla si queremos, pero después debemos cambiarla en el script que a continuación mostraré.

A continuación habrá que buscar dentro de la carpeta de nuestro theme la carpeta js, que es dónde se guarda el archivo global.js. En el guardaremos el siguiente script jquery.

Crearemos el slider de novedades con jquery, dentro del archivo global.js

$(document).ready(function() {
if (!!$.prototype.bxSlider)
$('#slider-blocknewproducts').bxSlider({
minSlides: 1,
maxSlides: 8,
slideWidth: 178,
slideMargin: 20,
pager: true,
controls: false,
nextText: 'Next',
prevText: 'Prev',
moveSlides:1,
infiniteLoop:false,
hideControlOnEnd: false
});
});

Ahora cuando activemos el módulo blocknewproducts y limpiemos la caché de nuestro navegador y de nuestra web, veremos en la barra lateral (yo lo he querido ahí) nuestras novedades en forma de slider.

novedades slider jqueryEste script lo podrás modificar al gusto del consumidor, pudiendo añadirle CSS para dejarlo más chulo o cambiando las opciones que cargan en el script jquery con el que montamos este pequeño slider

También te puede interesar ...

Deja un comentario

* Al utilizar este formulario, aceptas que este sitio web almacene y maneje tus datos.

2 Comentarios

Sara Castro 7 junio, 2016 - 1:28 AM

Esto lo pruebo que me vendría muy bien ;)

Respuesta
SamTxo 27 enero, 2016 - 4:12 PM

Fastástico consejo. Este te lo robo

Respuesta
Resumen de privacidad
cookies entreunosyceros

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible.

La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudarnos a comprender qué secciones de la web encuentras más interesantes y útiles.

Nunca almacenamos información personal de ningún tipo.

Tienes toda la información sobre privacidad, derechos legales y cookies en nuestra página sobre la política de privacidad o en la página sobre nuestra política de cookies.

Cookies necesarias

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.

Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.

Cookies de terceros

Esta web utiliza las siguientes cookies adicionales:

- Mailchimp: Recordar si ya estás suscrito al boletín de noticias y sino ofrecértelo al salir.

- Accesibilidad: Para saber tus ajustes de accesibilidad en cada visita.

- Comentarios: Saber si has leído y aceptado nuestra política de privacidad a la hora de dejar un comentario en la web.

- Google Analytics: Localización para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares.

- Goggle Adsense: Anuncios personalizados según tu geolocalización y preferencias.

Dejar estas cookies activadas nos permite mejorar nuestra web.

Adblock Detectado!!

Ayúdanos deshabilitando la extensión AdBlocker de tu navegador para visitar esta web.
Si no sabes hacerlo en Chrome, consulta el siguiente enlace. Si utilizas Firefox, puedes consultar este otro enlace.
Esto mejorará tu experiencia en este sitio web.