Módulo Top Page Peel – Review

Postado em Atualizado em

Módulo para exibir uma página “descascando” no canto direito superior da loja.

Trata-se de uma contribuição da comunidade francesa do PrestaShop, em especial o Fórum PSFRANCE através de seu membro JOLVIL. Como mostrado na imagem ao lado, é adicionado um Peel, que nada mais é que uma imagem, com um link e um efeito de estar se ‘descascando’.

Pode-se ativá-lo ou desativá-lo a partir do Back Office. Existem duas imagens para alterar o resultado pretendido: cornersmall.png e cornerbig.png, sendo que o link pode ser modificado no arquivo JavaScript.

Uma demontração temporária pode ser vista em  ZZ-SHOP

Instalação

A instalação faz-se como qualquer outro módulo PrestaShop. Basta (1) descompactar o conteúdo do arquivo toppagepeel.zip no diretório /modules da loja e (2) na aba (guia) >Módulos do admin da sua loja, ativar o módulo Top Page Peel.

TopPagePeelInstall

Realizado isso, o Peel já aparecerá na página principal da loja.

toppagepeelshowonthecorner 

Basta passar o mouse na figura no canto superior direito para que ela se expanda.

toppagepeelshowexpanded

Caso, após a instalação o Peel não seja visível, verifique no arquivo pagepeel-jquery.js se todos as URL’s iniciam e terminam com aspas simples, por exemplo (‘./modules/toppagepeel/cornersmall.png‘) e de que todas as linhas possuem um ponto e vírgula final (;).

O resultado final deve ser algo parecido com isto:

jaaspeel.ad_url = escape(‘http://www.prestashop.com’); // Change URL to be redirected to when clicking Peel Away Ad
jaaspeel.small_path = ‘./modules/toppagepeel/small.swf’;
jaaspeel.small_image = escape(‘./modules/toppagepeel/cornersmall.png’);
jaaspeel.small_width = ‘100’;
jaaspeel.small_height = ‘100’;
jaaspeel.small_params = ‘ico=’ + jaaspeel.small_image;

jaaspeel.big_path = escape(‘./modules/toppagepeel/large.swf’);
jaaspeel.big_image = ‘./modules/toppagepeel/cornerbig.png’;

Configuração

– Para editar imagens, basta alterar as imagens cornersmall.png e cornerbig.png.
– Para mudar o link da página Peel, abra “pagepeel-jquery.js” e substituir a seguinte linha pela URL desejada:

jaaspeel.ad_url = escape(‘http://www.prestashop.com/’);

– Para abrir o link na página Peel na mesma janela, é necessário fazer um target = “_self” no arquivo large.fla e, em seguida, criar um novo arquivo large.swf conforme mostrado aabaixo:

In Scene 1, frame 44, I changed the actionScript, line 10, from "getURL(_root.ad_url, "_blank");" to "getURL(_root.ad_url, "_self");"

No entanto, o autor adverte que há alguns problemas a serem resolvidos, como uma certa incompatibilidade com a imagem no Bloco Editorial e outra com as camadas, a qual torna o Peel muito feio. Desta forma, ele disponibiliza acesso direto à esses arquivos a fim de que quem possa colaborar, solucione os problemas.

Pode-se descarregar os arquivos originais do Peel  Aqui.

E há um outro arquivo com correções ao large.fla Aqui, este é o que não possui problemas com a imagem do Bloco Editorial, mas no alinhamento das camadas.

As imagens estão no formato .png, mas é aceito .jpg também. Basta modificar as linhas correspondentes às imagens no arquivo pagepeel-jquery.js.

O tamanho do Peel é ajustado na linha 12, onde mostra:

jaaspeel.big_width = '650';
jaaspeel.big_height = '650';

Desta forma pode-se adequá-lo melhor ao tema utilizado de forma a ficar mais elegante. Em todos os temas por mim utilizados, o módulo funcionou perfeitamente.

Conclusão

O Top Page Peel é uma solução possível para marketing e propaganda muito criativo. Em que pese alguns pequenos problemas de configuração, é uma ferramenta muito útil para atrair a atenção do cliente em opção ao banner. Poderia haver uma maneira mais dinâmica e interativa de substituir as imagens via Back Office, como também das URL’s. Mas é tão simples que basta um pouco de paciência para poder personalizá-lo de acordo com as necessidades de sua loja.

Para mais informações, suporte e descarga, visite o sitio do Fórum PrestaShop.

2 comentários em “Módulo Top Page Peel – Review

    Joana disse:
    maio 27, 2011 às 2:46 pm

    dá para por na página inicial uma cornersmall.png e numa página de produto outra cornersmall.png?

    regards.

      ehinarr respondido:
      junho 2, 2011 às 8:36 pm

      Realmente não sei dizer, este é um módulo da comunidade internacional. Mas é uma idéia muito boa. O criador do modulo seria a pessoa certa para te informar isso.

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s