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

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​

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

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

Input:

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

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