Mostrar los logos de marca en el Bloque de Marcas y Bloque de Proveedor de Prestashop

En este tutorial veremos cómo mostrar los logos de marca en el "Bloque de Marcas" y "Bloque de Proveedor" de Prestashop.

Si deseamos mostrar en nuestra tienda los Bloques de Marcas y de Proveedor, sería una buena idea mostrar los logos de éstos, en lugar de mostrar solo el nombre. Mostrando los logos de las marcas daremos a nuestro comercio un pequeño toque de distinción, sobre todo si éstas tienen una buena imagen de marca.

Vamos a ver cómo hacerlo para ambos bloques. Debemos tener en cuenta que lo haremos sobre el tema por defecto de Prestashop, y que los archivos css y .tpl pueden no coincidir con los vuestros.

---

Compatibilidad: Prestashop 1.5 y
Prestashop 1.6

---

Para Prestashop 1.6

Mostrar el logo de marca del Bloque de Fabricante

Para mostrar el logo del fabricante debemos editar el archivo ../prestashop/themes/nuestro-tema/modules/blockmanufacturer/blockmanufacturer.tpl

Una vez tengamos el archivo abierto buscar la línea...

<li class="{if $smarty.foreach.manufacturer_list.last}last_item
{elseif $smarty.foreach.manufacturer_list.first}first_item{else}item{/if}">

<a href="{$link->getmanufacturerLink($manufacturer.id_manufacturer, 
$manufacturer.link_rewrite)|escape:'html':'UTF-8'}" title="{l s='More about %s' mod='blockmanufacturer' sprintf=[$manufacturer.name]}">
{$manufacturer.name|escape:'html':'UTF-8'}
</a>

</li>

...Y añadir esta línea:

<img src="{$base_dir}img/m/{$manufacturer.id_manufacturer}.png"/>

De forma que quede así:

<li class="{if $smarty.foreach.manufacturer_list.last}last_item
{elseif $smarty.foreach.manufacturer_list.first}first_item{else}item{/if}">

<a href="{$link->getmanufacturerLink($manufacturer.id_manufacturer, 
$manufacturer.link_rewrite)|escape:'html':'UTF-8'}" title="{l s='More about %s' mod='blockmanufacturer' sprintf=[$manufacturer.name]}">
{$manufacturer.name|escape:'html':'UTF-8'}
<img src="{$base_dir}img/m/{$manufacturer.id_manufacturer}.png"/>
</a>

</li>

Observar que la imagen tiene la extensión .jpg, si utilizáis una imagen,por ejemplo, de tipo .png solo deberéis cambiar la extensión.

Como último paso para el "Bloque de marcas" vamos a retocar un poco el aspecto y ajustar la anchura de las imágenes mediante el siguiente código css; podemos insertarlo en el archivo ../prestashop/themes/nuestro-tema/css/global.css

div.blockmanufacturer li {padding-left: 0 !important}
div.blockmanufacturer li a:hover {font-weight: normal !important}
div.blockmanufacturer li a img {padding-top:5px; max-width:100%}

Mostrar el logo de marca del Bloque de Proveedores

Para este bloque el procedimiento es muy similar al anterior. Debemos editar el archivo ../prestashop/themes/nuestro-tema/modules/blocksupplier/blocksupplier.tpl

Abrir el archivo y buscar la linea:

<li class="{if $smarty.foreach.supplier_list.last}last_item
{elseif $smarty.foreach.supplier_list.first}first_item{else}item{/if}">
{if $display_link_supplier}

<a href="{$link->getsupplierLink($supplier.id_supplier, 
$supplier.link_rewrite)|escape:'html':'UTF-8'}" 
title="{l s='More about' mod='blocksupplier'}  
{$supplier.name}">
{/if}
{$supplier.name|escape:'html':'UTF-8'}
{if $display_link_supplier}
</a>

{/if}
</li>

Debemos añadir la línea:

<img src="{$base_dir}img/su/{$supplier.id_supplier}.jpg"/>

De forma que quede así:

<li class="{if $smarty.foreach.supplier_list.last}last_item
{elseif $smarty.foreach.supplier_list.first}first_item{else}item{/if}">
{if $display_link_supplier}

<a href="{$link->getsupplierLink($supplier.id_supplier, 
$supplier.link_rewrite)|escape:'html':'UTF-8'}" 
title="{l s='More about' mod='blocksupplier'}  
{$supplier.name}">
{/if}
{$supplier.name|escape:'html':'UTF-8'}
<img src="{$base_dir}img/su/{$supplier.id_supplier}.jpg"/>
{if $display_link_supplier}
</a>

{/if}
</li>

Una vez más, observar que la imagen tiene la extensión .jpg, si utilizáis cualquier otra imagen con una extensión diferente, solo tenéis que cambiar ésta, como por ejemplo, .png o .gif.

Al igual que en el anterior bloque, es recomendable retocar un poco el aspecto y ajustar la anchura de las imágenes mediante este código; al igual que antes, insertarlo en el archivo ../prestashop/themes/nuestro-tema/css/global.css

div.blocksupplier li {padding-left: 0 !important}
div.blocksupplier li a:hover {font-weight: normal !important}
div.blocksupplier li a img {padding-top:5px; max-width:100%}

¡¡¡Y listos, hecho!!! Así os debería quedar:

Para Prestashop 1.5

blockmanufacturer.tpl de Prestashop 1.5

En Prestashop 1.5 hay algunas pequeñas diferencias. Abramos el archivo ../prestashop/themes/nuestro-tema/modules/blockmanufacturer/blockmanufacturer.tpl

Cambiar la línea...

<li class="{if $smarty.foreach.manufacturer_list.last}last_item{elseif $smarty.foreach.manufacturer_list.first}first_item{else}item{/if}">
 <a href="{$link->
    getmanufacturerLink($manufacturer.id_manufacturer,
    $manufacturer.link_rewrite)|escape:'html'}" title="
    {l s='More about' mod='blockmanufacturer'}
    {$manufacturer.name}">
    {$manufacturer.name|escape:'htmlall':'UTF-8'}
    </a>
</li>

...por...

<li class="{if $smarty.foreach.manufacturer_list.last}last_item{elseif $smarty.foreach.manufacturer_list.first}first_item{else}item{/if}">
 <a href="{$link->
    getmanufacturerLink($manufacturer.id_manufacturer,
    $manufacturer.link_rewrite)|escape:'html'}" title="
    {l s='More about' mod='blockmanufacturer'}
    {$manufacturer.name}">
    {$manufacturer.name|escape:'htmlall':'UTF-8'}
    <img src="{$base_dir}img/m/{$manufacturer.id_manufacturer}.jpg"/>
    </a>
</li>

blocksupplier.tpl de Prestashop 1.5

Abramos el archivo ../prestashop/themes/nuestro-tema/modules/blocksupplier/blocksupplier.tpl

Cambiar la línea...

<li class="{if $smarty.foreach.supplier_list.last}last_item{elseif $smarty.foreach.supplier_list.first}first_item{else}item{/if}">
 <a href="{$link->
    getsupplierLink($supplier.id_supplier, 
    $supplier.link_rewrite)|escape:'html'}" title="
    {l s='More about' mod='blocksupplier'} {$supplier.name}
    ">{$supplier.name|escape:'htmlall':'UTF-8'}</a>
</li>

...por...

<li class="{if $smarty.foreach.supplier_list.last}last_item{elseif $smarty.foreach.supplier_list.first}first_item{else}item{/if}">
 <a href="{$link->
    getsupplierLink($supplier.id_supplier,
    $supplier.link_rewrite)|escape:'html'}"
    title="{l s='More about' mod='blocksupplier'}
    {$supplier.name}">
    {$supplier.name|escape:'htmlall':'UTF-8'}
 <img src="{$base_dir}img/su/{$supplier.id_supplier}.jpg"/></a>
</li>

Por último el CSS para los dos bloques:

div.blockmanufacturer li a img {
  padding-top: 5px;
  max-width:100%
}

div.blocksupplier li a img {
  padding-top: 5px;
  max-width:100%
}

div.blocksupplier li a {
  background: none;
}

Así os debería quedar en Prestashop 1.5