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:
- 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}
.
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.tracked_link }} | Link de tracking ou link rastreável |
{{ 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 %}
Comentários