Cómo agregar las subcategorías en la página de una categoría en PrestaShop 1.7

¿Necesitas agregar las subcategorías en la página de categorías de tu tienda PrestaShop? Has llegado al lugar adecuado. En este tutorial te vamos a explicar brevemente como agregar las subcategorías en la página de categorías sin mucho esfuerzo y solo modificando archivos del tema activo.

Utilizando la plantilla por defecto en PrestaShop 1.6 estoy seguro que podías visualizar las subcategorías en la página de una categoría padre pero, por algún motivo que desconocemos PrestaShop 1.7 ya no muestra las subcategorías en la página de una categoría. El listado de subcategorías no aparece o, más bien, no está presente en el código.

No debes preocuparte mucho por esto. Hay una solución sencilla y rápida sin modificar el Core de PrestaShop, ya que el controlador de la categoría proporciona un array de las subcategorías a la plantilla.

Entonces, solo tienes que modificar un archivo category-header.tpl del tema activo que está situado en:

\themes\classic\templates\catalog\_partials\category-header.tpl

En el lugar más deseado agrega el siguiente código smarty:

Source code

{if isset($subcategories) AND $subcategories}
    <!-- Subcategories -->
    <div id="subcategories">
        <p class="subcategory-heading">{l s='Subcategories'}</p>
        <ul class="row">
            {foreach from=$subcategories item=subcategory}
                <li class="col-lg-2">
                    <div class="subcategory-image">
                        <a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'html':'UTF-8'}" title="{$subcategory.name|escape:'html':'UTF-8'}" class="img">
                            {if $subcategory.id_image}
                                <img class="img-fluid" src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'category_default')|escape:'html':'UTF-8'}" alt="{$subcategory.name|escape:'html':'UTF-8'}"/>
                            {else}
                                <img class="img-fluid" src="{$img_cat_dir}{$lang_iso}-default-category_default.jpg" alt="{$subcategory.name|escape:'html':'UTF-8'}"/>
                            {/if}
                        </a>
                    </div>
                    <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>
{/if}

Ahora solo queda agregar un poco de estilo en alguna de las hojas de estilo que trae el tema activo. La plantilla por defecto, el tema «classic», dispone de un archivo para agregar estilos personalizados. Este archivo viene vacío y se puede emplear para agrega los estilos de tu personalización. En el tema «classic» lo puedes localizar en:

\themes\classic\assets\css\custom.css

En él agrega lo siguiente:

Source code

#subcategories ul li .subcategory-image {
    margin-bottom: 7px;
}
 
#subcategories ul li .subcategory-image a {
    display: block;
    border: 1px solid #d6d4d4;
}
 
#subcategories h5 {
    text-align: center;
}

Con tan solo esto, puedes obtener como resultado:

Si has ejecutado todo los pasos de este tutorial y no consigues ver las subcategorías en tu tienda puede ser por los siguientes motivos:

• La categoría que estás visualizando no tiene subcategorías.
• Los parámetros de rendimiento están activados en tu tienda. Limpia la caché de tu tienda para reflejar los cambios. En parámetros avanzados – Rendimientos hay un botón para limpiar la caché de tu tienda.
• Si todavía no lo consigues, limpia la caché y el historial de tu navegador.

Si te ha servido este tutorial, no dudes en hacerte fan en las redes sociales de este blog situadas en el pie de página y si tienes dudas o preguntas no dudes en enviar tu comentario.