04/08/2014

Cómo añadir un menú personalizado autoadministrable

Cómo añadir un menú personalizado autoadministrable

Inauguramos una nueva iniciativa orientada a ayudar a los diseñadores que eligen Tienda Nube 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 Tienda Nube? 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 Tienda Nube.

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

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!

Fecha de la última actualización: 17/01/2018


¿Te gustó el contenido?


Damian Horn

Damián Horn es Diseñador Gráfico de la UBA. Es un apasionado del front-end y también del deporte. Juega al básquet desde los 5 años y no puede pasar una semana sin ver un partido. Forma parte del equipo de Producto de Tienda Nube como UX Designer. @Damian_Horn


    Ecommerce por Expertos

    Conversaciones exclusivas con especialistas en comercio electrónico. ¡Llevá tu negocio a otro nivel!

    cmo-aadir-un-men-personalizado-autoadministrable