Cursos Magento

Layout XML: Eles podem fazer muito mais por você

, ,

Atualizado em 10 de fevereiro de 2021

Eles estão por toda parte. Podem modificar seus blocos, chamar métodos em classes, trocar layout da sua página, ou do site inteiro, distinguir usuários e situações diversas, mudar páginas de categorias, páginas estáticas e muito, muito mais.

Você encontra alterações de layout via XML em módulos nativos, módulos de terceiros, temas, e até mesmo no painel administrativo da sua loja, no gerenciamento de produtos, categorias, páginas, blocos, e muitos outros lugares.

Poupando tempo e dinheiro

Saber o que alterar e como alterar, pode poupar tempo, trabalho, e dinheiro, pois em muitos casos um administrador que conhece este recurso não precisará de um desenvolvedor para realizar vários tipos de alterações, e poderá fazer isso diretamente no painel administrativo da loja, sem alterar nenhum arquivo.

No caso do desenvolvedor, ao ter uma boa noção do que pode fazer com este recurso, poderá aproveitar muito mais a flexibilidade que o Magento oferece.

E se o trabalho for em conjunto, ou seja, se o desenvolvedor e o administrador sabem como trabalhar com blocos e layout XML, a flexibilidade em termos de customizações e funcionalidades não terá limite.

Exemplo prático #1: adicionar um JS (ou script) em uma página, categoria e/ou produto específico

Como disse no parágrafo anterior, o administrador de uma loja pode realizar alterações de layout via XML em diversos lugares na área administrativa da loja.

Magento Layout Update
Área de atualização de Layout via XML na página de categoria

Adicionando o pequeno código abaixo seria possível adicionar um JS específico apenas à esta categoria.

<reference name="before_body_end">
    <block after="-" name="meuJs" type="core/text">
        <action method="setText">
            <param1><![CDATA[
<script type="text/javascript">alert('Olá Magenteiro');</script>
]]></param1>
        </action>
    </block>
</reference>

Na primeira linha, fazemos referência ao bloco before_body_end, que é acrescentado antes do fechamento da tag <body> em todos os temas (feitos seguindo as boas práticas do Magento). Este é um bloco que renderiza qualquer bloco que existir dentro dele.

Em seguida, criamos um bloco chamado “meuJs” do tipo core/text, que é um bloco da classe Mage_Core_Block_Text, nativo do Magento.

Na linha #3 informamos ao XML que gostaríamos de chamar o método setText deste bloco. Se você abrir o arquivo da classe deste bloco (app/code/core/Mage/Core/Block/Text.php), verá que o método setText precisa de um parâmetro apenas.

E é na linha 4 e 5 que especifico qual texto gostaria de passar como parâmetro para este método.

Por se tratar de um texto que contém tags html, coloquei tudo dentro de um grande <![CDATA[ ]]> para escapar os valores.

Isso pode ser feito com qualquer bloco, inclusive com blocos criados por nós, em nossos módulos, e serviria para qualquer situação onde queremos acrescentar algum texto, snippet, ou funcionalidade específica.

Simples, não?

Exemplo prático #2: Adicionar handle customizado para segmentar clientes (exemplo Magenteiro)

Como comentado neste outro artigo (Diferenças do Magento Community pro Magento Enterprise), segmentação de clientes é um recurso nativo no Magento Commerce (versão paga). No entanto, muito pode ser feito se o desenvolvedor conhecer um pouco sobre os handles do Magento.

Criar um handle customizado é muito simples, e uma vez criado, é possível segmentar nossos clientes, trazendo conteúdos diferenciados para cada segmento criado.

Se você é aluno do Magenteiro, talvez tenha notado que a URL do curso que você visualizou antes de se inscrever é a mesma URL que você utiliza quando visualiza o conteúdo restrito do seu curso.

Isso se dá através de um handle customizado, que detecta que um usuário logado comprou determinado curso. Por sua vez, uma simples atualização de template (phtml) faz com que o conteúdo da página do produto seja modificado, exibindo o conteúdo restrito do curso para o aluno que se inscreveu.

Para que serve um handle? Como criar um handle manualmente?

Toda página do Magento possuí um conjunto de handles, que indicam diversas situações onde as atualizações de layout via XML podem fazer efeito. Alguns exemplos de handles comuns são:

  • default – presente em todas as páginas
  • customer_logged_in – presente quando um cliente está logado
  • customer_logged_out – presente quando um cliente não está logado
  • catalog_category_view – quando um cliente está visualizando uma página de categoria
  • cms_page – presente quando uma página CMS está sendo exibida
  • customer_account_create – presente na página de criação de conta
  • checkout_cart_index – presente na página de carrinho

O handle é usado nas atualizações de layout para especificar onde aquela alteração deve surtir efeito (ou default para todas as páginas). Para obter uma lista completa de handles disponíveis, procure por “->addHandle” em toda pasta app/code/core do seu Magento.

Como desenvolvedor, você pode criar handles manualmente, através de módulos, desde que o handle seja adicionado antes do layout do site ser carregado. E isso pode ser feito através do evento controller_action_layout_load_before, bastando colocar um observer no seu módulo, da seguinte forma:

<?xml version="1.0"?>
<config>
    <!-- ... -->
    <frontend>
        <events>
            <controller_action_layout_load_before>
                <observers>
                    <meu_identificador_unico>
                        <type>model</type>
                        <class>meu_modulo/observer</class>
                        <method>adicionarHandle</method>
                    </meu_identificador_unico>
                </observers>
            </controller_action_layout_load_before>
        </events>
    </frontend>
</config>

E no observer…

#Arquivo: app/code/CODEPOOL/VENDOR/MODULE/Model/Observer.php
class Vendor_Module_Model_Observer
{
    public function adicionarHandle(Varien_Event_Observer $observer)
    {

        /** @var Mage_Core_Model_Layout $layout */
        $layout = $observer->getEvent()->getLayout();
        if (!$layout) {
            return;
        }
        
        $update = Mage::app()->getLayout()->getUpdate();
        $update->addHandle('MEU_HANDLE_CUSTOMIZADO');
    }
}

Você pode criar a validação que quiser para criar o seu handle personalizado. Você pode por exemplo:

  • criar um handle baseado no estado de origem do usuário
  • criar um handle baseado nas categorias ou produtos mais visitados dele
  • baseado na origem de onde veio este cliente

E com base nestes handles, e atualizações de layout XML, você poderia:

  • Exibir blocos especiais de ofertas para cada região do país, usando a linguagem do cliente
  • Exibir blocos de produtos da categoria mais visitada como sugestões de produtos
  • Exibir um tema diferente para um grupo de usuário específico
  • Exibir avisos específicos por tipo de usuário
  • o céu é o limite 🙂

Infelizmente não é possível especificar o handle que queremos realizar a alteração nas atualizações de layout, como mostrado no exemplo #1.

No entanto, você pode criar um bloco específico que recebe parâmetros via admin. É incrível o que se pode fazer com layout XML, não é mesmo?

Veja esses e outros exemplos, com mais detalhes, explicações, exemplos e dicas no video acima.

Foto principal por Émile Perron no Unsplash.

Últimos posts por Ricardo Martins (exibir todos)
Comentários

Deixe seu comentário

[fbcomments url="https://www.magenteiro.com/blog/magento-1/layout-xml-eles-podem-fazer-muito-mais-por-voce/"]