Cómo agregar navegación anidada a los temas de Shopify

En este artículo discutiremos cómo implementar un sistema de navegación multinivel totalmente gestionado por contenido dentro de un Shopify tema.

Uso de temas de Shopify Líquido, un lenguaje de plantilla potente y flexible, para generar datos de una tienda en una plantilla. Si no está familiarizado con Liquid y la creación de temas de Shopify en general, le recomiendo que consulte el sitio oficial. Documentación del tema de Shopify.

https://www.youtube.com/watch?v=6bfaTDCNZus

Empezando

Si alguna vez ha trabajado con plataformas como WordPress, es posible que esté familiarizado con las interfaces de administración que le permiten crear una navegación de varios niveles. Cuando se imprimen en un archivo de plantilla, a menudo resultan en una lista desordenada anidada que, usando CSS, podemos diseñar en una variedad de patrones de diseño. Por ejemplo, un menú desplegable o un menú de la barra lateral que revela un filtrado más detallado cuando se hace clic o se coloca el cursor sobre los menús de nivel superior. Todos los enfoques nos dan la capacidad de ofrecer una navegación más profunda en nuestros sitios sin demasiadas complicaciones.

Al inspeccionar por primera vez la función de navegación en Shopify, podría pensar que no nos ofrece esta capacidad. Sin embargo, armados con un poco de conocimiento de Liquid, podemos lograr fácilmente menús de varios niveles en nuestros temas. Mediante el uso de la funcionalidad de navegación, podemos ofrecer a nuestros clientes una manera fácil de administrar sus menús mientras nos brindamos, como diseñadores de temas, las listas desordenadas anidadas deseadas para el estilo CSS.

Nuestro objetivo en este tutorial es crear una lista desordenada anidada que podamos controlar completamente desde el área de administración de Shopify y que estos cambios se reflejen en nuestra tienda.

Y aquí está el resultado final:

<ul>
<li><a href="https://www.webdesignerdepot.com/">Home</a></li>
<li><a href="http://www.webdesignerdepot.com/collections/cups">Coffee Cups</a>
<ul>
<li><a href="http://www.webdesignerdepot.com/products/edible-coffee-cup">Edible Coffee Cup</a></li>
<li><a href="http://www.webdesignerdepot.com/products/moustache-mug">Moustache Mug</a></li>
</ul>
</li>
<li><a href="http://www.webdesignerdepot.com/collections/all">All Products</a></li>
<li><a href="http://www.webdesignerdepot.com/pages/about">About</a></li>
<li><a href="http://www.webdesignerdepot.com/blogs/news">Blog</a></li>
</ul>

A diferencia de otras plataformas, Shopify no tiene la opción de tener un «súper menú» en el que podamos anidar los elementos de nuestro submenú. Dicho esto, no es un procedimiento complicado hacer que esto funcione. Siguiendo una convención de nomenclatura simple, es posible generar estructuras de menú de varios niveles.

Si desea codificar junto con el tutorial, la forma más sencilla de hacerlo es registrarse para obtener una Socio de Shopify cuenta y cree una «tienda de desarrollo» gratuita. Estos tienen todas las funciones y le permiten probar su tema antes de entregárselo a su cliente o abrir su propia tienda.

Puede probar los ejemplos de código en cualquiera de las plantillas en su carpeta de temas «plantillas» de temas, o alternativamente, recomendaría usar el archivo de diseño predeterminado de temas theme.liquid ya que esto significará que su código aparecerá por defecto en cada página.

Creando menús

Comencemos por crear un nuevo menú, nuestro menú principal, dirigiéndonos a la pestaña Navegación en el administrador de Shopify. Para crear un menú, debemos abrir la interfaz de administración de Shopify y dirigirnos a la pestaña «Navegación» en el lado izquierdo.

Todas las tiendas tienen un menú predeterminado predefinido llamado «Menú principal». Para agregar elementos a la lista, simplemente haga clic en el botón «agregar otro vínculo» y asigne a su nuevo elemento un «nombre de vínculo» y un destino. El menú desplegable de selección le permitirá vincular fácilmente a secciones internas, como un producto o colección en particular. Alternativamente, puede ingresar su propia URL (ya sea interna o externa) eligiendo «dirección web» de las opciones.

Es fácil crear y editar menús en el administrador de Shopify.

Una vez que tengamos esto en su lugar, podemos comenzar a considerar el código Liquid que necesitaremos para generarlo en nuestro tema.

Para generar el menú en nuestro archivo de tema, necesitaremos conocer el «identificador» del menú. Los identificadores son identificadores únicos dentro Shopify para productos, colecciones, listas de enlaces (el término utilizado para los menús en los temas de Shopify) y páginas. Por lo general, son versiones seguras de URL del nombre o título del artículo. Por ejemplo, el menú principal daría como resultado un identificador de menú principal. Si bien se generan automáticamente, puede cambiarlos si lo desea a través de la interfaz de administración.

Nuestro menú principal predeterminado incluye un enlace a la colección Coffee Cups.

Navegación de un solo nivel

Comencemos generando todos los elementos de nuestro «menú principal». Para hacer esto, podemos usar un simple «bucle for» para generar todos los elementos de la lista de enlaces a su vez, así es como:

<ul>
{% for link in linklists.main-menu.links %}
<li><a href="https://www.webdesignerdepot.com/2014/06/how-to-add-nested-navigation-to-shopify-themes/{{ link.url" escape }}">{{ link.title | escape }}</a></li>
{% endfor %}
</ul>

Echemos un vistazo a esto con más detalle. Después de abrir nuestro

iniciamos nuestro Liquid «for loop». Esto generará todos los elementos contenidos en la lista de enlaces del «menú principal». La sintaxis es un poco larga aquí, pero todo lo que realmente estamos haciendo es asignar las propiedades de cada elemento en nuestra lista de enlaces a la variable Enlace. Usando esta variable podemos acceder a las propiedades de nuestros elementos de menú, en este caso url y título.

Para generar la URL y las propiedades del título, utilizamos la sintaxis de salida líquida de llaves dobles, p. Ej. {{}}. En nuestro ejemplo anterior {{ URL del enlace }} generará la URL que ingresamos o generamos en el administrador y {{link.title}} generará el texto que atribuimos al enlace.

Probablemente habrás notado la | escapar sección de código que no he explicado. Esto es un Filtro de líquido. Un filtro es una función que cambia el valor de entrada de cierta manera. A modo de ejemplo, veamos el upcase filtrar:

{{ 'Keir Whitaker' | upcase }}

Cuando se genere, se mostrará KEIR WHITAKER en nuestro archivo HTML.

Los filtros toman una entrada, en este ejemplo mi nombre como una cadena de texto y lo cambian en consecuencia. En el caso de upcase filtrar transforma la salida en caracteres en mayúsculas. En nuestro ejemplo anterior, el filtro de escape toma la entrada de la URL y el título y escapa el texto y la URL para que se generen correctamente.

Navegación multinivel

Ahora que tenemos lo básico bajo nuestro control, necesitamos una forma de crear una relación con nuestro submenú secundario. Afortunadamente, esto no es tan difícil, solo se necesitan un par de líneas más de código Liquid. En primer lugar, debemos regresar al administrador de Shopify y crear nuestro submenú.

Necesitamos una forma de relacionar nuestros dos menús para que nuestra plantilla sepa cómo generarlos. Las manijas vienen a nuestro rescate una vez más. Al principio, no es 100% claro, pero todos los enlaces, además del menú en sí, tienen un identificador único al que tenemos acceso.

Echemos un vistazo a un ejemplo creando un submenú desde nuestro enlace «Tazas de café». Podemos asumir con seguridad que nuestro elemento de menú llamado «Tazas de café», el mango generado automáticamente será «tazas de café». Todo lo que realmente necesita hacer es eliminar los signos de puntuación, reemplazar los caracteres en mayúscula con minúsculas y los espacios con guiones. Si quisiéramos que este elemento del menú tenga un submenú, simplemente nos aseguramos de que nuestro submenú también tenga un asa de «tazas de café». Vale la pena señalar que el título de su menú puede ser cualquier cosa, el factor importante aquí es el identificador.



Nuestro submenú tiene un asa de tazas de café que nos permite relacionar nuestros menús.

Ahora todo lo que necesitamos es un poco de código Liquid adicional para ayudarnos a generar el submenú en nuestra plantilla:

<ul>
{% for link in linklists.main-menu.links %}
<li><a href="https://www.webdesignerdepot.com/2014/06/how-to-add-nested-navigation-to-shopify-themes/{{ link.url" escape }}">{{ link.title | escape }}</a>
{% if linklists[link.handle].links.size > 0 %}
<ul>
{% for sublink in linklists.[link.handle].links %}
<li><a href="{{ sublink.url }}">{{ sublink.title | escape }}</a></li>
{% endfor %}
</ul>
{% endif %} 
</li>
{% endfor %}
</ul>

A primera vista, esto puede resultar un poco abrumador. Ya hemos repasado la mayor parte, así que examinemos el nuevo código que está haciendo la mayor parte del nuevo trabajo por nosotros:

{% if linklists[link.handle].links.size > 0 %}

Esto aparece después de que se genera el enlace del menú principal, pero antes de que se cierren los elementos de la lista.

etiqueta (línea 4 en nuestro ejemplo de código). La «instrucción if» comprueba si hay una lista de vínculos con el mismo identificador que nuestro elemento de vínculo actual y si existe para ver si tiene elementos de vínculo asociados. Si la respuesta es sí, la plantilla abre una nueva lista desordenada y muestra cada elemento del submenú como un elemento de lista según nuestro primer ejemplo. Si la respuesta es no, la plantilla continúa mostrando el siguiente elemento del menú principal.



El resultado final de nuestro código es una lista desordenada anidada de elementos de menú.

Esta verificación de la existencia de un submenú con el mismo identificador ocurre en todas y cada una de las iteraciones del menú principal. También notará que nuestra «declaración if» está cerrada con el código Liquid {% final para%} y nuestro «bucle for» con {% final para%}. Esto alerta a la plantilla para que continúe cuando estos hayan completado su trabajo.

Terminando

Con un poco de planificación, es muy fácil crear menús que dependan unos de otros. Por supuesto, no tiene que generarlos juntos; si lo desea, podría generar el submenú de forma independiente en cualquier lugar de su plantilla.

Espero que esto te haya dado una idea de lo fácil que es crear sistemas de menú versátiles en los temas de Shopify.