> 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/producttabs.md).

# productTabs

## Abas da Página do Produto

O objeto `productTabs` é responsável por retornar as informações relacionadas as abas da Página do Produto.

Disponível para uso na página: product

Para saber mais sobre esse item acesse o link: [Personalização de Abas - Abas da Página do Produto](https://basedeconhecimento.tray.com.br/hc/pt-br/articles/6733559308315-Personaliza%C3%A7%C3%A3o-de-Abas-Abas-da-P%C3%A1gina-do-Produto)

O objeto `{{ productTabs }}` retorna um array contendo as informações relacionadas as abas da Página do Produto, contendo outro array de informações com os seguintes índices: `id` | `container_id` | `description` | `url`

### Atributos disponíveis​ <a href="#atributos-disponiveis" id="atributos-disponiveis"></a>

| Atributos      | Característica                                    |
| -------------- | ------------------------------------------------- |
| `id`           | Identificador da aba                              |
| `container_id` | Identificador do elemento                         |
| `description`  | Título do elemento                                |
| `url`          | Exibe uma string que corresponde ao trecho de URL |

### Como Usar&#x20;

Abaixo um exemplo da utilização do objeto Tabs, onde temos um loop retornando os itens.

**Input:**

```html
<div id="ProdAbas" class="abasProduto tab-panel">
    <ul>
        {% for tab in productTabs %}
          {% if tab.container_id %}
	          <li id="{{ tab.id }}" {% if tab.container_id=='description' %}class="aberta" {% endif %}>
	            <a href="#" data-tab-container-id="{{ tab.container_id }}" data-tab-url="{{ tab.url }}">{{ tab.description }}</a>
	          </li>
          {% endif %}
        {% endfor %}
    </ul>
</div>
```

**Output:**

```html
<div id="ProdAbas" class="abasProduto tab-panel">
    <ul>
        <li id="Aba1" class="aberta">
        	<a href="#" data-tab-container-id="#descricao" data-tab-url="">Descrição Geral</a>
        </li>
        <li id="Aba2">
        	<a href="#" data-tab-container-id="#itensInclusos" data-tab-url="">Itens Inclusos</a>
        </li>
        <li id="Aba3">
        	<a href="#" data-tab-container-id="#garantia" data-tab-url="/mvc/store/product/warranty?loja=1063484&IdProd=1">Garantia</a>
        </li>
        <li id="Aba4">
        	<a href="#" data-tab-container-id="#formasPagto" data-tab-url="/mvc/store/product/payment_options?loja=1063484&IdProd=1&IdVariacao=%s">Formas de Pagamento</a>
        </li>
        <li id="Aba5">
        	<a href="#" data-tab-container-id="#coments" data-tab-url="">Avaliações</a>
        </li>
    </ul>
</div>
```