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).
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.
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 scriptlet “skin url“. Exemplo:
1
2
3Se 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.
[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 à fucntion “contextmenu“.
Agora sim seu slider banner está pronto.
[/s2If]
Sucesso!