load_menus

Menus são blocos de conteúdo dinâmicos que podem ser listados por posição usando a tag {% load_menus %}.

Com a tag você acessa o array de menus através da variável {{ loaded_menus }}, e visualiza os menus com a position especificada. Para percorrer o array utilizamos a tag {% for %} iterando entre os menus com a variável {{ menu }}.

<ul>
  {% load_menus position: "posicao" %}
  {% for menu in loaded_menus %}
    <li>
      <a href="{{ menu.url }}"
        {% unless menu.tooltip == blank %}class="{{ menu.tooltip }}"{% endunless %}
        {% if menu.external %}target="_blank"{% endif %}>

        {% if menu.image_url %}
          <img src="{{ menu.image_url }}" alt="{{ menu.title }}" />
        {% endif %}

        {{ menu.title }}
      </a>

      {% if menu.children %}
        <ul>

          {% for submenu in menu.children %}
            <li>
              <a href="{{ submenu.url }}"
                {% unless submenu.tooltip == blank %}class="{{ submenu.tooltip }}"{% endunless %}
                {% if submenu.external %}target="_blank"{% endif %}>
                {{ submenu.title }}
              </a>
            </li>
          {% endfor %}

        </ul>
      {% endif %}
    </li>
  {% endfor %}
</ul>

Atributos do objeto

• children: retorna um array de submenus do menu atual. Esses submenus possuem os mesmos atributos do objeto {{ menu }} e podem ser percorridos por um loop for.

{% if menu.children %}
  Esse menu possui {{ items_count }} submenus:

  <ul>
    {% for submenu in menu.children %}
      <li>
        <a href="{{ submenu.url }}">
          {{ submenu.title }}
        </a>

        {% if submenu.children %}
          <ul>
            {% for childmenu in submenu.children %}
              <!-- ... -->
            {% endfor %}
          </ul>
        {% endif %}
      </li>
    {% endfor %}
  </ul>
{% endif %}

• external: retorna true caso o gestor tenha optado por esse link abrir em uma nova janela, ou false caso o gestor não tenha marcado a opção.

• image_url: retorna a URL da imagem caso o menu atual aponte para uma tag e ela possua uma imagem.

{% if menu.image_url %}
  <a href="{{ menu.url }}">
    <img src="{{ menu.image_url }}" alt="{{ menu.title }}" />
  </a>
{% else %}
  <a href="{{ menu.url }}">
    <span>{{ menu.title }}</span>
  </a>
{% endif %}

• items_count: retorna o número de submenus que o menu atual possui.

{% if menu.items_count > 0 %}
  {% assign has_submenu = true %}
{% else %}
  {% assign has_submenu = false %}
{% endif %}

<li {% if has_submenu %}class="has-submenu"{% endif %}>
  {{ menu.title }}

  {% if has_submenu %}
    <ul>
      <!-- ... -->
    </ul>
  {% endif %}
</li>

• title: retorna o título do menu.

• tooltip: retorna o valor informado no campo tooltip na plataforma. Você pode usar esse campo para dinamizar classes ou cores de itens de submenu.

<li {% if menu.tooltip == "promo" %}style="color: red"{% endif %}>
  <!-- ... -->
</li>

• url: retorna a URL do menu.