Modificar Blocktopmenu en Prestashop – Mostrar categorías principales en versión responsive

Buenas, una de las tareas que me ha llevado mucho tiempo ha sido la reducción del árbol mostrado en el navegador de categorías para la versión responsive.

Al final he conseguido finalizar dicha tarea de la manera menos esperada, pero efectiva.

El menú superior mostrado en la tienda prestashop corresponde al módulo Blocktopmenu, así que mi labor de investigación fue ver qué había exactamente en archivo Blocktopmenu.tpl del theme que estaba usando.

{if $MENU != ''}
    </div>
<script src="{$js_dir}modules/blocktopmenu/js/selectnav.js" type="text/javascript"></script>
{literal}
    <script type="text/javascript">
        $(document).ready(function() {
            selectnav('mega-menu-resp', {
                label: 'Menu',
                nested: true,
                indent: '-'
            });
        });
    </script>
{/literal}
    <!-- Menu -->
    <div id="tptntopmenu">
    <div>
        <ul id="mega-menu-1">
            {$MENU}
        </ul>
        <ul id="mega-menu-resp">
            {$MENU}
        </ul>
    </div>
    <!--/ Menu -->
{/if}

Lo primero que vi es que se carga la variable $menu de manera diferente para ‘mega-menu-1’ y ‘mega-menu-resp’, lo que me llevó a pensar que podría modificar el listado mostrado yendo al punto donde se asigna el valor y haciendo algo del estilo $menu_resp para la versión responsive pero que no llegara a tanta profundidad de detalle como el menú original.

El problema de este método es que encontrar el punto de creación de ese menú no fue sencillo, así que aún pensando que esa sería la solución a tomar finalmente, me puse con otras fórmulas.

La siguiente fórmula era usar CSS para la ocultación del código. No parece mala idea, de hecho fue la recomendación de los autores originales del código, así que me puse a mirar cómo alterar sólo ese punto, ocultando las subcategorías.

El problema que tuve aquí fue un error mío de interpretación, ya que pensé que estaría haciendo listas de tipo

<ul style="display: none;">
<div>
  <li><a href="hijo1"</a>
    <ul>
      <li><a href="hijo1_1</a></li>
      <li><a href="hijo1_2"></a></li>
    </ul>
  </li>
  <li><a href="hijo2"</a>
   <ul>
     <li><a href="hijo2_1</a></li>
     <li><a href="hijo2_2"></a></li>
   </ul>
  </li>
</div>

Con las listas anidadas, sin embargo, resulta que para la versión responsive el menú se inserta dentro de un select.

Pero antes de intentar afrontar el uso de CSS para ocultar los valores del select, he vuelto a echar un ojo al código original de la plantilla blocktopmenu.tpl y resulta que ahí estaba la solución.

Tan visible y tan oculta por falta de documentación.

La solución es tan simple como:

    <script type="text/javascript">
        $(document).ready(function() {
            selectnav('mega-menu-resp', {
                label: 'Menu',
                nested: false,
                indent: '-'
            });
        });
    </script>

Cambiando el valor de nested a false se acorta automáticamente el árbol de navegación del menú superior y aparecen únicamente las categorías padres.

Después de varios días buscando información en foros, e incluso pidiendo ayuda en el foro de Prestashop, no pude encontrar la solución.

A veces el azar guarda este tipo de sorpresas.

No dejes de visitar otros enlaces interesantes relacionados con Prestashop:

Exportar productos con imagen en Prestashop

SEO en Prestashop: url=’canonical’