# banner

O objeto `banner` é responsável por trazer um determinado banner cadastrado no painel e mostra-lo conforme características necessárias.

{% hint style="info" %}
**Disponível em todas as páginas.**\
**Para saber mais sobre como gerenciar banners acesse:**

[Cadastrar Banners](https://basedeconhecimento.tray.com.br/hc/pt-br/articles/6743567784603-Cadastrar-Banners)

[Cadastrar Banner JavaScript](https://basedeconhecimento.tray.com.br/hc/pt-br/articles/6743394900123-Banner-JavaScript-Banner-Rotativo)
{% endhint %}

### Atributos disponíveis

Para imprimir um `banner`, você poderá utilizar o helper de banner, onde exibem os banners em um bloco pré-moldado. Segue abaixo algumas chamadas:

<table><thead><tr><th width="196.4968152866242">Atributos</th><th>Característica</th></tr></thead><tbody><tr><td><code>{{ banner.home }}</code></td><td>Banner Home <strong>Desktop</strong> (Exibido somente na página inicial do site. Antes dos produtos). Sugerida exibição para o Desktop.</td></tr><tr><td><code>{{ banner.mobile }}</code></td><td>Banner Home <strong>Mobile</strong> (Exibido somente na página inicial do site. Antes dos produtos). Sugerida exibição para o Mobile.</td></tr><tr><td><code>{{ banner.footer }}</code></td><td>Exibido em todas as páginas, no rodapé.</td></tr><tr><td><code>{{ banner.bottom }}</code></td><td>Banner exibido na pagina na parte inferior</td></tr><tr><td><code>{{ banner.side }}</code></td><td>Exibido em todas as páginas, na lateral da loja</td></tr><tr><td><code>{{ banner.title }}</code></td><td>Exibido em todas as páginas antes do título</td></tr><tr><td><code>{{ banner.floating }}</code></td><td>Exibido na vitrine, apenas arquivos em FLASH</td></tr><tr><td><code>{{ banner.popup }}</code></td><td><del>Abre uma nova janela do navegador contendo somente o banner.</del> <mark style="background-color:red;">Depreciado</mark></td></tr><tr><td><code>{{ banner.showcase }}</code></td><td>Banner Vitrine (Exibido somente na página inicial do site, ao lado do menu de categorias.)</td></tr><tr><td><code>{{ banner.extra1 }}</code></td><td>Exibido em layouts personalizados</td></tr><tr><td><code>{{ banner.extra2 }}</code></td><td>Exibido em layouts personalizados</td></tr><tr><td><code>{{ banner.extra3 }}</code></td><td>Exibido em layouts personalizados</td></tr><tr><td><code>{{ banner.extra4 }}</code></td><td>Exibido em layouts personalizados</td></tr><tr><td><code>{{ banner.extra5 }}</code></td><td>Exibido em layouts personalizados</td></tr><tr><td><code>{{ banner.extra6 }}</code></td><td>Exibido em layouts personalizados</td></tr><tr><td><code>{{ banner.extra7 }}</code></td><td>Exibido em layouts personalizados</td></tr><tr><td><code>{{ banner.extra8 }}</code></td><td>Exibido em layouts personalizados</td></tr><tr><td><code>{{ banner.extra9 }}</code></td><td>Exibido em layouts personalizados</td></tr><tr><td><code>{{ banner.extra10 }}</code></td><td>Exibido em layouts personalizados</td></tr><tr><td><code>{{ banner.extra11 }}</code></td><td>Exibido em layouts personalizados</td></tr><tr><td><code>{{ banner.extra12 }}</code></td><td>Exibido em layouts personalizados</td></tr></tbody></table>

E se você deseja criar o banner do seu jeito, poderá utilizar as informações da tabela de atributos abaixo, substituindo o **home** pela posição de banner desejada. Lembrando que o padrão de chamada é sempre: `banners.{position}.{key}`

<table><thead><tr><th width="266.17034501085334">Atributos</th><th>Característica</th></tr></thead><tbody><tr><td><code>{{ banners.home.id }}</code></td><td>Identificador único do banner</td></tr><tr><td><code>{{ banners.home.type }}</code></td><td>Tipo do banner, valores possíveis: "<code>javascript</code>", "<code>image</code>", "<code>flash</code>", "<code>gallery</code>"</td></tr><tr><td><code>{{ banners.home.description }}</code></td><td>Descrição do banner</td></tr><tr><td><code>{{ banners.home.src }}</code></td><td>URL do banner, usado por exemplo no atributo <strong>src</strong> da tag <code>img</code>.</td></tr><tr><td><code>{{ banners.home.link }}</code></td><td>Link do banner, usado por exemplo no atributo <strong>href</strong> da tag <code>a</code>.</td></tr><tr><td><code>{{ banners.home.tracked_link }}</code></td><td>Link de tracking ou link rastreável, que quando usado contabiliza os cliques no banner. Usado por exemplo no atributo <strong>href</strong> da tag <code>a</code>.</td></tr><tr><td><code>{{ banners.home.width }}</code></td><td>Largura da imagem ou do objeto flash, usado no atributo <strong>width</strong> da tag <code>img</code>.</td></tr><tr><td><code>{{ banners.home.height }}</code></td><td>Altura da imagem ou do objeto flash, usado no atributo <strong>height</strong> da tag <code>img</code>. </td></tr><tr><td><code>{{ banners.home.alt }}</code></td><td>Usado no atributo <strong>alt</strong> da tag <code>img</code>, exibe o texto alternativo cadastrado para a imagem do banner</td></tr><tr><td><code>{{ banners.home.alternative_path }}</code></td><td>Usado no atributo <strong>src</strong> da tag <code>img</code> quando existem dois banners cadastrados na mesma posição para alternar entre as imagens a cada novo carregamento da loja.</td></tr><tr><td><code>{{ banners.home.target }}</code></td><td>Se o link vai abrir em uma nova janela ou na mesma,  usado no atributo <strong>target</strong> da tag <code>a</code>.</td></tr><tr><td><code>{{ banners.home.banner_alt }}</code></td><td>Exibe um banner alternativo caso não tenha suporte ao flash (apenas quando o tipo for "flash"), possui as chaves "src", "link", "target"</td></tr><tr><td><code>{{ banners.home.margin_top }}</code></td><td>Especifica a posição do banner referente ao topo da página (apenas banner "floating")</td></tr><tr><td><code>{{ banners.home.margin_left }}</code></td><td>Especifica a posição do banner referente ao lado esquerdo da página.</td></tr><tr><td><code>{{ banners.extra1.interval }}</code> <mark style="color:red;">¹</mark></td><td>Intervalo da transição entre cada slide definido para o banner que pode variar de 3 a 10 (segundos)</td></tr><tr><td><code>{{ banners.extra1.velocity }}</code> <mark style="color:red;">¹</mark></td><td>Velocidade da animação definida para o banner. Valores possíveis: <code>0.5</code> | <code>1.0</code> | <code>1.5</code> | <code>2.0</code></td></tr><tr><td><code>{{ banners.extra1.animation }}</code> <mark style="color:red;">¹</mark></td><td>Tipo da animação definida para o banner. Valores possíveis: <code>blind</code> | <code>block</code> | <code>cube</code> | <code>cubeSpread</code> | <code>fade</code> | <code>fadeFour</code> | <code>glassCube</code> | <code>horizontal</code> | <code>tube</code></td></tr><tr><td><code>{{ banners.extra1.stop_over }}</code> <mark style="color:red;">¹</mark></td><td>Pausar a troca de slides quando o mouse estiver sobre o banner. Valores possíveis: <code>0</code> | <code>1</code></td></tr><tr><td><code>{{ banners.extra1.navigation }}</code> <mark style="color:red;">¹</mark></td><td>Tipos de navegação. Valores possíveis: <code>0</code> | <code>1</code> | <code>2</code></td></tr><tr><td><code>{{ banners.extra1.progressbar }}</code> <mark style="color:red;">¹</mark></td><td>Exibir barra de progresso. Valores possíveis:  <code>0</code> | <code>1</code></td></tr><tr><td><code>{% for slide in banners.extra1.slides %}</code> <mark style="color:red;">¹</mark></td><td>Loop para acessar dados das imagens cadastradas no banner definido. Valores possíveis de se consultar: <code>image</code> | <code>link</code> | <code>label</code> | <code>target</code> | <code>width</code> | <code>height</code></td></tr></tbody></table>

{% hint style="warning" %} <mark style="color:red;">¹</mark> Disponível apenas para banners rotativos do tipo JavaScript.
{% endhint %}

## Como Usar

A chamada do objeto no código HTML deve seguir como o formato básico abaixo, nesse código se o banner do tipo home estiver cadastrado ele será exibido:

{% code title="exemplo.twig" %}

```twig
{% if banners.home %}
    {{ banner.home }}
{% endif %}
```

{% endcode %}

No código abaixo é verificado se existe um banner, caso exista é exibido a imagem e seu link de acordo com suas dimensões e a forma de exibição do link.

{% code title="banner.html" %}

```html
  {% if banners.home %}
     <a href="{{ banners.home.link }}" target="{{ banners.home.target }}">
        <img src="{{ banners.home.src }}" width="{{ banners.home.width }}" alt="{{ banners.home.alt }}" >
     </a>
  {% endif %}
```

{% endcode %}

## Exemplo com Banner Home

No código abaixo é exibido o Banner alternativo caso não tenha suporte ao flash (apenas quando o tipo for "flash"), possui as chaves "`src`", "`link`", "`target`".

{% code title="banner-home.html" %}

```html
{% if banners.home.banner_alt %}
  {% set bannerAlt = banners.home.banner_alt %}
    <a href="{{ bannerAlt.link }}" target="{{ bannerAlt.target }}">
      <img src="{{ bannerAlt.src }}" alt="{{ bannerAlt.alt }}">
    </a>
{% endif %}
```

{% endcode %}

## Exemplo com Banner Home e Mobile

No código abaixo é exibido o Banner Home para os acessos Desktop e o Banner Mobile para acessos Mobile.

Lembrando que, caso cadastre somente o Banner Home, o mesmo será exibido tanto para os acessos Desktop quanto pelo Mobile.

{% code title="" %}

```html
{% if banner.home or banner.mobile %}
    {% if banner.mobile and utils.is_mobile %}
	    {{ banner.mobile }}          
	{% else %}
		{{ banner.home }}    
	{% endif %}
{% endif %}
```

{% endcode %}

## Exemplo com Banner Extra

No código abaixo é exibido o Banner Extra1 de forma alternada  a cada novo carregamento da loja, quando existirem dois banners cadastrados na mesma posição.

{% code title="banner-extra.html" %}

```html
{% if banners.extra1.alternative_path %}          
      <a href="{{ banners.extra1.link }}" target="{{ banners.extra1.target }}">                     
            <img src="{{ banners.extra1.alternative_path }}" alt="{{ banners.extra1.img_alt }}">                    
      </a>            
{% endif %}
```

{% endcode %}

No código abaixo é exibido todas as imagens cadastradas no Banner Extra1 utilizando o loop.

{% code title="banner-extra.html" %}

```html
{% for slide in banners.extra1.slides %}
    <a href="{{ slide.link }}" target="{{ slide.target }}">
        <img src="{{ slide.image }}" alt="{{ slide.label }}">
     </a>
{% endfor %}      
```

{% 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/banner.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.