Janelas Pop-up’s no Magento

Escrito por Mario SAM

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:

app > design > frontend > base > default > template > page > popup.phtml

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:

app > design > frontend > base > default > default > template > catalog > product > view > media.phtml

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

<?php echo $this->htmlEscape($_image->getLabel()) ?>

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:

CMS > Páginas [Criar Página]

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:

{{block type="newsletter/subscribe" name="popup.newsletter" template="newsletter/subscribe.phtml"}}

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.

CMS > Blocos Estáticos [Footer Links]

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

  • Abrir uma popup com CMS
  • Salve tudo, atualize o frontend, e veja o resultado.

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

    Sucesso!

    O Autor

    Mario SAM

    Desenvolvedor Magento com certificação M1 Developer e M1 FrontEnd Developer. Graduado em Web Design e Programação, pós-graduado em Gestão de Projetos e TI. Não sou matemático mas estou aqui para somar.