Si trabajas en un sitio de comercio electrónico con más de un puñado de productos, necesitarás una forma de organizarlos. El método consiste en añadir etiquetas a los productos y permitir que los visitantes naveguen rápidamente por las distintas líneas de productos. Veamos cómo hacerlo.
En algún lugar del multiverso, a este tipo de organización navegable le pusieron el sabroso nombre de migas de pan. Porque a veces, al igual que nuestros amigos Hansel y Gretel, queremos seguir el rastro digital con paradas deliciosas por el camino. Aquí tienes un vistazo al resultado:
Hay tres pasos principales para crear migas de pan:
- Definir las relaciones
- Establecer las conexiones
- Diseñar con datos
La receta tradicional
Para esta aventura por el bosque mágico de Webflow Ecommerce, empecemos pensando en datos anidados. Puedes imaginarlo como carpetas dentro de carpetas dentro de carpetas. Esto se llama anidamiento —o dependencias— porque cada nivel tiene una relación de padre/hijo. Es un modelo de jerarquía muy tradicional en informática.
Para este tutorial, usemos el ejemplo de una tienda de dulces (o shop, como decimos en EE. UU., a menos que queramos sonar pintorescos).
Esta pequeña tienda de dulces tiene varias secciones llamadas Departamentos. Dentro de cada departamento, los dulces se dividen en Tipos. Usar relaciones anidadas tradicionales nos daría una estructura de URL de sweet-shoppe.com/departamento/tipo/producto.
Así es como se ve esa estructura visualmente:
La receta de Webflow
En Webflow, diseñamos con datos dinámicos usando colecciones del CMS como bases de datos. Esto significa que podemos definir las relaciones en cada nivel, no solo en el de padre-hijo. Tenemos referencias que se parecen más a relaciones entre hermanos que a relaciones entre padre e hijo. Esto permite muchas opciones cuando decidimos conectar las cosas más adelante.
Vale la pena señalar que las relaciones pueden ir más allá de tres niveles; solo usamos 3 colecciones por simplicidad. Este método se puede implementar para cualquier número de relaciones de colección superior a dos. Solo tienes que añadir colecciones según sea necesario y definir las nuevas relaciones en cada nivel.
Estas conexiones se llaman referencias. Cada referencia crea una relación directa y unidireccional entre dos elementos del CMS, lo cual es perfecto para permitirnos vincular datos donde queramos.
Tenemos que definir las relaciones para cada colección, y no solo a nivel de producto. Esto se debe a que cada colección es un hijo directo del sitio. Ahora definimos las relaciones entre las colecciones. Cada elemento de la colección de Productos está conectado a un único elemento de Tipo y a un único elemento de Departamento. Y cada elemento de la colección de Tipos está conectado a un único elemento de Departamento.
O, para explicarlo de forma más esquemática:
Página de inicio o tienda (página estática)
Colección de departamentos (página de plantilla del CMS)
Colección de tipos (página de plantilla del CMS)
- referencia a la colección de departamentos
Colección de productos (página de plantilla de comercio electrónico)
- referencia a la colección de departamentos
- referencia a la colección de tipos
Así es como se ve nuestra estructura usando el CMS y el comercio electrónico de Webflow:
Quizás notes una nueva colección a un lado llamada Categorías de productos. Esta colección se crea automáticamente al activar el comercio electrónico. La colección de categorías es un ejemplo de un campo de multirreferencia, que funciona como una calle de doble sentido (a diferencia de la calle de sentido único de la referencia). Se pueden asignar varios productos a una categoría y varias categorías a un producto.
Este tipo de relación de multirreferencia es genial para lo que me gusta llamar colecciones rápidas: agrupar productos fácilmente porque son similares o combinan bien. Esto ocurre en las páginas de plantilla de categoría o usando listas de colección del CMS en las páginas de plantilla de producto.
No nos perdamos admirando las maravillas de las multirreferencias. Volvamos a las migas de pan del producto.
Establece las conexiones
Ahora que hemos definido nuestras colecciones y sus relaciones, vamos a llenar los productos y las colecciones del CMS con elementos.
A continuación, asegúrate de conectar cada producto con su tipo y departamento correspondientes.
Luego, conecta los tipos con su departamento.
Los departamentos no necesitan estar conectados a nada, ya que su elemento principal es la tienda o la página de inicio.
Empieza gratis
Crea sitios web personalizados y escalables, sin escribir código. Empieza a construir en Webflow.
Diseña con datos
Ahora, diseñar con datos dinámicos es pan comido, porque hemos definido las relaciones de abajo hacia arriba en cada nivel. En la página de plantilla de producto, vamos a crear un contenedor flexbox horizontal para nuestras migas de pan.
Ahora, añadiré tres enlaces de texto y un bloque de texto separados por iconos de flecha.
- Selecciona el primer enlace y conéctalo a tu tienda, llamándolo Inicio o Tienda, según corresponda.
- Selecciona el segundo enlace y elige obtener el texto del nombre del departamento referenciado. Luego, en la configuración del enlace, elige la referencia para la página del departamento.
- Repite el mismo proceso para conectar el siguiente enlace de texto para el tipo.
- Opcional: conecta el bloque de texto final al nombre del producto, pero no lo enlaces. (Incluirlo probablemente crea la mejor experiencia de usuario, pero tú decides).
Ahora, echemos un vistazo a nuestro componente de navegación de migas de pan.
Siguiendo los pasos anteriores, podemos crear una navegación de migas de pan en las páginas de plantilla de Departamentos y Tipos para completar el camino de regreso a la página principal de la tienda. Cuanto más "cerca" estés de la tienda, menos enlaces necesitarás.
Tienes un montón de opciones de diseño aquí. Quizás quieras usar botones o bloques de enlace para crear migas de pan más visuales con interacciones. Por ejemplo:
- Activador de carga de página para revelar las migas de pan en cascada
- Activador al pasar el ratón para resaltar el enlace con un cambio de color o tamaño
Dale una vuelta a la receta
Puedes aplicar el mismo método para crear una subnavegación dinámica en la barra lateral o para crear etiquetas de productos. Las posibilidades de diseño no se limitan a los datos dinámicos. Tras configurar cuidadosamente nuestras relaciones de datos, podemos aprovechar Webflow al máximo para diseñar con datos de una forma que se adapte a nuestro sitio.
Opciones. Dulces y maravillosas opciones.
Este enfoque funciona para mucho más que solo colecciones de productos de comercio electrónico. Puedes aplicar esta metodología a blogs o a cualquier colección del CMS que requiera algo más que una categoría o etiqueta para organizarse.
Se pueden crear muchísimos más componentes a partir de estas relaciones dinámicas, como tipos de productos relacionados, mega menús dinámicos, colores o diseños definidos por el tipo de producto, ¡y mucho más! ¡Perspectivas emocionantes!
Incluso puedes inspeccionar o clonar el proyecto Sweet Shoppe. También hay una versión en video de este tutorial si aprendes mejor de esa manera.
Llegamos al final de este tutorial y, como a algunos les gusta el chocolate, es agridulce. Pero el poder de diseñar con datos dinámicos en Webflow es, sin duda, una delicia.
