> For the complete documentation index, see [llms.txt](https://partners.tray.com.br/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://partners.tray.com.br/themes/construindo-seu-template/referencias/objetos/categories.md).

# categories

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

{% hint style="info" %}
**Disponível em todas as páginas.**\
**Para saber mais sobre categorias acesse:** [Cadastrar categorias](https://basedeconhecimento.tray.com.br/hc/pt-br/articles/6734145561243-Cadastrar-Categorias)
{% endhint %}

### 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. <mark style="color:red;">**¹**</mark>      |

{% hint style="danger" %} <mark style="color:red;">**¹**</mark> Para correto funcionamento é preciso que o loop de subcategorias esteja dentro de outro loop que percorre as categorias.
{% endhint %}

## 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:

{% code title="Input" %}

```html
<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>
```

{% endcode %}

{% code title="Output" %}

```html
<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>
```

{% endcode %}

{% hint style="warning" %}
O uso do objeto **`categories`** só retorna as categorias que possuírem produtos cadastrados na plataforma.
{% endhint %}

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.

{% code title="Input" %}

```html
{% 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 %}
```

{% endcode %}

{% code title="Output" %}

```html
<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>
```

{% endcode %}