Magento – Inserindo pop-up na home

Olá Pessoal, hoje trazendo uma nova dica super interessante e simples para você divulgar um produto ou promoção na sua página inicial.

Se você precisa divulgar um produto, promoção ou simplesmente avisar o cliente sobre algum evento que irá participar seria interessante inserir um “pop-up” logo que o usuário entre n a sua loja Magento. Algo do tipo:

 

Existem diversos códigos na internet para fazer isso, porém nada (ou se existe eu não encontrei) específico para Magento.

Vamos à implementação desse pop-up, lembrando que minha intenção é trazer uma solução simples que qualquer um possa fazer em sua loja sem alterar muito código.

 

CODIFICAÇÃO

Para fazer a pop-up da imagem acima eu utilizei o jQuery FancyBox, que é um excelente substituto do lightbox e muito simples de usar também. O primeiro passo então é baixar os arquivos do Fancybox e subir (de preferência) na pasta skin/frontend/<seu tema>/default/js. Você encontra os arquivos e outras informações sobre o Fancybox no site: http://fancyapps.com/fancybox/

 

Caso você não esteja utilizando a jQuery na sua loja, será necessário carregá-la para que o Fancybox funcione. Normalmente a jQuery já é incluída no conjunto de arquivos do Fancybox dentro da pasta lib.

Feitos os devidos downloads, vamos criar um Bloco Estático onde iremos inserir a imagem do pop-up. Coloque o id popup_home. Suba a imagem do popup pelo próprio editor e anote o endereço de acesso a essa imagem.

No campo do editor insira o seguinte código:

<a id=”trigger_fancybox” style=”display: none” href=”http://www.shopantenas.com.br/imagens/aviso-importante.jpg”>#</a> <script> jQuery(document).ready(function() { jQuery(“#trigger_fancybox”).fancybox({ ‘zoomSpeedIn’: 300, ‘zoomSpeedOut’: 300, ‘overlayShow’: true, ‘autoDimensions’:false, ‘width’:500, ‘height’:500 }).trigger(‘click’); }); </script>

Salve o seu bloco estático.

Agora vá em CMS->Páginas e encontre a sua página home. Abra a aba Template e no campo Atualização de layout XML adicione o seguinte código:

<reference name=”head”> <action method=”addItem”><type>skin_css</type><name>js/fancybox.css</name></action> <action method=”addItem”><type>skin_js</type><name>js/jquery.js</name></action> <action method=”addItem”><type>skin_js</type><name>js/fancybox.js</name></action> </reference> <reference name=”content”> <block type=”cms/block” name=”popup_home”> <action method=”setBlockId”><block_id>popup_home</block_id></action> </block> </reference>

 

Pronto, agora é só salvar a sua página, atualizar o cache e ver o resultado. Apenas reforçando que essa solução insere o pop-up apenas na página inicial da sua loja. Em breve posto uma nova dica sobre como inserir essa pop-up em todas as páginas da loja.

 

Boa sorte!

8 Responses to “Magento – Inserindo pop-up na home”

  1. Bruno Tavares

    Ótimo tutorial amigo, realmente não existe tantos tutoriais sobre o assunto na web, ainda mais para o magento.

    Tenho uma dúvida, é possível fazer com que o pop-up abra apenas uma vez por visitante? no caso criando cookies?

  2. wagner

    baixei, fiz tudo que mandou mais não deu certo o que será que eu fiz de errado, poderia me indicar.
    baixei o fancybox e coloquei no local indicado, mais la ja tinha. e fiz o upload mesmo assim de tudo que veio .
    me diz o que eu fiz de errrado

  3. Leandro

    Os nomes dos arquivos do fancybox no código deste tutorial estão diferente dos nomes dos arquivos fonte. Para funcionar é preciso corrigi-los.

  4. Anderson

    Não funcionou, gostaria de saber quais arquivos teremos que subir no servidor, pois vi que o link de onde baixamos os arquivos não é do site. Gostaria de uma solução.

  5. marco

    Fiz como no tutorial só que não deu certo, parece que os arquivos baixados e versão 2.15 e são diferentes.

  6. Giordani

    Gostaria de saber se tem como colocar um link no banner para redirecionar para outra página?
    Parabéns pelo tutorial.