En una tienda online en la que hay varias marcas es muy útil tener una página a modo de directorio para que el usuario pueda ir directamente a la marca que está buscando, Prestashop crea está página por defecto, pero si le has echado un vistazo es posible que hayas pensado: “Sería más útil si tuviera un filtro alfabético para poder buscar por su inicial”. ¡En esta entrada te contamos como hacerlo!
Lá página de marcas por defecto es así:
Esta solución la ha proporcionado el usuario “Nemo” en la comunidad de Prestashop. Y ha sido traducido por Victor Ródenas. A nosotros nos ha servido de mucha ayuda y queremos compartirlo con vosotros!
Esto nos permite mostrar la página con el listado de marcas por orden alfabético, muy práctico a nivel de usuario y necesario para una tienda online con muchas marcas. El resultado sería este:
Nos vamos al fichero -> /templates/catalog/brands.tpl (es el archivo que contiene cómo se visualiza el listado de fabricantes en Prestashop 1.7)
Cambiamos su contenido por el siguiente:
{extends file=$layout}
{block name='content'}
<section id="main">
{block name='brand_header'}
<h1>{l s='Brands' d='Shop.Theme.Catalog'}</h1>
{/block}
{block name='brand_miniature'}
<div class="all-brands">
<div class="all-brands">
<ul class="letter-select clearifx">
<li><a href="#letter_0">#</a></li>
<li><a href="#letter_A">A</a></li>
<li><a href="#letter_B">B</a></li>
<li><a href="#letter_C">C</a></li>
<li><a href="#letter_D">D</a></li>
<li><a href="#letter_E">E</a></li>
<li><a href="#letter_F">F</a></li>
<li><a href="#letter_G">G</a></li>
<li><a href="#letter_H">H</a></li>
<li><a href="#letter_I">I</a></li>
<li><a href="#letter_J">J</a></li>
<li><a href="#letter_K">K</a></li>
<li><a href="#letter_L">L</a></li>
<li><a href="#letter_M">M</a></li>
<li><a href="#letter_N">N</a></li>
<li><a href="#letter_O">O</a></li>
<li><a href="#letter_P">P</a></li>
<li><a href="#letter_Q">Q</a></li>
<li><a href="#letter_R">R</a></li>
<li><a href="#letter_S">S</a></li>
<li><a href="#letter_T">T</a></li>
<li><a href="#letter_U">U</a></li>
<li><a href="#letter_V">V</a></li>
<li><a href="#letter_W">W</a></li>
<li><a href="#letter_X">X</a></li>
<li><a href="#letter_Y">Y</a></li>
<li><a href="#letter_Z">Z</a></li>
</ul>
<div class="brands-by-letter">
{$current_letter = '#'}
{foreach from=$brands item=brand}
{$first_letter = $brand.name|substr:0:1}
{if $current_letter != $first_letter}
{if !$first_letter|in_array:['0','1','2','3','4','5','6','7','8','9']}
{$current_letter = $first_letter|upper}
</div>
</div>
{/if}
<div class="box-letter clearfix" id="letter_{if $current_letter == '#'}0{else}{$current_letter|upper}{/if}">
<div class="box-title">{$current_letter|upper}</div>
<div class="letter-content">
{/if}
<p>
<a href="{$link->getManufacturerLink($brand.id_manufacturer)}">{$brand.name}</a>
</p>
{/foreach}
</div>
</div>
</div>
</div>
{/block}
</section>
{/block}
Luego nos vamos a nuestro archivo theme.css que se encuentra en themes > (Nombre de nuestro tema p.ej: classic) > assets > css > theme.css
Y pegamos este código al final del archivo:
/* Estilo Listado Fabricantes
Traducción del tutorial al Español por victor-rodenas.com
Tutorial original en: nemops.com
*/
.all-brands .letter-select li {
float:left;
}
.all-brands .letter-select a {
padding: 11px;
font-weight: bold;
font-size: 14px;
display:block;
}
.all-brands .box-letter .box-title {
width: 100%;
display:block;
background: #ccc;
font-weight: bold;
height: 40px;
line-height: 40px;
padding-left: 10px
}
.all-brands .box-letter .letter-content {
line-height: 32px;
padding-left: 10px
}
.all-brands .box-letter p {
margin-bottom: 0;
float: left;
width: 25%;
}
.brands-by-letter {clear:both;}¡Ya está listo! Nos vamos a la página de marcas y podemos ver el resultado.
Probado en Prestashop 1.7.5.1
