Modyo Docs

# Navigation

La navegación permite organizar y presentar un listado de elementos para facilitar el acceso de los usuarios a los puntos clave de tu sitio.

Esta sección describe un listado anidado de elementos que aparecerán en el sitio al usar el tag {% menu %} en Plantillas.

La navegación solo permite tres niveles de profundidad: un listado principal y hasta dos subelementos anidados en cada uno de los ítems principales. Por defecto, al crear un sitio, Modyo incluye una plantilla y un menú básico que puedes modificar según tus necesidades.

En la parte superior de la vista, encontrarás el estado de publicación del menú:

  • Publicado: Este estado aparece después de haber hecho una publicación y cuando las versiones editable y publicada son iguales.
  • Cambios pendientes: Este estado aparece si ya hay una versión publicada, pero hay cambios pendientes de publicar en tu versión editable.
  • En revisión: Este estado aparece cuando esté habilitada la Revisión en Equipo y se haya enviado a revisión la versión editable.
  • Aprobado: Este estado aparece cuando esté habilitada la Revisión en Equipo y si se cumplieron las condiciones de revisión del elemento. Si se encuentra en este estado, tus plantillas ya pueden ser publicadas.

En la parte superior derecha, encuentras la última fecha de publicación y las acciones disponibles:

Vista previa: Al hacer clic en este icono, se abre una nueva pestaña con el modo vista previa del menú, donde puedes visualizar todos los cambios.

Atención

Puedes previsualizar los cambios como usuario sin sesión o usuario con sesión de Modyo. Para esto, es recomendable iniciar o cerrar la sesión de Modyo en el sitio antes de entrar al modo vista previa. Esto debido a que iniciar o cerrar sesión dentro del modo de vista previa puede generar errores de seguridad como x-frame-options o mixed-content, dependiendo de la configuración de dominios personalizados y SSL del sitio.

Atención

El menú que has creado solo se visualizará en una página si lo agregas a través de una plantilla publicada. De lo contrario, el menú no se solicitará y no aparecerá en la página.

Diferencias: Haz clic aquí para acceder a la vista de diferencias, en la cual puedes comparar los cambios entre diferentes versiones de tu menú.

Por defecto, inicias comparando la versión publicada con la versión editable. Usa los selectores de versiones para comparar con versiones de respaldo.

Tip

Cada vez que publicas una versión, la versión que estaba publicada pasa a ser una versión de respaldo.

Por defecto, se guardan hasta 20 respaldos, de tal forma que los veinte respaldos más recientes se pueden comparar, restaurar y hacer rollback.

Para más información sobre el versionamiento, revisa la sección de Versionado.

Actividad/Comentarios: Solo aparece habilitada si tienes activada la revisión en equipo. Al hacer clic, despliega una barra lateral con el historial de actividad y comentarios del menú.

Al final de la barra lateral, ves una caja de texto donde puedes escribir un comentario. Junto a cada actividad, puedes hacer clic en ver detalle para mostrar la información completa de ese registro de actividad.

# Crear un Menú

Para crear un Menú, sigue estos pasos:

  1. Dentro del menú principal de Modyo Platform, expande Channels y haz clic en Sitios.
  2. Selecciona el sitio al que desees agregar un nuevo menú.
  3. Haz clic en Navegación.
  4. Haz clic en Nuevo Menú.
  5. Ingresa el nombre e identificador y haz clic en Crear.
  6. Personaliza el menú agregando o editando ítems.
  7. Una vez terminado, haz clic en Publicar.

Tip

Tu menú en este momento ya es público, pero no se manda a llamar. Se necesita usar una plantilla para que se despliegue en pantalla. Modyo ofrece un snippet de uso general en Snippets, General, menu y es llamado en la plantilla base usando 

{% snippet 'shared/general/menu' %}
.

Acción principal

  • Guardar: Guarda todos los cambios del menú.
  • Enviar a revisión: Cambia el estado del menú a "Esperando revisión". En este estado sigues haciendo cambios, pero cada cambio será notificado vía correo a los revisores asignados.
  • Rechazar: Vuelve al estado "En edición", notificando a los revisores que el elemento fue rechazado.
  • Publicar: Una vez que el menú fue aprobado, podrás ir a la vista de publicación conjunta para publicar tu navegación.

En la sección lateral derecha, puedes ver una barra que cambia de acuerdo al ítem seleccionado en el área principal. En esta sección, puedes ver las opciones:

  • Nombre: Nombre del elemento que aparecerá en el sitio.
  • Página asociada: Se puede asociar directamente a una página o a una URL personalizada.
  • URL: Si escogiste una URL personalizada en el elemento anterior, tienes diferentes opciones para configurar este ítem:
    • HTTP(s): Apunta a una dirección usando HTTP(s). Ejemplos:
      • http://www.example.com
      • https://www.example.com
    • URL relativa y ancla: Apunta a una dirección relativa a esta página o a una sección ancla. Ejemplos:
      • relative-page
      • /relative-page
      • #anchor
    • Teléfonos: Genera un enlace con el URI tel. Ejemplos:
      • tel:+569-123-45678
      • tel:912345678
    • SMS: Genera un enlace con el URI sms. Ejemplos:
      • sms:+569-123-45678
      • sms:+569-123-45678,9-123-45678
      • sms:+569-123-45678,9-123-45678?body=hello%20there&param1=a%20value
    • Email: Genera un enlace con el URI mailto. Ejemplos:
      • mailto:info@example.com?subject=subject&cc=cc@example.com
  • Abrir en pestaña nueva: Añade el atributo target='blank' al elemento HTML del ítem del menú, para que al hacer clic, se abra en una pestaña nueva.
  • Privado: Hace que el elemento seleccionado sea visible solo cuando hay una sesión de usuario activa en el sitio.
  • Segmentos: Si hay segmentos creados, también podrás segmentar este elemento para que los usuarios puedan ver este ítem de menú solo cuando tengan una sesión activa y que además se encuentren dentro de los segmentos seleccionados.

# Ejemplos de Menu

El snippet general menu puede satisfacer las necesidades básicas de un sitio, desplegando un menú en forma de dropdown. A continuación, se explican las partes más importantes de este snippet y cómo se puede extender a más funcionalidades.

Las primeras líneas encapsuladas por {{ }} o {% %} pertenecen a Liquid y se utilizan para asignar variables o comenzar un bucle para desplegar información del menú.

El siguiente listado describe las variables importantes para el menú:

  • menu: Esta variable toma el menú con identificador main dentro de Modyo Platform -> Navegación.
  • items_to_show: Toma los ítems de menú que son visibles.
  • active: Utilizado para agregar una clase CSS llamada active en caso de que este ítem sea activado.
  • children_to_show: Si existen hijos del ítem actual, toma los ítems en esta variable y los despliega como segundo nivel en la jerarquía del menú.

Al entrar a la sección de Plantillas de tu sitio en Modyo Platform, podrás hacer clic en el snippet general menu para ver el HTML del menú. Se ve de la siguiente manera:

menu

{% assign menu = menus['main'] %}
<ul class="nav navbar-nav" role="menu" aria-label="Main menu {{responsive}}">
	{% assign items_to_show = menu.items | visible_items %}
	{% for item in items_to_show %}
	{% assign active = item.url | active_page: request.url %}
	{% assign children_to_show = item.child_items | visible_items %}
	{% if children_to_show.size > 0 %}
	<li class="nav-item nav-item-{{ item.parameterized_label }} dropdown menu-item {{ active }}" role="none">
		<a target="{{ item.target }}" rel="{{ item.target | item_rel}}" class="nav-link dropdown-toggle {% for child in children_to_show %}{% if child.url == request.url  %}active{% endif %}{% endfor %}" href="javascript:void(0)" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdown{{ item.label | replace: ' ','' | replace: 'ñ','n' | capitalize }}Button{{ responsive }}" role="menuitem">
			{{ item.label }} <span class="sr-only">dropdown</span>
		</a>
		<div class="submenu-{{ item.label | replace: ' ','' | replace: 'ñ','n' | capitalize }} dropdown-menu" aria-labelledby="dropdown{{ item.label | replace: ' ','' | replace: 'ñ','n' | capitalize }}Button{{responsive}}" aria-expanded="false">
			{% for child in children_to_show %}
			<a target="{{ child.target }}" rel="{{ child.target | item_rel}}" class="dropdown-item" href="{{ child.url }}" {% if child.url == request.url %}aria-current="page"{% endif %}>
				{{ child.label }}
			</a>
			{% endfor %}
		</div>
		{% else %}
	<li class="nav-item nav-item-{{ item.parameterized_label }} {{ active }}" role="none">
		<a target="{{ item.target }}" class="nav-link" rel="{{ item.target | item_rel}}" href="{{ item.url }}" {% if item.url == request.url %}aria-current="page" {% endif %} role="menuitem" aria-label="{{ item.label }} {{responsive}}">{{ item.label }}</a>
		{% endif %}
	</li>
	{% endfor %}
</ul>

A continuación, tenemos un menú que también llama a main, pero ahora en forma de lista, a diferencia del snippet general que utiliza un dropdown:

{% assign menu = menus['main'] %}
<ul role="menu" aria-label="Main menu">
	{% assign items_to_show = menu.items | visible_items %}
	{% for item in items_to_show %}
	{% assign children_to_show = item.child_items | visible_items %}
	<li class="nav-item" role="none">
		<a href="{{ item.url }}" target="{{ item.target }}" class="nav-link" {% if item.url == request.url %}aria-current="page" {% endif %} role="menuitem" aria-label="{{ item.label }}">{{ item.label }}</a>
		{% if children_to_show.size > 0 %}
		<ul>
			{% for child in children_to_show %}
			<li class="nav-item" role="none">
				<a href="{{ child.url }}" target="{{ child.target }}" class="nav-link" {% if child.url == request.url %}aria-current="page" {% endif %} role="menuitem" aria-label="{{ child.label }}">{{ child.label }}</a>
				{% assign children_to_show = child.child_items | visible_items %}
				{% if children_to_show.size > 0 %}
				<ul>
					{% for grandchild in children_to_show %}
					<li class="nav-item" role="none">
						<a href="{{ grandchild.url }}" target="{{ grandchild.target }}" class="nav-link" {% if grandchild.url == request.url %}aria-current="page" {% endif %} role="menuitem" aria-label="{{ grandchild.label }}">{{ grandchild.label }}</a>
					</li>
					{% endfor %}
				</ul>
				{% endif %}
			</li>
			{% endfor %}
		</ul>
		{% endif %}
	</li>
	{% endfor %}
</ul>

Para poder desplegar un menú de tres niveles, se tiene que agregar otro bucle que considere si los items hijos contienen más items. Para esto, se asigna la variable grandchildren al final del primer bucle y este tiene que iterar sobre los items de los hijos (osase los items nietos):

{% assign menu = menus['main'] %}
<ul class="nav navbar-nav" role="menu" aria-label="Main menu {{responsive}}">
	{% assign items_to_show = menu.items | visible_items %}
	{% for item in items_to_show %}
	{% assign active = item.url | active_page: request.url %}
	{% assign children_to_show = item.child_items | visible_items %}
	{% if children_to_show.size > 0 %}
	<li class="nav-item nav-item-{{ item.parameterized_label }} dropdown menu-item {{ active }}" role="none">
		<a target="{{ item.target }}" class="nav-link dropdown-toggle {% for child in children_to_show %}{% if child.url == request.url  %}active{% endif %}{% endfor %}" href="javascript:void(0)" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdown-{{forloop.index}}-Button{{ responsive }}" role="menuitem">
			{{ item.label }} <span class="sr-only">dropdown</span>
		</a>
		<div class="submenu-{{forloop.index}} dropdown-menu" aria-labelledby="dropdown-{{forloop.index}}-Button{{responsive}}" aria-expanded="false">
			{% for child in children_to_show %}
			<a href="{{ child.url }}" target="{{ child.target }}" class="dropdown-item" {% if child.url == request.url %}aria-current="page"{% endif %}>{{ child.label }}</a>
			{% assign grandchildren_to_show = child.child_items | visible_items %}
			{% if grandchildren_to_show.size > 0 %}
			<ul class="m-0 p-0">
				{% for grandchild in grandchildren_to_show %}
				<li class="list-unstyled m-0 p-0">
					<a href="{{ grandchild.url }}" target="{{ grandchild.target }}" class="dropdown-item small" {% if grandchild.url == request.url %}aria-current="page"{% endif %}><span class="pl-2">{{ grandchild.label }}</span></a>
				</li>
				{% endfor%}
			</ul>
			{% endif %}
			{% endfor %}
		</div>
		{% else %}
	<li class="nav-item nav-item-{{ item.parameterized_label }} {{ active }}" role="none">
		<a href="{{ item.url }}" target="{{ item.target }}" class="nav-link" {% if item.url == request.url %}aria-current="page" {% endif %} role="menuitem" aria-label="{{ item.label }} {{responsive}}">{{ item.label }}</a>
		{% endif %}
	</li>
	{% endfor %}
</ul>

← Widgets →