Inicio Informática Menú lateral, mantenlo abierto al seleccionar una categoría en Prestashop 1.7.X
about menú lateral prestashop

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

por entreunosyceros
Publicado el: Última actualización:

 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.

configuración enlaces del árbol de categorías

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:

modificación categorytree.php

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:

archivo categorytree.tpl modificado

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

forzar compilación de la plantilla de Prestashop 1.7.X

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«.

menú lateral abriendose

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.


También te puede interesar ...

4 Comentarios

Javier 11 junio, 2021 - 5:06 PM

Muchas gracias, me ha servido era algo muy necesario.
Lo único que no acabo de entender es:

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;}

No entiendo que tengo que hacer, me lo puedes explicar?

Responder
entreunosyceros 12 junio, 2021 - 1:50 AM

Hola. Lo que quería decir es que necesitas colocar ese código css en un interprete de css que tengas disponible en tu instalación de prestashop. Si no tienes un interprete de css instalado, puedes utilizar el que puse en el enlace que aparece en el post. Y con ello debería aparecer destacada en rojo (me parece recordar) la categoría seleccionada.
Espero haberte ayudado. Cualquier cosa, vuelve a dejar un comentario o utiliza el formulario de contacto de la web. Salu2.

Responder
Maru 19 abril, 2021 - 1:33 PM

Me sirvió en PrestaShop 1.7.6, era algo muy molesto. Gracias x compartirlo

Responder
entreunosyceros 19 abril, 2021 - 8:03 PM

Me alegro que te fuese útil. Salu2.

Responder

Deja tu comentario

* Al utilizar este formulario, acepta que este sitio web almacene y maneje sus datos.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.