# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://partners.tray.com.br/themes/construindo-seu-template/referencias/objetos/categories.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.