En esta guía, explicaremos como tener un fondo distinto en nuestra tienda Prestashop, según en la categoría donde nos situemos.
Lo primero que vamos hacer, es editar el fichero:
/themes/default/header.tpl
En nuestro caso, hacemos referencia a la plantilla por defecto de Prestashop.
Una vez hemos abierto el fichero en cuestión, buscaremos la siguiente línea:
<body {if isset($page_name)}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if} class="{if $hide_left_column}hide-left-column{/if} {if $hide_right_column}hide-right-column{/if}">
Y la dejamos así:
<body {if isset($page_name)}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if} class="{if $hide_left_column}hide-left-column{/if} {if $hide_right_column}hide-right-column{/if} {if $smarty.get.id_category}categoria{$smarty.get.id_category}{/if}">
Dentro de class, hemos agregado lo siguiente:
{if $smarty.get.id_category}categoria{$smarty.get.id_category}{/if}
Esto nos permitirá ahora, identificar el body con clases distintas en el css, según en la categoría donde estemos.
Por ejemplo, para poner un fondo a la página, si estamos en la categoría con “id 5”, iríamos por ejemplo al fichero:
/themes/default/css/global.css
Y añadimos lo siguiente:
.categoria5 {background:red;}
He puesto un color por poner un color cualquier, también podríamos haber puesto una imagen….
Si fuera para la categoría con id 6, pues añadiríamos en el css…
.categoria6 {background:black;}
He vuelto a poner un color cualquier, también podríamos haber puesto una imagen….
Y así sucesivamente.
