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:

magento-inserir-pop-up-01

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.

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

2013-07-02T14:07:36+00:00

RECEBA DICAS VALIOSAS NO SEU EMAIL

x