Procedimiento — Configurar el menú de navegación

Cómo se arma la barra de navegación de la tienda y cómo se le agrega un menú desplegable.

Todavía no está construido

Describe el comportamiento definido en RF-007, que está propuesto y sin implementar. Sirve para acordar la forma de carga antes de programarla. Hoy la barra se administra como describe RF-003, solo con accesos sueltos.

Funciona igual que los sliders

Un menú se carga como se carga un slider, y se asigna como se asigna un slider.

Slider	Menú
Se crea en su propia sección, con su nombre	Igual
Se le cargan los slides adentro, ordenables por arrastre	Se le cargan las entradas adentro, ordenables por arrastre
Una página lo muestra referenciándolo desde un bloque	Un ítem de la barra lo despliega referenciándolo
Se puede quitar de la página y volver a poner sin perderlo	Igual
El mismo slider puede estar en varias páginas	El mismo menú puede estar en varios lugares

La única diferencia es que una entrada de un menú puede abrir otro menú. De ahí sale el desplegable de varios niveles: el submenú no es una cosa nueva, es un menú común de los mismos que se cargan para la barra.

Cada entrada se carga de una de dos maneras

Al agregar una entrada, lo primero que se elige es de qué tipo es. Eso cambia lo que se pide después.

	Entrada propia	Entrada de categoría
Cuándo usarla	Para lo que no existe como categoría: Black Friday, Ofertas	Para un rubro del catálogo: Electrónica, Hogar
El texto	Se escribe	Sale de la categoría, y se puede reemplazar
El destino	Se elige	Sale de la categoría
Qué dibuja	Una línea	Una línea, y sus subcategorías si pedís niveles

La de categoría es la que ahorra trabajo: se elige el rubro una vez y las subcategorías aparecen solas, también cuando el catálogo cambia.

Abrir un menú no es lo mismo que incluirlo

Son las dos formas de enganchar un menú con otro. La diferencia, en una línea: abrir necesita que el comprador pase el mouse, incluir no.

La elección se hace en el menú, no en cada entrada. Cada menú tiene un campo, Cómo se enganchan sus submenús, que vale para todas sus entradas.

• Se abren al pasar el mouse. El submenú de cada entrada se despliega en un panel nuevo. Es bajar de nivel.
• Se incluyen en el panel. El submenú de cada entrada ya está dibujado adentro del panel que el comprador está mirando, como columna o sección, con su nombre de título. No abre nada porque no hay nada que abrir.

Está en el menú y no en la entrada a propósito: un panel donde algunas secciones están a la vista y otras aparecen al pasar el mouse no se entiende mirándolo. En modo incluir, el panel ni siquiera te pide el texto ni el destino de la entrada, porque el título de cada sección es el nombre del menú incluido.

El ejemplo de referencia, contado paso a paso

En el panel de auriculares de Walmart pasan cuatro cosas, en este orden:

1. La fila de arriba es un menú en horizontal: Departamentos, Servicios, Ofertas.
2. La segunda fila es otro menú en horizontal, que se abrió desde la primera: Televisores, Computadoras, Auriculares y parlantes, Celulares.
3. El comprador pasa el mouse por Auriculares y parlantes y aparece el panel grande. Eso es abrir.
4. Adentro del panel hay cinco columnas con título: Ver todo, Auriculares por tipo, Auriculares por marca, Parlantes bluetooth, Ofertas. Aparecieron todas juntas, sin que el comprador hiciera nada más. Eso es incluir.

El panel apareció porque el comprador hizo algo. Las columnas ya estaban adentro del panel.

Cómo saber cuál usar

Preguntate si eso tiene que aparecer solo cuando el comprador pase el mouse.

Respuesta	Qué cargás
Sí, tiene que aparecer al pasar el mouse	El menú va en modo Se abren al pasar el mouse
No, tiene que estar dibujado en el panel que ya está abierto	El menú va en modo Se incluyen en el panel

En los dos casos el submenú de cada entrada se carga igual, en su campo Submenú. Lo único que cambia es el modo del menú que las contiene.

Por qué hacen falta las dos

Sin incluir, para armar ese panel habría que cargar las cuarenta líneas sueltas en un solo menú, sin títulos de columna, y la lista de marcas no se podría reutilizar en otro lado.

Sin abrir, todo se dibujaría de una sola vez y no habría niveles.

Incluir no gasta niveles

El tope de tres niveles cuenta cuántos paneles atraviesa el comprador con el mouse. Incluir no agrega un panel, dibuja adentro del que ya está abierto.

En el ejemplo, el comprador abrió dos paneles para llegar al de auriculares, y ese segundo panel incluye cinco menús. Son dos niveles, no siete.

Procedimiento 1 — La barra de navegación no cambia

La barra sigue siendo la de siempre, en Menú de Navegación, con sus ítems, sus destinos y sus etiquetas. No hay que rehacerla ni migrar nada.

Lo que gana cada ítem es un selector arriba de todo, Tipo de ítem, con dos opciones:

• Acceso directo: el de siempre. Se carga el texto y el destino, tal cual hasta hoy.
• Menú desplegable: solo se elige el menú. El texto sale del nombre de ese menú y el destino, de su destino propio. Los campos de texto y destino del ítem ni siquiera se muestran.

Los ítems que ya tenías cargados quedan como accesos directos, sin que haya que tocarlos.

El pie de página no se administra acá: tiene su propia sección.

Procedimiento 2 — Agregar un menú desplegable

Se hace en dos partes: primero se arma el menú que va a desplegarse, después se lo asigna a una entrada. Ejemplo: un botón Departamentos que abra la lista de rubros.

Parte A. Armar el menú que se va a desplegar.

1. En Menús, elegir Crear.
2. Nombre: Departamentos.
3. En Entradas, agregar una por cada rubro: Electrónica, Hogar, Electrodomésticos. A cada una cargarle su Destino.
4. Si el panel va a llevar una pieza gráfica, cargarla en el campo Imagen del menú, con su propio destino.
5. Guardar.

Parte B. Colgarlo de la barra.

1. Entrar a Menú de Navegación.
2. Buscar el ítem Departamentos, o agregar uno nuevo.
3. Poner su Tipo de ítem en Menú desplegable y elegir el menú Departamentos.
4. Guardar.

Resultado en la tienda: Departamentos aparece en la barra. Al pasarle el mouse se abre un panel con los rubros, cada uno pulsable.

Procedimiento 3 — Agregar un tercer nivel

Se repite el procedimiento 2 un escalón más abajo.

1. Crear un menú Electrónica con las subcategorías como entradas: Televisores, Portátiles, PCs y Tablets, Celulares.
2. Abrir el menú Departamentos, ir a su entrada Electrónica y elegir en Submenú el menú recién creado.

Resultado en la tienda: al abrir Departamentos y pasar el mouse por Electrónica, se despliega una segunda columna con sus subcategorías.

Este es el último nivel permitido. No se puede encadenar un cuarto menú: el panel deja de entrar en pantalla y de poder recorrerse con el mouse.

Las categorías del catálogo se enriquecen en el CMS

Las categorías de venta se cargan en el catálogo, no acá. El CMS recibe una copia al sincronizarse, en la sección Categorías del catálogo, y ahí se les agrega lo que el catálogo no tiene.

Campo	Quién lo carga
Nombre, dirección y jerarquía	El catálogo. Acá se ven pero no se editan
Nombre comercial	Vos, si el nombre del catálogo no es el que querés mostrar
Ícono	Vos
Imagen	Vos

Lo que cargues acá no se pisa cuando vuelve a sincronizarse, y se hereda en todos los menús donde aparezca esa categoría. No hay que recargar el ícono en cada menú.

Si una categoría desaparece del catálogo, queda marcada como inactiva. No se borra, así no se pierde su presentación ni se rompen los menús que la usaban.

Procedimiento 4 — Que las subcategorías se carguen solas

En lugar de armar el submenú a mano, se apoya la entrada en un rubro del catálogo y se pide cuántos niveles traer.

1. Abrir el menú donde va la entrada. Por ejemplo Departamentos.
2. En Entradas, elegir Agregar.
3. En Tipo, elegir Entrada de categoría.
4. En Categoría, elegir el rubro de la lista. Por ejemplo Electrónica.
5. En Profundidad máxima, poner hasta dónde bajar:
6. Vacío: se trae toda la rama del rubro, con los niveles que tenga.
7. 0: no se trae nada. La entrada queda como acceso directo al rubro.
8. 1: solo las subcategorías directas, como líneas simples.
9. 2 o más: las subcategorías pasan a ser títulos de sección y las que cuelgan de ellas, sus líneas.

Si el rubro tiene menos niveles que el número que pusiste, se trae lo que haya. Si tiene más, se corta ahí. 6. Si pediste niveles, elegir la Presentación, que es si esas listas se abren en un panel nuevo o se incluyen en el mismo, y la Orientación con la que se dibujan. 7. Guardar.

Resultado en la tienda: la entrada muestra el nombre del rubro y despliega sus subcategorías sin que nadie las haya cargado. Si mañana se agrega una subcategoría al catálogo, aparece sola en el menú. Si se da de baja, desaparece sola.

Si el nombre comercial no es el del catálogo, se puede escribir en Título el texto que quieras. El vínculo con la categoría sigue en pie y las subcategorías se siguen trayendo.

Con dos niveles o más se arma un panel de varias columnas solo. Las categorías hijas pasan a ser los títulos de las columnas y las nietas, las líneas de cada una. Es el procedimiento 5 entero resuelto con una sola entrada cargada.

Qué hereda lo que se trae solo. Como esas listas no son menús cargados, no hay de dónde tomar sus ajustes, así que salen de dos lados:

Qué	De dónde sale
Los nombres y los destinos	De cada categoría
Los íconos y las imágenes	De lo que cargaste en Categorías del catálogo, una vez y para todos los menús
Si las hijas se abren o se incluyen	De la entrada: campo Presentación
En qué orientación se dibujan	De la entrada: campo Orientación

Cuidado con esto: las subcategorías traídas solas van en el orden que tengan en el catálogo, no en uno que vos decidas, y una categoría nueva aparece sin que nadie la apruebe. Dejar la profundidad vacía además despliega la rama entera, así que si el catálogo crece hacia abajo el panel crece con él. Si necesitás controlar el orden, armá el submenú a mano con entradas propias.

Procedimiento 5 — Armar un panel de varias columnas

Es el panel del ejemplo de auriculares: cinco columnas tituladas y una pieza gráfica al costado. Se arma de afuera hacia adentro.

Parte A. Armar cada columna como un menú propio.

1. Crear un menú Auriculares por tipo, Orientación vertical.
2. Cargarle sus entradas: Bluetooth, Manos libres, De vincha, Gamer. Guardar.
3. Repetir con cada columna: Auriculares por marca, Parlantes bluetooth, Ofertas.

Parte B. Armar el panel que las junta.

1. Crear un menú Auriculares y parlantes.
2. Poner su Orientación en horizontal. Eso es lo que deja las columnas una al lado de la otra.
3. Poner Cómo se enganchan sus submenús en Se incluyen en el panel. Eso convierte a sus entradas en columnas dibujadas, en vez de menús que se abren.
4. Cargarle su Imagen, con su destino, si el panel lleva la pieza gráfica del costado.
5. En Entradas, agregar una por columna y elegir en Submenú el menú que corresponda. No te va a pedir texto ni destino: en este modo no se usan. El orden de las entradas es el orden de las columnas.
6. Guardar.

Parte C. Colgar el panel de donde se abre.

1. Abrir el menú donde va, por ejemplo Electrónica, que está en modo Se abren al pasar el mouse.
2. En la entrada Auriculares y parlantes, elegir en Submenú el menú del panel.

Resultado en la tienda: al pasar el mouse por Auriculares y parlantes se abre un panel con las columnas, cada una con su título, y la pieza gráfica al costado.

Para un panel de la tienda, poné horizontal. En vertical las mismas secciones quedan una debajo de la otra, y con cuatro listas de cinco líneas eso es una columna larguísima que hay que recortar con barra de desplazamiento. La orientación vertical con secciones incluidas sirve para el pie de página y para el celular, donde no hay panel y todo baja en lista.

La orientación decide también por dónde sale el panel siguiente. Un menú en horizontal abre sus submenús abajo, ocupando el ancho, como la fila de rubros de Walmart. Uno en vertical los abre al costado. Si no fuera así, el panel de una fila horizontal quedaría fuera de la pantalla.

En el celular siempre se ve en vertical, tenga la orientación que tenga. Una fila de columnas no entra en pantalla angosta.

Procedimiento 6 — Reutilizar un menú en otro lugar

Es el mismo mecanismo de siempre: se referencia, no se copia.

• Para colgarlo de un ítem de la barra: poner ese ítem en tipo Menú desplegable y elegirlo.
• Para colgarlo de una entrada de otro menú: elegirlo en el campo Submenú de esa entrada.

El menú se edita en un solo lugar y el cambio se ve en todos. No hay que duplicarlo. Si lo duplicás, después vas a tener que mantener las dos copias.

Procedimiento 7 — Sacar un menú de la barra sin perderlo

1. Entrar a Menú de Navegación.
2. Pasar ese ítem a tipo Acceso directo, o borrarlo.
3. Guardar.

El ítem vuelve a comportarse como un acceso directo y el menú sigue existiendo con todas sus entradas, listo para volver a asignarlo. Es lo mismo que sacar un slider de una página.

Para sacar una sola entrada de adentro de un menú, y no el menú entero, abrilo, destildá Visible en esa entrada y guardá. La entrada desaparece de la tienda junto con su submenú, y conserva su configuración.

Ícono, imagen y distintivo

Qué	Dónde se carga	Dónde se ve
Ícono	Campo Ícono de la entrada, o el de la categoría si la entrada es de categoría	A la izquierda del texto de la entrada
Imagen	Campo Imagen del menú que se despliega	Al costado de la lista, dentro del panel
Resaltado	Casilla Destacado de la entrada	Cambia el color de la entrada

La imagen se carga en el menú, no en la entrada que lo abre. Así viaja con el menú a todos los lugares donde se lo reutilice.

El ícono y el distintivo existen en el modelo pero todavía no se muestran en el panel: está sin decidir cómo se cargan. Cuando se resuelva, aparecen sin que haya que recargar nada.

Preguntas frecuentes

Creé el menú y no aparece en la tienda. Crear el menú no lo publica en ningún lado. Hay que asignarlo: a un ítem de la barra de tipo Menú desplegable, o al campo Submenú de una entrada de otro menú.

Quiero que el departamento lleve a algún lado al pulsarlo. Cargale un destino a la entrada. No hay que crear una entrada aparte para el "Ver todo": el panel usa el destino de la entrada que lo abrió.

Necesito la misma subcategoría en dos rubros distintos. Asigná el mismo menú como submenú en las dos entradas. Es el caso que este modelo resuelve mejor.

Borré un menú y se rompió otro. Un menú borrado deja sin contenido a toda entrada que lo tuviera como submenú. Antes de borrar, revisá el campo Descripción del menú, que es donde se anota dónde se lo usa.

¿Puedo mezclar entradas propias y de categoría en el mismo menú? Sí, en el orden que quieras. Es lo esperable: los rubros salen del catálogo y las campañas se escriben a mano.

No me deja cargarle un submenú a una entrada de categoría. Es a propósito: una entrada de categoría arma su submenú con las subcategorías del rubro. Si querés uno a mano, usá una entrada propia que apunte al mismo rubro.

Pedí tres niveles y solo veo dos. Con la presentación en "se incluye" no entran más de dos: las subcategorías son los títulos de cada columna y las que cuelgan de ellas son las líneas. Debajo de eso no hay dónde dibujar ni qué tocar. Si necesitás más niveles, poné la presentación en "se abre".

Cambiar la orientación o el modo no toca nada. Ni el formulario de las entradas ni lo que tengas cargado. Podés probar cómo queda en incluir, volver a abrir y comparar, sin perder trabajo y sin que el formulario se te mueva. Lo único que cambia los campos que se piden es el tipo de cada entrada, que lo elegís vos.

Cargué una entrada y no me pide el texto. El menú está en modo Se incluyen en el panel. Ahí el título de cada sección es el nombre del menú incluido, así que el texto de la entrada no se usa. Si necesitás escribir un texto propio, ese menú tiene que estar en modo Se abren.

Una entrada de categoría aparece marcada como rota. La categoría que tenía elegida ya no está en el catálogo. La entrada no se dibuja en la tienda hasta que elijas otra.

El panel me quedó en una columna larguísima. Tenés el menú en vertical con secciones incluidas. Pasalo a horizontal: esa combinación es para el pie y el celular, no para un panel.

El submenú se abre fuera de la pantalla. Si el menú está en horizontal, su submenú sale abajo, no al costado. Revisá la orientación del menú que lo abre.

Cargué un rubro nuevo en el catálogo y no aparece. Hay que sincronizar. Se hace solo cada tanto, y también se puede lanzar a mano desde el panel.

Le cargué un ícono a una categoría y se perdió. No debería. Lo que cargás en el CMS no lo pisa la sincronización: solo se actualizan el nombre, la dirección y la jerarquía, que vienen del catálogo.

Quiero cambiar cómo se llama un rubro solo en el menú. Usá el Nombre comercial en Categorías del catálogo, o el Título de la entrada. El vínculo con la categoría sigue en pie.

Cambié el menú y la tienda lo muestra viejo. El storefront guarda la navegación un rato antes de volver a pedirla. Si pasado un minuto sigue igual, es una falla, no una demora esperable.