Menú lateral, mantenlo abierto al seleccionar una categoría en Prestashop 1.7.X

 Una vez más aquí. Hoy vengo a dejar otro artículo sobre Prestashop que me olvidé de añadir en el artículo Fecha de nacimiento, añade un selector de fecha en Prestashop que publiqué ayer. La cosa es que en las últimas versiones de Prestashop, cuando seleccionas una categoría desde el menú lateral, este se cierra al cargar la categoría. Esto en algunas ocasiones no tiene ninguna importancia, pero cuando tu menú lateral consta de bastantes categorías y subcategorías, esto puede resultar bastante molesto para un potencial cliente. Pues cuando seleccione una de estas categorías, le puede costar saber dónde está situado.

Me imagino que para solucionar esto, habrá algunos buenos módulos, ya que la comunidad de Prestashop suele buscas soluciones a todos los problemas que se puedan plantear. Pero si no quieres añadir nuevos módulos, buscando un poco por la red puedes encontrar la solución. Y esto es lo que a mi me ha ocurrido, ya que me encontré un tutorial el que lo explican de forma bastante clara. Pero como está en inglés, me voy a tomar la libertad de publicarlo en esta web en la forma en la que a mi me servidor.

Configurar el módulo de árbol de categorías en Prestashop para que se mantenga expandido al seleccionar una categoría

Lo primero que quiero dejar claro, es que esto lo he probado en Prestashop 1.7.7.3, pero me imagino que debería funcionar en todas las versiones de Prestashop 1.7.X. También quiero decir que utilicé el tema que viene por defecto con este CMS. Quizás con algunos temas el método no funcione. Dicho esto, vamos a empezar.

Lo primero que tendremos que hacer será dirigirnos al módulo «Enlaces del árbol de categorías» y en la opción «Carpeta raíz», vamos a a seleccionar la opción «Categoría de Inicio», como se puede ver en la siguiente captura de pantalla.

Modificar y añadir una nueva función al archivo /modules/ps_categorytree/ps_categorytree.php

Llegado a este punto, vamos a conectarnos vía FTP a nuestra instalación de Prestashop. Una vez en ella nos tendremos que dirigir a la ruta /modules/ps_categorytree, y en ella vamos a editar el archivo ps_categorytree.php.

Dentro de este archivo tendremos que buscar el siguiente pedazo de código:

return [
'categories' => $this->getCategories($category),
'currentCategory' => $category->id,
];

Una vez localizado, lo vamos a sustituir por este otro código:

$categories = $this->getCategories($category);
return [
'categories' => $categories,
'c_tree_path' => isset($categories['children']) && count($categories['children']) && method_exists($this->context->controller, 'getCategory') && ($curr_category = $this->context->controller->getCategory()) ? self::getTreePath($categories['children'], $curr_category->id) : false,
'currentCategory' => $category->id,
];

Y justo debajo, vamos a añadir una nueva función como la siguiente justo debajo del anterior código:

public static function getTreePath($categories, $id, array $path = [])
{
foreach ($categories as $cate) {
if ($cate['id'] == $id)
return $path;
$path[] = $cate['id'];
if(is_array($cate['children']) && count($cate['children'])) {
if ($result = self::getTreePath($cate['children'], $id, $path))
return $result;
}
array_pop($path);
}
return false;
}

El resultado final en este archivo será como lo que se puede ver en la siguiente captura de pantalla:

Aquí hay que andarse con cuidado con las llaves de cierre. Una vez que el código se vea como en la anterior captura de pantalla, ya podemos guardar y cerrar el archivo, para terminar subiéndolo de nuevo a nuestro hosting.

Modificar el archivo /themes/tu-tema/modules/ps_categorytree/views/templates/hook/ps_categorytree.tpl

Ahora nos vamos a dirigir en nuestro hosting a la carpeta /themes/tu-tema/modules/ps_categorytree/views/templates/hook/ y una vez en ella vamos a editar el archivo ps_categorytree.tpl.

Cuando se edite este archivo, vamos a tener que añadir algún código en ciertas líneas como se puede ver en la siguiente captura de pantalla:

En los puntos 1 y 2, dentro de class vamos a añadir el código:

{if $c_tree_path && !in_array($node.id, $c_tree_path)} collapsed{/if}

En los puntos 3 y 4, el código que vamos a añadir dentro de class será:

 {if $c_tree_path && in_array($node.id, $c_tree_path)} in{/if}

En los puntos 5 y 6, el código que debemos añadir será:

 aria-expanded="{if $c_tree_path && in_array($node.id, $c_tree_path)}true{else}false{/if}"

Y con esto ya se mantendría abierta la categoría al seleccionar una de ellas. Pero no se van a resultar la categoría seleccionada. Para conseguir que se resalte la categoría que seleccionemos, tendremos que añadir el código que se muestra en el punto 7 en la anterior captura de pantalla, dentro de la etiquete li.

 class="{if (isset($category) && is_array($category) && isset($category.id) && $category.id==$node.id) || (isset($id_category_current) && $id_category_current==$node.id)} current_cate {/if}"

Después de colocar el código, guardaremos el archivo. Pero todavía falta colocar el siguiente código CSS en nuestro sitio. Si tu tema no tiene una función de código CSS personalizado, puedes utilizar este módulo gratuito de código personalizado para PrestaShop1.7. Cuando lo tengas instalado, o si utilizas la función de CSS personalizado, el código que debes utilizar para destacar la categoría seleccionada es el siguiente:

.block-categories .category-sub-menu .current_cate > a{color:#E54D46;}

Después de añadir el código CSS, tendremos que guardar el archivo.

Forzar compilación de plantilla

Después de hacer todo lo indicado en este artículo, verás que posiblemente no veas cambio alguno todavía en cuanto a lo de destacar la categoría seleccionada se refiere. Bueno, pues esto tiene fácil solución. Tendremos que dirigirnos al backend de Prestashop, y dirigirnos a la opción «Parámetros avanzados«. Dentro iremos a la opción «Rendimiento» y en la pantalla tendremos que buscar la opción «Smarty«. Aquí encontraremos un desplegable en el que tendremos que seleccionar la opción «Forzar Compilación«.

Tras seleccionar este opción le damos a guardar, y ya deberíamos ver en nuestra tienda la categoría seleccionada destacada, permaneciendo desplegado el menú lateral.