Fondo Distinto en PRODUCTO según Categoría PRESTAHOP 1.7.x

Tabla de Contenidos

Mejora el comportamiento visual del cliente en la tienda.

Puedes jugar con el código de distintas maneras y adaptarlo a lo que necesites.

En este pequeño aporte espero solucionar la duda para los que quieren poner un fondo distinto en la pagina de producto según en la categoría que se encuentre. Es decir que cuando entres a productos de la CATEGORIA1 esos productos te muestren un fondo distinto de la CATEGORIA2

Usa fondos distintos en productos dependiendo de categoría

Lo primero decir que esta función la busque en los foros y la gente antes usaba el código {$smarty.get.id_category} para llamar a la ID de la categoría cosa que no me funcionó. Quizás sea para otra versión de Prestashop

Llamamos a la ID de la categoría en el CSS Class

Para llamar a la ID de la categoría utilizaremos este código {$category->id}

En mi caso el fondo distinto en producto lo puedo cambiar en el CSS en la ID de WRAPPER de mi plantilla de Prestashop 1.7 que es por así decirlo toda la caja que tendrá el fondo con el SECTION. Pero lo que vamos a hacer es añadir nuestro class Personalizado con {$category->id}  (también se puede hacer con ID para el CSS da igual).

Paso 1 Encontramos el archivo del id=»wrapper»

El archivo con el código id=»wrapper» se encuentra dentro de la plantilla normalmente.

Normalmente en la ruta: themes/TUTHEME/templates/layouts/layout-both-columns.tpl

Buscamos dentro del Layout la linea que carga la caja del id=»wrapper»

<section id="wrapper">

y la dejamos asi:

<section id="wrapper" class="fondocategoria{$category->id}">

Hemos añadido el class=»fondocategoria{$category->id}». Lo que nos va hacer esto es generar una clase de CSS dependiendo en la categoría añadiendo ID de la misma al nombre de la clase con {$category->id}. (Por lo que si la categoría Muñecos tiene ID interno de 15 cogería este numero para añadirlo a la clase)

Como ejemplo de lo que crearía la CLASS CSS podría ser «fondocategoria15»

Paso 2 Meter el CSS con el Fondo a las Clases

Si sabes de CSS sabrás donde irá este paso y asi es. Con las clases que nos genera el código que hemos modificado en el: themes/TUTHEME/templates/layouts/layout-both-columns.tpl en el paso anterior nos vamos a ir nuestra clase de CSS favorito como puede ser el custom.css de Prestashop 1.7 que se encuentra en themes/TUTHEME//assets/css/custom.css.

Asi que simplemente vamos a crear clases de nuestras categorías en las que queremos añadir el fondo en los productos.

Suponiendo que nos ha creado la class=»fondocategoria15″ dentro de nuestro CSS ya podemos añadir esta clase a nuestra hoja de estilo con el siguiente código por ejemplo.

.fondocategoria15{
   background-image: url("https://rutadetubg.com/foto.jpg");
   background-size: contain;
   background-repeat: no-repeat;
}

Lo que sucede ahora es que a la clase que se crea le estamos añdiendole la imagen de background. Ten en cuentra que si entras en otra categoria te generará la clase de fondocategoria(otro numero) que tendrás que añadir nuevamente al css como una clase más para añadirle otro background.

Con eso todos los productos dependiendo de la categoría se pueden distinguir de otras con un background.

Otros usos para {$category->id}

El uso principal del {$category->id}  es imprimir la ID de la categoría actual que se este mostrando en el producto por ejemplo.

Otras de las funciones útiles que le doy a este código es por ejemplo añadir textos distintivo dentro del producto dependiendo de la categoría.

Si por ejemplo esta en la categoría perros que antes de añadir al carrito haya una frase como: LO MEJOR PARA TU PERRO! y que solo funcione para esta categoría. Este es el código para ello:

{if $category->id==16 || $category->id_parent ==16} TEXTO O CONTENIDO PERSONALIZADO {/if}

Coloca este código en el lugar donde quieres que aparezca la información dentro del producto.