Slider Banner na Home com WOW Slider

Escrito por Mario SAM

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).

download wow slider

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.

publicando slider wow

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.


    
        skin_csswowslider/engine1/style.css
    
    
        skin_jswowslider/engine1/jquery.js
    

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:


...o seu conteudo pode ser diferente do meu dependendo das suas configurações de criação do banner...

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 scriptletskin url“. Exemplo:


  • Fotolia_474470_L
  • Fotolia_13409179_L
  • Fotolia_28309193_L
Fotolia_474470_L1 Fotolia_13409179_L2 Fotolia_28309193_L3

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.

wow-slider-jquery

[s2If !current_user_can(access_s2member_level1)]

Bônus

Usuários premium tem acesso a uma informação especial neste post. Uma configuração avançada para exibição das imagens.[/s2If] [s2If current_user_can(access_s2member_level1)]

Retirando a marca d’água [PREMIUM]

Quando o sistema cria seu slider banner, ele não faz um upload das suas imagens. Ele re-cria as imagens, alterando seu tamanho, e incluindo uma marca d’água.

Então você pode pegar as imagens originais, e sobrepor as imagens que contem a marca d’água. Mas lembre-se de manter o mesmo tamanho (width e height) nas imagens. As imagens ficam em:

wowslider > data1 > images

O sistema conta ainda com outro recurso para inserir marca d’água dinâmicamente, via javascript. Então abra o arquivo:

wowslider > engine1 > wowslider.js

E altere a palavra .show() por .hide() no código próximo à fucntioncontextmenu“.

Agora sim seu slider banner está pronto.

[/s2If]

Sucesso!

O Autor

Mario SAM

Desenvolvedor Magento com certificação M1 Developer e M1 FrontEnd Developer. Graduado em Web Design e Programação, pós-graduado em Gestão de Projetos e TI. Não sou matemático mas estou aqui para somar.