{"id":7240,"date":"2019-03-12T17:00:19","date_gmt":"2019-03-12T17:00:19","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=7240"},"modified":"2019-03-12T17:00:19","modified_gmt":"2019-03-12T17:00:19","slug":"como-agregar-las-subcategorias-en-la-pagina-de-una-categoria-en-prestashop-1-7","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/como-agregar-las-subcategorias-en-la-pagina-de-una-categoria-en-prestashop-1-7\/","title":{"rendered":"C\u00f3mo agregar las subcategor\u00edas en la p\u00e1gina de una categor\u00eda en PrestaShop 1.7"},"content":{"rendered":"

\u00bfNecesitas agregar las subcategor\u00edas<\/strong> en la p\u00e1gina de categor\u00edas de tu tienda PrestaShop<\/strong>? Has llegado al lugar adecuado. En este tutorial te vamos a explicar brevemente como agregar las subcategor\u00edas<\/strong> en la p\u00e1gina de categor\u00edas sin mucho esfuerzo y solo modificando archivos del tema activo.<\/p>\n

Utilizando la plantilla por defecto en PrestaShop<\/strong> 1.6 estoy seguro que pod\u00edas visualizar las subcategor\u00edas<\/strong> en la p\u00e1gina de una categor\u00eda padre pero, por alg\u00fan motivo que desconocemos PrestaShop<\/strong> 1.7 ya no muestra las subcategor\u00edas<\/strong> en la p\u00e1gina de una categor\u00eda. El listado de subcategor\u00edas<\/strong> no aparece o, m\u00e1s bien, no est\u00e1 presente en el c\u00f3digo.<\/p>\n

No debes preocuparte mucho por esto. Hay una soluci\u00f3n sencilla y r\u00e1pida sin modificar el Core de PrestaShop,\u00a0<\/strong>ya que el controlador de la categor\u00eda proporciona un array de las subcategor\u00edas<\/strong> a la plantilla.<\/p>\n

Entonces, solo tienes que modificar un archivo category-header.tpl<\/em> del tema activo que est\u00e1 situado en:<\/p>\n

\\themes\\classic\\templates\\catalog\\_partials\\category-header.tpl<\/em><\/p>\n

En el lugar m\u00e1s deseado agrega el siguiente c\u00f3digo smarty<\/strong>:<\/p>\n

<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
{<\/span>if<\/span><\/a> isset<\/span>(<\/span>$subcategories<\/span>)<\/span> AND $subcategories<\/span>}<\/span>\n    <!-- Subcategories --><\/span>\n    <div id="subcategories"><\/span>\n        <p class="subcategory-heading"><\/span>{<\/span>l s=<\/span>'Subcategories'<\/span>}<\/span><\/p><\/span>\n        <ul class="row"><\/span>\n            {<\/span>foreach<\/span><\/a> from<\/span>=<\/span>$subcategories<\/span> item<\/span>=<\/span>subcategory}<\/span>\n                <li class="col-lg-2"><\/span>\n                    <div class="subcategory-image"><\/span>\n                        <a href="{$link-><\/span>getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'html':'UTF-8'}" title="{<\/span>$subcategory<\/span>.name<\/span>|escape:'html'<\/span>:'UTF-8'<\/span>}<\/span>" class="img">\n                            {<\/span>if<\/span><\/a> $subcategory<\/span>.id_image<\/span>}<\/span>\n                                <img class="img-fluid" src="{$link-><\/span>getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'category_default')|escape:'html':'UTF-8'}" alt="{<\/span>$subcategory<\/span>.name<\/span>|escape:'html'<\/span>:'UTF-8'<\/span>}<\/span>"\/>\n                            {<\/span>else<\/span><\/a>}<\/span>\n                                <img class="img-fluid" src="{$img_cat_dir}{$lang_iso}-default-category_default.jpg" alt="{$subcategory.name|escape:'html':'UTF-8'}"\/><\/span>\n                            {<\/span>\/<\/span>if<\/span><\/a>}<\/span>\n                        <\/a><\/span>\n                    <\/div><\/span>\n                    <h5><a class="subcategory-name" href="{$link-><\/span>getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'html':'UTF-8'}">{<\/span>$subcategory<\/span>.name<\/span>|truncate:25<\/span>:'...'<\/span>|escape:'html'<\/span>:'UTF-8'<\/span>}<\/span><\/a><\/h5><\/span>\n                <\/li><\/span>\n            {<\/span>\/<\/span>foreach<\/span><\/a>}<\/span>\n        <\/ul><\/span>\n    <\/div><\/span>\n{<\/span>\/<\/span>if<\/span><\/a>}<\/span><\/pre><\/div><\/div>\n
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 \u00abclassic\u00bb, dispone de un archivo para agregar estilos personalizados. Este archivo viene vac\u00edo y se puede emplear para agrega los estilos de tu personalizaci\u00f3n. En el tema \u00abclassic\u00bb lo puedes localizar en:<\/p>\n
\\themes\\classic\\assets\\css\\custom.css<\/em><\/p>\n
En \u00e9l agrega lo siguiente:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
#subcategories<\/span> ul li .subcategory-image<\/span> {<\/span>\n    margin-bottom<\/span>:<\/span> 7px<\/span>;<\/span>\n}<\/span>\n \n#subcategories<\/span> ul li .subcategory-image<\/span> a {<\/span>\n    display<\/span>:<\/span> block<\/span>;<\/span>\n    border<\/span>:<\/span> 1px<\/span> solid<\/span> #d6d4d4<\/span>;<\/span>\n}<\/span>\n \n#subcategories<\/span> h5 {<\/span>\n    text-align<\/span>:<\/span> center<\/span>;<\/span>\n}<\/span><\/pre><\/div><\/div>\n
Con tan solo esto, puedes obtener como resultado:<\/p>\n
\"Subcategor\u00edas<\/a><\/p>\n
Si has ejecutado todo los pasos de este tutorial y no consigues ver las subcategor\u00edas<\/strong> en tu tienda puede ser por los siguientes motivos:<\/p>\n