Post Top Ad

Your Ad Spot

miércoles, 26 de agosto de 2020

Agregar subcategorías a la página de categorías en PrestaShop 1.7

¿Le ha preocupado la ausencia de subcategorías en las páginas de categorías de PrestaShop 1.7? ¡Vamos a recuperarlos en unos pocos y sencillos pasos!
Los usuarios de PrestaShop desde hace mucho tiempo siempre han podido mostrar subcategorías en las páginas de categorías, independientemente del tema que usaran. Sin embargo, por alguna razón, PrestaShop 1.7 no parece tener ninguna subcategoría que se muestre en la página con el tema clásico (estándar), lo que dificulta a los usuarios navegar por el catálogo, si el comerciante elige no usar el bloque de categoría lateral o en capas. navegación. Afortunadamente, recuperarlos es bastante fácil y se puede hacer casi simplemente clonando el código de la plantilla de arranque predeterminada 1.6.
Los archivos que necesitamos editar son category.tpl y theme.css , ¡así que vamos a hacerlo!

Agregar el bucle de subcategorías a la plantilla de categoría de PrestaShop 1.7

En el tema clásico, abramos category.tpl , ubicado en themes \ classic \ templates \ catalog \ Listing , debería verse así:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
dieciséis
{extends file='catalog/listing/product-list.tpl'}
{block name='product_list_header'}
    <div class="block-category card card-block hidden-sm-down">
      <h1 class="h1">{$category.name}</h1>
      {if $category.description}
        <div id="category-description" class="text-muted">{$category.description nofilter}</div>
        <div class="category-cover">
          <img src="{$category.image.large.url}" alt="{$category.image.legend}">
        </div>
      {/if}
    </div>
    <div class="text-xs-center hidden-md-up">
      <h1 class="h1">{$category.name}</h1>
    </div>
{/block}
Lo que queremos hacer es agregar el ciclo de subcategoría dentro del bloque, justo antes de que se cierre, es decir, después del div que contiene el título de la categoría. La variable $ subgcategories ya está asignada a la plantilla, al igual que en PrestaShop 1.6, y está lista para usarse:
1
2
3
4
5
6
7
8
<div id="subcategories">
  <p class="subcategory-heading">{l s='Subcategories'}</p>
  <ul class="clearfix">
    {foreach from=$subcategories item=subcategory}
    <li>{$subcategory.name}</li>
    {/foreach}
   </ul>
</div>
El código que acabamos de agregar es bastante inútil en esta etapa, ya que solo imprime el nombre de cada subcategoría, pero primero veamos si funciona. Guarde y actualice cualquier categoría que tenga hijos, y las subcategorías deberían aparecer así:
Añadiendo subcategorías a prestashop 1.7
¡Agradable! No hagamos que nuestro esfuerzo sea útil vinculándolos a las páginas adecuadas
1
2
3
4
5
6
7
8
9
10
<div id="subcategories">
  <p class="subcategory-heading">{l s='Subcategories'}</p>
  <ul class="clearfix">
    {foreach from=$subcategories item=subcategory}
    <li>
        <h5><a class="subcategory-name" href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'html':'UTF-8'}">{$subcategory.name|truncate:25:'...'|escape:'html':'UTF-8'}</a></h5>
    </li>
    {/foreach}
   </ul>
</div>
Explicación: Copié y pegué el código de 1.6 para el título de la categoría, simplemente envolví el nombre en una etiqueta h5, luego un ancla apuntando a la página adecuada. Para obtener la URL, todavía podemos usar la clase $ link y su método getCategoryLink . También dejé el modificador truncar para el nombre, que lo corta a la longitud de 25 caracteres, y finalmente lo escapé.
¡En este punto son al menos útiles! Pero, ¿por qué no seguimos adelante y agregamos la imagen también? Hagámoslo justo antes del h5:
1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="subcategories">
  <p class="subcategory-heading">{l s='Subcategories'}</p>
  <ul class="clearfix">
    {foreach from=$subcategories item=subcategory}
    <li>
        <a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'html':'UTF-8'}" title="{$subcategory.name|escape:'html':'UTF-8'}" class="img">
            <img class="replace-2x" src="{$urls.base_url}img/c/{$subcategory.id_category}.jpg" alt="{$subcategory.name|escape:'html':'UTF-8'}"  />
        </a>
        <h5><a class="subcategory-name" href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'html':'UTF-8'}">{$subcategory.name|truncate:25:'...'|escape:'html':'UTF-8'}</a></h5>
    </li>
    {/foreach}
   </ul>
</div>
Explicación: una vez más, estamos usando el método de la clase de enlace para obtener la URL correcta que apunta a la subcategoría; luego, simplemente agregamos una etiqueta img, apuntando directamente a la carpeta de imágenes de categoría, ya que cada una de ellas tiene una imagen nombrada con el ID correspondiente. ¡Pero cuidado ! No tenemos forma de verificar si la categoría tiene una imagen o no, y dado que el método predeterminado que usa este tema está roto (jeje), es mejor que te salgas con la tuya sin imágenes.
En este punto, debería tener algo como esto, dependiendo del tamaño de sus imágenes:
Agregar subcategorías con imágenes a Prestashop 1.7
Necesita algo de estilo, ¡así que veamos qué podemos hacer con CSS!

Subcategorías de estilo en PrestaShop 1.7

Abra theme.css , ubicado en themes \ classic \ assets \ css . Al final, agreguemos nuestro código CSS:
1
2
3
4
5
6
7
8
9
10
11
.subcategory-heading {
  font-weight: bold;
}
#subcategories ul li {
  float: left;
  width: 25%;
  text-align: center;
}
#subcategories ul li img {
  margin-bottom: 10px;
}
Preferí quedarme con un estilo simple aquí y, por supuesto, deberá adaptar el ancho según el tamaño de imagen de su categoría. Además, es posible que desee agregar consultas de medios para asegurarse de que se muestre bien en resoluciones más pequeñas.
Guarde y actualice, ¡hemos terminado!
Agregar subcategorías con imágenes a Prestashop 1.7 - Resultado final

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas