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ú.
¡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!