Slider al 100% en Prestashop 1.7

Forma de hacerlo súper sencillo, usando el módulo por defecto de Prestashop 1.7 y editando un único archivo en el child theme:

Primero tenemos que instalar un módulo que nos permite instalar un hook donde queramos, tenemos toda la info aquí: https://victor-rodenas.com/crear-hooks-en-prestashop/

Básicamente es instalar el módulo hooksmanager y añadimos un hook que se llame displaySliders.

Después vamos al tema principal y copiamos el archivo themes/classic/templates/layouts/layout-both-columns.tpl y lo pegamos en themes/child-classic/templates/layouts/layout-both-columns.tpl

Ahora nos vamos en torno a la linea 55 y metemos el siguiente fragmento de código justo antes de la línea <section id=»wrapper»>:

{if $page.page_name=="index"}
    {hook h="displaySliders"}
{/if}

Aquí lo que estamos haciendo es añadir un nuevo hook que esté debajo del menú y que solo aparezca en la Home.

Ahora lo que hacemos es ir a Diseño->Posiciones y en insertar un módulo buscamos el que se llama «Carrusel de imágenes» y lo añadimos a displaySliders. A continuación tenemos que quitar ese mismo módulo del hook Home y ya tendremos un banner a todo el ancho de la página funcionando perfectamente.


Esta es una solución antigua que ya no me gusta:

Una de las principales cosas que nos gusta añadir en las tiendas es un Slider a todo el ancho y para ello necesitamos hacer un par de cambios, es importante que esto lo hagamos de lo primero ya que vamos a tener que reconstruir el tema una vez hagamos los cambios.

Nos vamos a la carpeta hijo que hemos creado del tema y editamos el archivo /config/theme.yml

En este archivo tenemos que añadir el nuevo hook, para ellos tenemos dos formas, la fácil:

displaySlider:
– ps_imageslider

Y otra forma mejorada que será ponerlo abajo del archivo en el bloque de «custom hook»:

custom_hooks:
  name: displaySlider
  title: displaySlider
  description: Display Image Slider module in a separate hook
Haciendo de la primera forma ya valdría.
Luego nos vamos al archivo theme_hijo/templates/layouts/layout-both-columns.tpl
y debajo de la linea: <header id=«header»></header> pegamos el siguiente texto, que sirve para que el slide solo salga en la portada:
{if $page.page_name == ‘index’}
   {hook h=‘displaySlider’}
{/if}
Una vez hecho esto nos vamos a la tienda en Diseño-> Tema y logotipo y clicamos en Restablecer los Valores predeterminados.
OJO-> Esto nos va a volver a poner todos los módulos como al principio por lo que hay que tener cuidado y hacerlo sabiendo los módulos que he mos activado y desactivado ya que sino perderemos la configuración que tuviéramos.
Esta información la he cogido de esta Web: https://belvg.com/blog/custom-hooks-in-prestashop-1-7.html