Crear un slider con las novedades de nuestro Prestashop 1.6

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

3 octubre, 2015 2 Comentarios

Última actualización: 27 abril, 2016 - 12:37 am

Valora este artículo:

(Ninguna valoración todavía)

Cargando…

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”

1	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é.

Cómo solucionar el error jQuery.easing [jQuery.easing.def] is not a function en Prestashop

LEER

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
});
});

$(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.

Este 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