Cómo añadir un menú personalizado autoadministrable

Por: Damian Horn
Creado el 04/08/14.
Actualizado el 17/01/18.
5 min
de lectura

Índice

Cómo añadir un menú personalizado autoadministrable

Inauguramos una nueva iniciativa orientada a ayudar a los diseñadores que eligen Tiendanube para trabajar con sus clientes (y también a nuestros clientes) a implementar algunos cambios mediante diseño a medida. En esta nueva serie de posts vamos a dar tips y consejos para que un diseñador pueda aplicar sus diseños a nuestras plantillas.

¿Nunca diseñaste sobre Tiendanube? No te preocupes, es muy sencillo. Si eres diseñador y cuentas con conocimientos de HTML y CSS ya estás listo para arrancar con Twig, la herramienta de creación de plantillas que utilizamos en Tiendanube.

En esta ocasión, te vamos a enseñar a crear menúes personalizados que luego puedan ser editados desde el administrador de Tiendanube.

Supongamos que queremos agregar un nuevo menú al footer de la tienda para que luego pueda ser editado por cualquier persona sin conocimientos técnicos. En primer lugar, vamos a tener que crear un nuevo menú en nuestra tienda. Para esto, desde el administrador de nuestra tienda, debemos ingresar a la sección “Diseño / Menúes”. Una vez ahí creamos un nuevo menú.

Crear nuevo menú

¡Importante! Recuerda el “nombre_menu” que selecionaste para luego referenciarlo en el código.

Segundo, en la parte del código que queremos (puede ser en layout.tpl o en el template correspondiente a alguna de las páginas) agregamos lo siguiente:


<ul>
{% for item in menus.nombre_menu %}
<li>
<a href=”{{ item.url }}” {% if item.url | is_external %}target=”_blank”{% endif %}>{{ item.name }}</a>
</li>
{% endfor %}
</ul>

Este es el código completo que precisamos agregar, no necesitaremos nada más que esto. Recuerda que en caso de querer aplicar estilos sobre este menú, podrás hacerlo luego desde el .css.

Entendiendo el código parte por parte

Por un lado, {% for item in menus.nombre_menu %} … {% endfor %} nos indica que ahí se van a cargar todo los ítems que pertenecen a ese menú (nombre_menu) y que carguemos en el admin.

Y vamos a agregar solo un <li> con un solo <a> que luego va a repetirse mediante un loop. Como se ve en el ejemplo, los <ul></ul> van por fuera para evitar que se repitan dentro de este loop.

<li>
<a href=”{{ item.url }}” {% if item.url | is_external %}target=”_blank”{% endif %}>{{ item.name }}</a>
</li>

Dentro de esa estructura vamos a encontrar:

  • {{ item.url }} →  hace referencia a la URL de ese ítem.
  • {{% if item.url | is_external %}target=”_blank”{% endif%}  →  Si utilizamos un link fuera de nuestra tienda esto va a generar que se abra en una nueva ventana.
  • {{ item.name }} →  Es el nombre de nuestro link. 

¡Esperamos que les sea útil!

Damian Horn

Diseñador Gráfico de la Universidad de Buenos Aires con más de 10 años de experiencia diseñando y desarrollando productos digitales. Actualmente es Head of Design en Tiendanube donde lidera al equipo encargado de mejorar la experiencia para los usuarios de la plataforma.


    Registrate gratis

    Recibí artículos sobre marketing y emprendedurismo directamente en tu email.

    Es hora de pasar a la acción

    +15 mil alumnos de la Universidad ya potenciaron sus negocios con Tiendanube.

    Probá 15 días gratis

    Vos también podés hacer crecer tu negocio

    Creá tu tienda online con Tiendanube y como ellos, vendé de manera profesional.

    Honky Tonk - www.honkytonkshop.com
    Unibow - www.unibow.com.ar
    Zaira - www.zairabeauty.com.ar
    Probar 15 días gratis
    cmo-aadir-un-men-personalizado-autoadministrable