Documentación para Diseñadores

Crea tus propias plantillas en Tienda Nube

¿Cómo muestro y edito el menú de navegación?

Desde el adminitrador de tu tienda puedes crear menúes para incluir links a tus categorías, páginas de contenido, links externos, etc.

Estos menúes pueden ser indepentiendes o incluirse como submenúes de otros menúes.

Puedes acceder a los diferentes menúes desde la variable 'menus'.

Por ejemplo, un menú titulado “Footer” puede ser accedido desde menus.footer y contiene objetos de tipo Navigation_Item. Hay un menú principal que no puede ser borrado y siempre se encuentra disponible en la variable navigation.

Para poder tener un menú con submenúes, y que estos submenúes puedan a su vez tener sus propios submenúes, recomendamos usar un snipplet que se incluya a si mismo.

Ejemplo de un snipplet navigation.tpl:

{% for item in navigation %}
    <ul class="menu">
        {% for item in navigation %}
            <li><a href="{{ item.url | default('#') }}" class="{{ item.current ? 'selected' : '' }}" {% if item.url | is_external %}target="_blank"{% endif %}>{{ item.name }}</a>
            {% snipplet "navigation.tpl" with navigation = item.subitems %}
            </li>
        {% endfor %}
    </ul>
{% endfor %}

Para los elementos de la navegación que son menúes y no tienen una url asignada, podemos capturar el click por javascript para que no haga nada. Desde layout.tpl:

$('.menu a[href=#]').click(function(){
    return false;
});

Otra ventaja de usar este snipplet es que puedes reutilizarlo si quieres agregar un menú independiente.

Por ejemplo, si tienes un menú titulado “Footer”, puedes incluirlo en tu diseño con sólo agregar la siguiente línea a layout.tpl:

{% snipplet "navigation.tpl" with navigation = menus.footer %}

Si quieres permitir que tu cliente pueda elegir un menú sin obligarlo a usar un nombre fijo, puedes usar un setting

Sin compromiso de compra ni estadía mínima. No hay costo de registro o cancelación.