Mostrar marcas con índice alfabético en Prestashop 1.7

Contenidos

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í:

Mostrar marcas con índice alfabético en Prestashop 1.7 1

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:

Mostrar marcas con índice alfabético en Prestashop 1.7 2

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)

Mostrar marcas con índice alfabético en Prestashop 1.7 3

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}
Mostrar marcas con índice alfabético en Prestashop 1.7 4

Luego nos vamos a nuestro archivo theme.css que se encuentra en themes > (Nombre de nuestro tema p.ej: classic) > assets > css > theme.css

Mostrar marcas con índice alfabético en Prestashop 1.7 5

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.

Mostrar marcas con índice alfabético en Prestashop 1.7 6
Así es la página de cada marca.

Probado en Prestashop 1.7.5.1

¡Comparte!

Share on facebook
Facebook
Share on twitter
Twitter
Share on pinterest
Pinterest
Share on linkedin
LinkedIn
¿Qué te ha parecido?
Puntuación: 0 - Votos: 0

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *