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