¿Cómo crear navegaciones anidadas con la lista de enlaces de Shopify?

Utilizamos la variablelink(enlace) para mantener los datos relacionados con cada elemento en la lista de enlaces, mientras hacemos un bucle con todos elementos. Este palabra clavelinkpodría ser cualquier cosa, es solo una variable para que el bucle for genere datos para el menú. Para acceder a los datos dellink, necesitamos acceder a todos loslinksen la lista de enlaces con un identificador demain-menu(menú principal), por lo que resultaríalinklists.main-menu.links.

Recuerda,Menú principalpredeterminado que existe en una tienda Shopify tiene el identificadormain-menu, y es por ello que lo utilizamos anteriormente. Si nuestro menú tuviera un identificador desocial-media(redes sociales), la sintaxis se refactorizaría de la siguiente forma:

Cada elemento de enlace tiene propiedades que incluyen:

• url
• título

En el ejemplo anterior,{{link.url}}generará la url que ingresamos o generamos en el panel de control de Shopify, y{{link.title}}generará el texto del enlace específico para esa url.

Navegación multi-nivel

Ahora que hemos establecido la estructura básica de Liquid para un menú de un solo nivel, debemos pensar cómo crear un submenú para nuestros elementos de nivel superior. En primer lugar, debemos volver al panel de control de Shopify y crear nuestro primer submenú.

聚氨酯e que al principio no esté 100% claro, pero cada enlace en una lista de enlaces, además del menú en sí, tiene un identificador único al que tenemos acceso en Liquid.

Echemos un vistazo a un ejemplo. Si nuestromain-menutiene tres niveles de enlaces de la siguiente manera:

• Inicio
• Quiénes somos
• Mujer
• Accesorios
• Pendientes
• Bufandas

瞧好德城市搜救菜单anidados en Shopify eslos elementos de este tipo de menú se pueden obtener directamente desde su enlace principal usando Liquid. Esto simplifica enormemente el marcado requerido para representar un menú anidado, lo que significa que no necesitas conocer el identificador del elemento primario para renderizar sus elementos secundarios.

Aquí hay un ejemplo de cómo podemos usar estos controladores relacionados para generar un menú anidado profundo de tres niveles:

Notarás que ahora estamos introduciendo una instrucciónifen nuestro ejemplo refactorizado, directamente después de generar el primer nivel de nuestro menú principal:

Esta instrucciónifverifica si existe un enlace secundario para el elemento de enlace actual en nuestro bucle. Si existe, la plantilla se mueve hacia adelante y repite todos los elementos del submenú.

Adicionalmente, en este ejemplo, manejamos el submenúchild_link(enlace secundario) y un submenúgrandchild_link(enlace terciario) de la misma manera, verificando con una instrucciónifpara ver si hay un enlace secundario para el elemento de enlace actual, y si existe, la plantilla se repite y genera el submenú.

En el ejemplo anterior,child_linkes solo una variable del bucleforque usamos para representar el elemento actual en el bucle; se puede reemplazar fácilmente consub_linkygrandchild_linkconsub_sub_link. Hemos utilizadochildygrandchilden este caso para ilustrar la jerarquía de la navegación anidada un poco más claramente.

Toques finales

Creo que es importante mencionar una propiedad de enlace adicional que será muy útil a la hora de crear menús:link.activeylink.child_active. Ambas son propiedades booleanas (true/false) que te permiten saber fácilmente si la página actual está activa y si sus elementos anidados también están activos. La sintaxis es la siguiente:

{% if link.active %} class="active {% if link.child_active %}child-active{% endif %}"{% endif %}

En este ejemplo, agregaremos una clase CSSactivesi la URL de la página actual es la misma que la del elemento de la lista, y una clase deactive-childsi la página actual también es parte del elemento anidado activo. Aquí está el ejemplo del código completo:

¡Comienza a anidar tus menús!

Las listas de enlaces son un aspecto poderoso que ofrece la plataforma Shopify, ya que poder crear una variedad de elementos de lista que se pueden cambiar desde el panel de control te brinda mucha flexibilidad. Hemos visto que los desarrolladores de temas sacan provecho de esta característica para otras funciones, además de las estructuras de menú. Por ello, saber cómo crear una navegación anidada a la que luego se le pueda aplicar estilos con CSS es una gran herramienta para tu arsenal.