(Module) Módulo EAccordion

Accordions são aqueles anúncios, com imagens e mensagens que se abrem e fecham, à moda de um acordeão (sanfona).

Ocorre que estou trabalhando em um, mas está com alguns pequenos problemas para a versão 1.1 do PrestaShop. Já para as versões 1.2.1 e 1.2.2, ele funciona muito bem.

Eu buscava uma solução simples para mostrar meus anúncios, que fosse fácil de trocar as imagens, que o o conteúdo fosse traduzível e que fosse versátil sua pesonalização.

Então está no forno o meu E Accordion, com css próprio e baseado em javascript.

Como um imagem vale mais que mil palavras, o mesmo pode ser conferido em PS 1.2.2 e em PS 1.1.

Características

- O envio das imagens ajustado automaticamente para o conteúdo correto.

- Aceita qualquer extensão de imagem, mas em uma ordem – png, jpg e gif – se houver duas imagens iguais, a png tem prioridade e assim por diante. Se nenhuma houver, um imagem padrão é mostrada.

- Estou ajustando para que possa ser escolhido um entre vários estilos de accordion, o mostrado nos sitios de exemplo, é um entre quatro a serem escolhidos.

- Estou ajustando para que possa ser atribuído um link às imagens, opcional e automático.

- O conteúdo texto é adicionado através da aba Ferramentas>Traduções>Traduções dos módulos:EAccordion. Assim é possível postar conteúdos em todas as línguas que a loja trabalhe.

- A idéia é facilitar o máximo, sem ter que recorrer a flash e outras soluções mais complicadas, se bem que mais poderosas.

- Vamos ver no que vai dar! Já que feed back aqui é coisa rara. Esse blog, apesar de ter um tráfego considerável, entre 300 a 500 visita por dia, se bem que modesto, raramente alguém posta um comentário, sugestão ou até crítica. Dessa forma fica difícil ter ânimo para compartilhar gratuitamente o trabalho. Ainda bem que é um hobby.

- A minha versão instalável em português, com meu pacote de idiomas, módulos e frete pré-configurados, está pronta há muito tempo. Só não sei quando irei postar.

S3s Slider v1.0 – Review

O S3s Slider v1.0 é um modulo que, muito embora tenha sido produzido com a finalidade de substituir o Editor da página principal v1.4 do PrestaShop, no que tange à funcionalidade, não o sobreescreve.

Sua história começa com uma proposta de modificação no Editor da página principal v1.4 realizada no Fórum PrestaShop Indonésia, a qual incluia a inserção de um slideshow baseado em javascript – o S3Slider jQuery plugin.

A instalação dessa primeira versão altera todo o código do arquivo editorial.tpl (modelo de layout) do Editor da página principal v1.4 e adiciona algum ao global.css do tema em uso. O arquivo Editorial.zip disponível para descarga pela afasyah.web.id, já inclclui o s3Slider.js e o editorial.tpl modificado, bem como imagens de exemplo, de modo que resta apenas editar o global.css do tema copiar seu conteúdo sobrescrevendo se necessário para a pasta /módulos/editorial para conluir a operação.

Em seguida, uma primeira alteração foi sugerida por JOLVIL, membro do Fórum PrestaShop Francófono e do Psfrance.org – Communauté française de PRESTASHOP: a de que um arquivo css poderia ser posto na pasta do módulo e adicionada uma linha para chamada deste na primeira linha do arquivo editorial.tpl:

<style type="text/css">@import url({$this_path}filename.css);</style>

Então, a partir daí surgiram dois aperfeiçoamentos propostos por ele:

O editorials3slider – que é o módulo editorial com o slider no lugar da imagem, e

O S3s Slider v1.0 - que é um módulo à parte.

Justamente por não sobrescrever ou modificar o módulo editorial original – Editor da página principal v1.4 – e por sua instalação e atuação independente, que esta review trata do S3s Slider v1.0.

Instalação

É a padrão para os módulos prestashop. (1) Descompacte o arquivo s3slider.zip na pasta /modules da loja e (2) instále-o via aba Módulos no Back Oficce.

Não há problemas durante o processo, a única inconveniência é a ordem em que primeiramente aparece no Front Office:

O Editor da página principal v1.4 em seu lugar original e o S3s Slider v1.0 ocupando o espaço abaixo dos bloco de .

Na verdade, nada demais, bom por exemplo para verficar o layout e suas diferenças e/ou possibilidade de trabalharem conjuntamente.

Os temas utilizados para teste, foram o et-auto-shop, et-black, da Ezy Trader Design e o padrão prestashop.

Configuração

Para ajustar o S3s Slider v1.0 para que fique na posição correta, o que aqui significa, onde está o Editor da página principal v1.4, basta tomar algumas medidas simples:

- No Back Office>>Módulos, desinstalar, se desejar, o Editor da página principal v1.4;

- Ainda nessa aba, clicar acima em >>Posições, encontrar o módulo S3s Slider v1.0 e subí-lo para acima do bloco de .

Desta forma o que estava assim:

Ficará então desta forma:

O resultado no Front Office será algo parecido como isto:

Note que o tema et-auto-shop, pioneiramente, já traz embutido um slider.

Assim ao instalar-lo sobre ele, abriu-se a possibilidade de trabalhar com ambos. Coisa que pode ser implementada semelhantemente com outros temas, caso opte-se por deixar instalado o Editor da página principal v1.4.

Para ajustar aspectos como fonte, tamanho e altura das imagens e cor, entre outros, basta editar o arquivo s3slider.css do S3s Slider v1.0.

Para editar os textos que aparecem nas imagens, basta fazê-lo no arquivo s3slider.tpl do S3s Slider v1.0. Caso altere ou adicione mais imagens, pode-se obedecer a nomenclatura e ordem numéricas (1,2,3,4,5….). De qualquer forma, as informe corretamente afim de que funcione.

Para atribuir uma URL às imagens, inclua-a entre as aspas (“”) após <a href=”” ao editar o arquivo s3slider.tpl do S3s Slider v1.0.

Para modificar o tempo de transição entre as imagens, editar o arquivo s3slider.tpl do S3s Slider v1.0, aumentando ou descrescendo o valor de “.s3Slider({timeOut: 4000})”.

Conclusão

O S3s Slider v1.0 é um módulo fácil de instalar e configurar. Pode-se criar os próprios banners de imagens promocionais e veículá-las no Front Office de maneira elegante e prática. Isto sem abalar o módulo editorial padrão do PrestaShop. Por ser simples, é um tanto limitado. Contudo o resultado final agrada pela versatilidade que se tem em trocar as imagens e seus textos em relação à algumas outras opções disponíveis, com o banner em flash (.swf). Ainda está em aprefeiçoamento e acredito que aos ppucos novas funcionalidades lhe serão acrescidas.

Para ver uma demonstração, visite a página de ZZ-SHOP.

Para saber mais sobre o S3s Slider v1.0, descarga e suporte, visite a discusão no Fórum PrestaShop Francófono.

Para mais informações sobre o plugin, visite sua página em  S3Slider jQuery plugin.

Módulo Top Page Peel – Review

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.

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

 

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

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.

Modulo Footer Data 1.1

Este módulo auxilia a inserir informações e links ao rodapé da página de sua loja e até um logo, se preferir.

Aceita também código html!

Para mais informações e descarga: Fórum PrestaShop Italiano

Jobdao Flash Slide Show

Deseja uma propaganda ou anúncio em sua página Editorial e não entende nada de Macromedia Flash? Nem possui o programa? Pois seus problemas acabaram.

Existe uma solução pronta e personalizável com um pouquinho de paciência e sem precisar conhecimento de programação.

Trata-se do Jobdao Flash Slide Show, programa em Flash que possui as seguintes características dentre outras:

Altamente personalizável ao designe do seu sitio.
Pode-se usar diferentes efeitos de transição para cada imagem.
Aceita imagens de qualquer tamanho para ajustar-se onde quiser em seu sitio.
Pode-se assinalar diferentes URL’s para cada imagem no slideshow.
Pode-se ajustar o número de segundos entre a mostra de uma imagem e outra.

Para mais informações e download:Flash Slide Show
——————————————————————————————–

Jobdao Flash Slide Show

Fully customizable to match any website style.
Use different transition effect for each of your images.
Set images to any size so it fits anywhere on your web page.
Assign different URL for each of the images on slideshow
Set number of seconds between showing next image.

For more info and to download:Flash Slide Show