banner

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

Disponível em todas as páginas. Para saber mais sobre como gerenciar banners acesse:

Cadastrar Banners

Cadastrar Banner JavaScript

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:

Atributos	Característica
{{ banner.home }}	Banner Home Desktop (Exibido somente na página inicial do site. Antes dos produtos). Sugerida exibição para o Desktop.
{{ banner.mobile }}	Banner Home Mobile (Exibido somente na página inicial do site. Antes dos produtos). Sugerida exibição para o Mobile.
{{ banner.footer }}	Exibido em todas as páginas, no rodapé.
{{ banner.bottom }}	Banner exibido na pagina na parte inferior
{{ banner.side }}	Exibido em todas as páginas, na lateral da loja
{{ banner.title }}	Exibido em todas as páginas antes do título
{{ banner.floating }}	Exibido na vitrine, apenas arquivos em FLASH
{{ banner.popup }}	Abre uma nova janela do navegador contendo somente o banner. Depreciado
{{ banner.showcase }}	Banner Vitrine (Exibido somente na página inicial do site, ao lado do menu de categorias.)
{{ banner.extra1 }}	Exibido em layouts personalizados
{{ banner.extra2 }}	Exibido em layouts personalizados
{{ banner.extra3 }}	Exibido em layouts personalizados
{{ banner.extra4 }}	Exibido em layouts personalizados
{{ banner.extra5 }}	Exibido em layouts personalizados
{{ banner.extra6 }}	Exibido em layouts personalizados
{{ banner.extra7 }}	Exibido em layouts personalizados
{{ banner.extra8 }}	Exibido em layouts personalizados
{{ banner.extra9 }}	Exibido em layouts personalizados
{{ banner.extra10 }}	Exibido em layouts personalizados
{{ banner.extra11 }}	Exibido em layouts personalizados
{{ banner.extra12 }}	Exibido em layouts personalizados

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}

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

¹ Disponível apenas para banners rotativos do tipo JavaScript.

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:

exemplo.twig

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

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.

banner.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 %}

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

banner-home.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 %}

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.

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

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.

banner-extra.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 %}

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

banner-extra.html

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