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

Como no exemplo a baixo:

• HTML
• Resultado

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

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

Frontend - Agencia

23 de setembro de 2020 17:45