Conheça melhor o jQuery Slider Evolution, um plugin jQuery que permite criar facilmente banners poderosos com controles e efeitos de transições muito agradáveis. Este artigo ensinará a usar essa importante ferramenta em sua loja Dotstore.

O Slider Evolution é um plugin JQuery que permite criar facilmente banners poderosos com controles e efeitos de transições muito agradáveis.

*Para adquirir a licença do plugin acesse o site http://codecanyon.net/item/jquery-slider-evolution/270714

Primeiramente precisamos da biblioteca jQuery. A Dotstore já possui um link fixo para o carregamento da biblioteca. Para obtê-la, basta adicionar ao seu arquivo “BarraTopo.htm” o seguinte parâmetro:

<script type="text/javascript" src="https://www.dotstore.com.br/dotstore/inc/extras/jquery.min.js"></script>

Após anexar a biblioteca jQuery à sua loja, precisamos também anexar o script do plugin adquirido:

<script type="text/javascript" src="##CaminhoDir##htm/jquery.slider.htm"></script>

Observação: No exemplo acima foi utilizada a Tag Especial “##CaminhoDir##” para linkar o caminho da loja, devido a url amigável no sistema Dotstore. Esse processo é necessário para que,independe de qual página o usuário esteja, o caminho sempre será o absoluto de sua loja.

Ou seja:

<script type="text/javascript" src="##CaminhoDir##htm/jquery.slider.htm"></script>

Será igual a:

<script type="text/javascript" src="http://www.DOMINIO.com.br/htm/jquery.slider.htm"></script>

Importante: o plugin precisa utilizar algumas classes padrões no CSS, dependendo de qual template você deseja utilizar.

Após anexarmos o Plugin e a biblioteca jQuery, é preciso anexar a função do slider à div que se deseja fazer o slider, exemplo:

<script>
jQuery(document).ready(function($) {
$("#DS_SliderContainer ").slideshow({   //Aqui definimos o id/classe da div que queremos aplicar o slider
    width      : 937, // Largura do banner
    height     : 205, // Altura do banner
    transition : 'explode'  //Tipo de transição de cada cena*
  });
});
</script>

<div>##BannerTopo##</div>

Observação: nesse exemplo utilizamos a TagEspecial ##BannerTopo##, que será explicada mais abaixo.

*O jQuery Slider Evolution permite o uso de vários tipos de transições. Consulte o link no começo do artigo.

Após realizar esses passos, é necessário inserir o caminho de cada cena no painel da loja Dotstore. Para isso, faça o login em sua loja virtual, e acesse: Menu Superior>> Banners>> Cadastrar.

Ao cadastrar o novo banner, atribua um título e clique na opção para a utilização HTML. Como no exemplo acima foi utilizada a TAG Especial ##BannerTopo##, é preciso marcar em “Local” como TOPO, em “Data inicial”, a data em que o banner irá ao ar, e, em “Data final”, a data em que o banner não será mais exibido.O “Status” deve estar ativo e, em “Exibição”, é preciso selecionar as páginas em que o banner aparecerá.

No campo para utilização do HTML, usa-se:

<div id="DS_SliderContainer">
	<div><img src="##CaminhoDir##imagens/Cena01.png" alt=""/></div>
	<div><img src="##CaminhoDir##imagens/Cena02.png" alt=""/></div>
	<div><img src="##CaminhoDir##imagens/Cena03.png" alt=""/></div>
	<div><img src="##CaminhoDir##imagens/Cena04.png" alt=""/></div>
	<div><img src="##CaminhoDir##imagens/Cena05.png" alt=""/></div>
</div>

Por fim, salve o banner e suba o arquivo HTM com os scripts do plugin e da biblioteca jQuery.

Até a próxima!