Menu de Categorias com Imagens

Snippet para criar um menu de categorias, exibindo a imagem da categoria principal junto com o bloco das subcategorias.

Lembrando que as imagens devem ser cadastradas através do aplicativo Imagens na Categoria e Subcategorias (https://aplicativos.tray.com.br/aplicativo/layout-tray-imagens-na-categoria)

HTML

{#
  # Menu de Categorias com Imagem
  # elements/snippets/categories_menu_image.html
#}
<ul class="menu">
  {% for category in categories %}
    {% if loop.index <= limit or not limit %}
      {% set children = category.children %}
      <li>
        <a href="{{ category.link }}">{{ category.name }}</a>
        {% if children %}
          <ul class="menu-children">
            {% if category.images %}
              <figure class="category-submenu-image">
                <img src="{{ category.images[0] }}" alt="{{ category.name }}">           
              </figure>
            {% endif %}
            {% for child in children %}
              <li>
                <a href="{{ child.link }}">{{ child.name }}</a>
              </li>
            {% endfor %}
          </ul>
        {% endif %}
      </li>
    {% endif %}
  {% endfor %}
</ul>

CSS

Como usar

Copie o código acima e crie um arquivo separado, ex: elements/snippets/categories_menu_image.html

Faça a chamada desse arquivo onde desejar:

{% element('snippets/categories_menu_image') %}

Copie o CSS e cole em sua folha de estilo.