Slider Banner na Home com WOW Slider

Se existe algo que impressione a grande maioria dos usuários na visualização de sites, é o recurso de slider com super banners em destaque.

É algo quase hipnotizante, que prende sua atenção pela beleza e curiosidade.

E essa moda virou praticamente uma regra geral, todos os sites de comércio eletrônico usam super banners com efeito transitório, alguns aliás usam apenas isso na página inicial.

Então veremos como adicionar este efeito mágico na página inicial da sua loja Magento.

Neste exemplo usaremos um sistema feito em jQuery chamado WOW Slider, mas a verdade é que o exemplo a seguir funciona pra qualquer outro tipo de sistema pronto que você encontrar pela web.

Fazendo o download do sistema

No site oficial da WOW Slider você encontra diversas informações de uso, inclusive em português brasil (parece ser traduzido pelo google translator).

magento-imagem-banner

Então não tem mistério, você clica no menu do alto da tela “Download“, informa um nome e email, e já pode baixar sua versão (para Mac ou Windows).

Quando finalizar o download você deve instalar o software na sua máquina.

Criando seu slider

Eu não vou ensinar a usar o WOW Slider, até porque o site oficial está cheio de informação, dicas, e modelos.

Então basta acessar o menu “Ajuda Rápida” para descobrir os segredos e inúmeras possibilidades de criação.

magento-imagem-banner-01

O importante neste momento é você selecionar suas imagens, ajustar suas configurações e clicar em “Publish“.

Antes disso defina o local onde os arquivos serão gerados, pois você vai precisar copiar os arquivos na sequência.

Não é preciso salvar o projeto.

Vai pro Magento

Agora você vai acessar o diretório onde foi criado a pasta “WOW Slider” e fazer uma cópia da pasta inteira para o seu diretório Magento, em:

skin -> frontend -> default -> default -> wowslider

Nesse caso eu alterei o nome da pasta de “WOW Slider” para “wowslider“.

Isso poderia ter sido feito antes, no momento em que você clica em “Publish“.

Lembrando que, você pode alterar o diretório default/default para o seu template/tema customizado.

A integração

Agora que você já “instalou” o slider banner no seu sistema, vamos fazer a integração dele com suas páginas, neste caso, apenas uma página – a home.

Para isso acesse:

CMS -> Páginas [Página Inicial]

Ao editar a página você tem no menu lateral [ Visual ] o campo “Atualização de Leiaute por XML“.

Basta adicionar o import do javascript e do css conforme ensinado no post:

Como adicionar javascript ao código.

<reference name="head">
<action method="addItem">
<type>skin_css</type><name>wowslider/engine1/style.css</name>
</action>
<action method="addItem">
<type>skin_js</type><name>wowslider/engine1/jquery.js</name>
</action>
</reference>

Então tudo que precisamos fazer é adicionar os itens (css e js) à referência “head” do template, passando o caminho (name) do nosso pacote “wowslider“.

Banner na Tela

Para finalizar então, precisamos colocar o código gerado pelo WOW Slider no conteúdo da nossa página.

Para isso abra o arquivo index.html criado pelo WOW Slider e copie tudo que estiver entre:

<!-- Start WOWSlider.com BODY section -->
...o seu conteudo pode ser diferente do meu dependendo das suas configurações de criação do banner...
<!-- End WOWSlider.com BODY section -->

E cole no campo “Contéudo” da sua página.

Antes de salvar a página você precisa fazer alguns ajustes no código, conforme já ensinado no post: Como escrever URL no código.

Ou seja, altere todos os caminhos fixos de img e script usando o scriptlet “skin url“.

Exemplo:

<!-- Start WOWSlider.com BODY section -->
<div id="wowslider-container1">
<div class="ws_images">
<ul>
<li><img id="wows1_0" title="Fotolia_474470_L" src="{{skin url='wowslider/data1/images/fotolia_474470_l.jpg'}}" alt="Fotolia_474470_L" /></li>
<li><img id="wows1_1" title="Fotolia_13409179_L" src="{{skin url='wowslider/data1/images/fotolia_13409179_l.jpg'}}" alt="Fotolia_13409179_L" /></li>
<li><img id="wows1_2" title="Fotolia_28309193_L" src="{{skin url='wowslider/data1/images/fotolia_28309193_l.jpg'}}" alt="Fotolia_28309193_L" /></li>
</ul>
</div>
<div class="ws_bullets">
<div><a title="Fotolia_474470_L" href="#"><img src="{{skin url='wowslider/data1/tooltips/fotolia_474470_l.jpg'}}" alt="Fotolia_474470_L" />1</a> <a title="Fotolia_13409179_L" href="#"><img src="{{skin url='wowslider/data1/tooltips/fotolia_13409179_l.jpg'}}" alt="Fotolia_13409179_L" />2</a> <a title="Fotolia_28309193_L" href="#"><img src="{{skin url='wowslider/data1/tooltips/fotolia_28309193_l.jpg'}}" alt="Fotolia_28309193_L" />3</a></div>
</div>
<div class="ws_shadow"></div>
</div>
<script src="{{skin url='wowslider/engine1/wowslider.js'}}" type="text/javascript"></script>
<script src="{{skin url='wowslider/engine1/script.js'}}" type="text/javascript"></script>
<!-- End WOWSlider.com BODY section -->

Se você fez tudo certo, basta salvar e atualizar sua página inicial para ver o resultado.

Se não funcionar, atualize o cache e reveja nomes, diretórios, e códigos.

magento-imagem-banner-02

Bônus

Usuários premium tem acesso a uma informação especial neste post.

Uma configuração avançada para exibição das imagens.

Sucesso!

[toggle title=”Fonte”]
http://mariosam.com.br/
[/toggle]

2015-06-29T19:33:11+00:00