Mostrar marcas con índice alfabético en Prestashop 1.7

Desarrollo web, Prestashop | 0 Comentarios

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.

Así es la página de cada marca.

Probado en Prestashop 1.7.5.1

¿Qué te ha parecido?
Puntuación: 0 - Votos: 0

0 comentarios

Enviar un comentario

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

Suscríbete para no perderte nada

¿Buscas algo?

Categorías

¿Nos seguimos?

Últimas publicaciones

brandinàmic. El Marketing cercano.

brandinàmic. El Marketing cercano.

Os invitamos que leáis esta interesante entrevista que nos hicieron para conocernos más en profundidad. https://www.prontopro.es/blog/marketing-digital-con-transparencia-y-cercania/.

Claves para la transformación digital

Claves para la transformación digital

Cuando hablamos de transformación digital, nos referimos a ese proceso de replantear el modelo de negocio de una empresa para optimizar el funcionamiento con tecnología. Es decir, transformar aquellos procesos tediosos e ineficaces en automatismos tecnológicos. Esto...

Genera engagement en tu estrategia de marketing digital

Genera engagement en tu estrategia de marketing digital

En el mundo digital, hay muchísimas empresas que están presentes y se dedican a lo mismo que tú. Dependiendo del nicho en el que te encuentres la competencia será mayor o menor, pero a estas alturas es raro que una empresa no disponga de una web o no tenga un perfil...