categories

O Objeto categories é responsável por retornar um array das categorias cadastradas no painel.

Disponível em todas as páginas. Para saber mais sobre categorias acesse: Cadastrar categorias

Atributos disponíveis

E se você deseja utilizar as categorias do seu jeito, poderá utilizar as informações da tabela de atributos abaixo, substituindo o número 0 pela posição no array da categoria desejada. Lembrando que o padrão de chamada é sempre: categories[{index}].{key}

Atributos	Característica
{{ categories[0].id }}	Identificador único de uma determinada categoria.
{{ categories[0].has_product }}	Retorna um valor booleano caso a categoria tenha produtos. Se o valor for 1 a categoria possui produtos.
{{ categories[0].name }}	Nome da categoria
{{ categories[0].parent_id }}	Identificador único da categoria mãe.
{{ categories[0].slug }}	Exibe uma string que corresponde ao trecho de URL que indica o acesso a categoria.
{{ categories[0].link }}	Link para acesso a página da categoria
{{ categories[0].images }}	Imagem por categoria retornada dentro de um array.
{{ categories.children }}	Pode ser usado para percorrer as subcategorias utilizando o loop. ¹

¹ Para correto funcionamento é preciso que o loop de subcategorias esteja dentro de outro loop que percorre as categorias.

Como Usar

No código HTML o objeto categories pode ser usado em um loop para exibir todas as categorias existentes no array como no formato abaixo:

Input

<ul>
  {% for categoria in categories %}
    <li>
      <a href="{{ categoria.link }}">{{ categoria.name }}</a>
      {% if categoria.children %}
        <ul class="menu-children">
          {% if categoria.images %}
            <img src="{{ categoria.images[0] }}" alt="{{ categoria.name }}">
          {% endif %}
          {% for child in categoria.children %}
            <li>
              <a href="{{ child.link }}">{{ child.name }}</a>
            </li>
          {% endfor %}
        </ul>
      {% endif %}
    </li>
  {% endfor %}
</ul>

Output

<ul>
    <li>
      <a href="www.sualoja/ExemploA">CategoriaA</a>
        <ul class="menu-children">
            <img src="https://caminhoimg.com.br/img.png" alt="CategoriaA">
            <li>
              <a href="CategoriaA-1">CategoriaA-1</a>
            </li>
            <li>
              <a href="CategoriaA-2">CategoriaA-2</a>
            </li>
            <li>
              <a href="CategoriaA-3">CategoriaA-3</a>
            </li>   
        </ul>
    </li>
    <li>
      <a href="www.sualoja/ExemploA">CategoriaB</a>
        <ul class="menu-children">
            <li>
              <a href="CategoriaB-1">CategoriaB-1</a>
            </li>
            <li>
              <a href="CategoriaB-2">CategoriaB-2</a>
            </li>
            <li>
              <a href="CategoriaB-3">CategoriaB-3</a>
            </li>   
        </ul>
    </li>
</ul>

O uso do objeto categories só retorna as categorias que possuírem produtos cadastrados na plataforma.

Além do uso convencional o objeto categories também pode ser usado para consultar uma determinada categoria a partir de um índice passado no array.

Para exemplificar as possibilidades de uso do objeto categories, o código HTML abaixo mostra todos os atributos em uso e o exemplo de resultado desse código.

Input

{% for category in categories %}
  <div>
    <a class= "categoria-pai" href="{{ category.link }}">
      <strong>Categoria pai:</strong>{{ category.name }}
    </a>
    {% for child in category.children %}
      <div class="categoria-filha">
        <strong>Categoria FIlha: </strong> {{ child.name }}
        ID: {{ child.id }}  
        Parent ID: {{ child.parent_id }}
        Link: {{ child.link }}
        Slug: {{ child.slug }}
        Has Product: {{ child.has_product }}
      </div>
    {% endfor %}
  </div>
{% endfor %}

Output

<div>
    <a class= "categoria-pai" href="www.sualoja/roupas">
      <strong>Categoria pai:</strong> Roupas
    </a>
    <div class="categoria-filha">
      <strong>Categoria FIlha: </strong> Camisas
      ID: 9  
      Parent ID: 3
      Link: www.sualoja/roupas/camisas
      Slug: roupas/camisas
      Has Product: 1
    </div>
    <div class="categoria-filha">
      <strong>Categoria FIlha: </strong> Calças
      ID: 11  
      Parent ID: 3
      Link: www.sualoja/roupas/calcas
      Slug: roupas/calcas
      Has Product: 1
    </div>
</div>