banners

O objeto banners é responsável por trazer os banner cadastrados no painel e mostra-lo conforme características necessárias

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

Disponível nas páginas: todas
Para saber mais sobre como gerenciar banners acesse:
Wiki - Cadastrar Banners
Wiki - Cadastrar Banners Banner JavaScript
Wiki - Banner por Categoria ou Marca

Atributos Característica
{{ banner.home }} Exibido somente na página inicial do site. Antes dos produtos
{{ 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 }} Exibido na vitrine
{{ banner.showcase }} 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

Como no exemplo a baixo:

        
          {% if banners.home %}
             {{ banner.home }}
          {% endif %}
        
      
        
      <div id="bannerJS" class="banner-js">
          <img class="banner-js-loading" src="https://images5.tcdn.com.br/assets/store/img//loading.gif" alt="Carregando banner" style="display: none;">
          <style>
              #cake_skitter_56bb27b2eee00 {
              width: 1170px;
              height: 314px;
              }
          </style>
          <script type="text/javascript">
              //<![CDATA[

                              (function($){
                                  $(document).ready(function() {
                                      $(".banner-js-loading").hide();
                                      $("#cake_skitter_56bb27b2eee00").skitter({enable_navigation_keys: false, interval: 5000, velocity: 0.5, numbers: true, animation: "fade", stop_over: true, navigation: true, progressbar: false, dynamic_size: false});
                                  });
                              })(jQuery);

              //]]>
          </script>
          <div id="cake_skitter_56bb27b2eee00" class="box_skitter box_skitter_large">
              <ul style="display: none;">
                  <li>
                      <a href="https://sualoja.commercesuite.com.br/" target="_blank"><img src="https://images8.tcdn.com.br/img/img_prod/123/123_banner1.jpg" class="" alt=""></a>
                      <div class="label_text">
                          <p>Descrição Banner 1</p>
                      </div>
                  </li>
                  <li>
                      <a href="https://sualoja.commercesuite.com.br/" target="_blank"><img src="https://images8.tcdn.com.br/img/img_prod/123/123_banner2.jpg" class="" alt=""></a>
                      <div class="label_text">
                          <p>Descrição Banner 2</p>
                      </div>
                  </li>
              </ul>
              <a href="#" class="prev_button" style="display: block;">prev</a>
              <a href="#" class="next_button" style="display: block;">next</a>
              <span class="info_slide" style="display: block; left: 15px;">
                  <span class="image_number" rel="0" id="image_n_1_0">1</span>
                  <span class="image_number image_number_select" rel="1" id="image_n_2_0">2</span>
              </span>
              <div class="container_skitter" style="width: 1170px; height: 314px;">
                  <div class="image">
                      <a href="https://sualoja.commercesuite.com.br/" target="_blank"><img class="image_main" src="https://images8.tcdn.com.br/img/img_prod/123/123_banner2.jpg" style="display: inline;"></a>
                      <div class="label_skitter" style="width: 1170px; display: block;">
                          <p>Descrição Banner 2</p>
                      </div>
                  </div>
                  <div class="box_clone" style="left: 0px; top: 0px; width: 1170px; height: 314px; display: block;">
                      <a href="https://sualoja.commercesuite.com.br/" target="_blank"><img src="https://images8.tcdn.com.br/img/img_prod/123/123_banner2.jpg"></a>
                  </div>
                  <div class="box_clone" style="left: 0px; top: 0px; width: 1170px; height: 314px; display: block;">
                      <a href="https://sualoja.commercesuite.com.br/" target="_blank"><img src="https://images8.tcdn.com.br/img/img_prod/123/123_banner2.jpg"></a>
                  </div>
              </div>
          </div>
      </div>
      

Se você deseja criar o banner do seu jeito, poderá utilizar as seguinte informações, 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
{{ banners.home.link }} Link do banner
{{ banners.home.width }} Largura da imagem ou do objeto flash
{{ banners.home.height }} Altura da imagem ou do objeto flash
{{ banners.home.alt }} Texto alternativo para a imagem do banner
{{ banners.home.target }} Se o link vai abrir em uma nova janela ou na mesma
{{ banners.home.banner_alt }} 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 }}1 Intervalo da transição entre cada slide 3 a 10 (segundos)
{{ banners.extra1.velocity }}1 Velocidade da animação 0.5 | 1.0 | 1.5 | 2.0
{{ banners.extra1.animation }}1 Tipo da animação blind | block | cube | cubeSpread | fade | fadeFour | glassCube | horizontal | tube
{{ banners.extra1.stop_over }}1 Pausar a troca de slides quando o mouse estiver sobre o banner 0 | 1
{{ banners.extra1.navigation }}1 Tipos de navegação 0 | 1 | 2
{{ banners.extra1.progressbar }}1 Exibir barra de progresso 0 | 1
{% for slide in banners.extra1.slides %}1 Dados das imagens cadastradas image | link | label | target | width | height

1 Disponível apenas e banners em js.

Abaixo você pode ver alguns exemplos de como utilizar os banners:

No código a baixo é 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.

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

No código a baixo é 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

      {% 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 %}
      
  • Banner Extra

      {% 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 a baixo é exibido os dados das imagens cadastradas.

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