MENU

Comments (0) Frontend, Magento

Janelas Pop-up’s no Magento

Já vou começar esse post falando que eu não gosto de pop-up’s. Mas isso não muda o fato de que elas continuam existindo, e que podem ser utilizadas no Magento.

Então segue abaixo algumas dicas de como utilizar, e configurar o sistema de forma correta, para exibir qualquer tipo de conteúdo dentro dessas janelas saltitantes.

O template

O Magento já traz algumas configurações de template pra você, como páginas simples, páginas com colunas a esquerda/direita, páginas com três colunas, e também, páginas para popup. Como você pode observar em:

Então você pode abrir uma popup (janela) com cara de popup. Como é feito por exemplo nas imagens adicionais de cada produto.

Essas imagens são exibidas em uma janela sem cabeçalho ou rodapé que identifiquem sua página. Isso acontece porque no XML foi configurado que o template desta popup deveria usar o popup.phtml.

No código acima (catalog.xml) é possível ver a configuração do setTemplate informando que a página deve utilizar o modelo popup.phtml.

Abrindo uma popup

O código html para chamar uma página em popup é bem simples. Se você for alterar um arquivo phtml, pode observar o exemplo do media.phtml em:

É um link comum, mas sem informar url no href, e com evento onclick.

O primeiro parâmetro da função popWin, você informa a página (url) que deve ser aberta, o segundo parâmetro é o nome da sua janela, e o terceiro parâmetro são as especificações da janela (como largura, posição, barra de rolagem, etc).

Blocos em popup’s

Mas e se você quiser abrir qualquer bloco de conteúdo dentro de uma pop-up? Não tem mistério. Basta que você informe uma url válida no primeiro parâmetro do popWin().

Porém, nem todos os blocos do sistema possuem uma url de identificação, nesse caso precisamos criar uma url para eles. E a maneira mais simples seria:

Informe o título da página, URL, e deixe habilitado.

No menu a esquerda “Visual“, você pode alterar o leiaute para “Em Branco“.

No menu “Conteúdo” vem o detalhe mais importante, onde você vai informar qual bloco deseja exibir na popup, por exemplo: Cupom de desconto, calcular cep, newsletter, ou um bloco que você tenha criado.

Neste exemplo informei o bloco “Newsletter” por scriptlet:

Mantive o type e o template do bloco original, alterei apenas o name deste.

Colocando em prática

Apenas para mostrar o funcionamento do exemplo acima, vou abrir esta nova página CMS com o bloco newsletter, inserindo um link em um bloco estático do CMS.

Ao abrir este bloco você encontra os links “About Us” e “Customer Service“. Vamos adicionar um novo link com a chamada ao popWin().

Salve tudo, atualize o frontend, e veja o resultado.

Qualquer dúvida basta utilizar o Fórum da Escola Magento.

Sucesso!

Parceiros

Comments are closed.