Linhas de endereço amigáveis no Magento 2 (com módulo)
Desenvolvimento, Magento 2
Atualizado em 16 de agosto de 2019
Este artigo foi inspirado em uma pergunta feita no grupo secreto dos alunos do curso de Magento 2 do Magenteiro. O módulo final está disponível no fim do artigo.
Assim como no Magento 1, as linhas de endereço nativos do Magento 2 podem ser configuráveis.
Em Store>Configurations>Customers>Configurations>Name and address options você pode alterar o número de linhas do endereço, para suportar complemento e bairro.
Estes atributos de endereço são muito comuns em lojas brasileiras, sendo o “complemento” obrigatório na maioria dos meios de pagamento.
Por padrão, somente 2 linhas de endereço são exibidas e sem nenhuma informação. Idealmente, alteramos o valor acima pra 4.
A customização dos labels e validações no Magento 2 são feitas através da criação de uma classe do tipo Plugin. Ela deverá alterar a saída o método process da classe Magento\Checkout\Block\Checkout\LayoutProcessor
.
Desta forma, o cliente poderá ter uma experiência mais amigável ao preencher os dados de endereço.
Como implementar os labels de endereço?
Assumindo que você já criou um módulo base para Magento 2, e alterou as configurações para 4 linhas, vamos então criar um Plugin.
Para fazer isso, crie dentro da pasta do módulo os seguintes arquivos:
<type name="Magento\Checkout\Block\Checkout\LayoutProcessor"> <plugin name="rewrite-street" type="Vendor\ModuelName\Model\Checkout\LayoutProcessorPlugin" sortOrder="10"/> </type>
<?php namespace Vendor\ModuleName\Model\Checkout; class LayoutProcessorPlugin { /** * @param \Magento\Checkout\Block\Checkout\LayoutProcessor $subject * @param array $jsLayout * @return array */ public function afterProcess( \Magento\Checkout\Block\Checkout\LayoutProcessor $subject, array $jsLayout ) { $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children'] ['shippingAddress']['children']['shipping-address-fieldset']['children']['street'] = [ 'component' => 'Magento_Ui/js/form/components/group', //'label' => __('Street Address'), //desabilitamos o label principal 'required' => false, //mudamos para false caso tehamos desabilitado o label acima 'dataScope' => 'shippingAddress.street', 'provider' => 'checkoutProvider', 'sortOrder' => 0, 'type' => 'group', 'additionalClasses' => 'street', 'children' => [ [ 'label' => __('Label 1'), 'component' => 'Magento_Ui/js/form/element/abstract', 'config' => [ 'customScope' => 'shippingAddress', 'template' => 'ui/form/field', 'elementTmpl' => 'ui/form/element/input' ], 'dataScope' => '0', 'provider' => 'checkoutProvider', 'validation' => ['required-entry' => true, "min_text_length" => 1, "max_text_length" => 255], ], [ 'label' => __('Label 2'), 'component' => 'Magento_Ui/js/form/element/abstract', 'config' => [ 'customScope' => 'shippingAddress', 'template' => 'ui/form/field', 'elementTmpl' => 'ui/form/element/input' ], 'dataScope' => '1', 'provider' => 'checkoutProvider', 'validation' => ['required-entry' => true, "min_text_length" => 1, "max_text_length" => 255], ], [ 'label' => __('Label 3'), 'component' => 'Magento_Ui/js/form/element/abstract', 'config' => [ 'customScope' => 'shippingAddress', 'template' => 'ui/form/field', 'elementTmpl' => 'ui/form/element/input' ], 'dataScope' => '2', 'provider' => 'checkoutProvider', 'validation' => ['required-entry' => true, "min_text_length" => 1, "max_text_length" => 255], ], [ 'label' => __('Label 4'), 'component' => 'Magento_Ui/js/form/element/abstract', 'config' => [ 'customScope' => 'shippingAddress', 'template' => 'ui/form/field', 'elementTmpl' => 'ui/form/element/input' ], 'dataScope' => '3', 'provider' => 'checkoutProvider', 'validation' => ['required-entry' => false, "min_text_length" => 1, "max_text_length" => 255], ], ] ]; return $jsLayout; } }
E depois basta criar o csv com as traduções dos Labels na pasta i18n/pt_BR.csv
do seu módulo.
Altere Vendor
e ModuleName
para os nomes do seu respectivo módulo, e revise as alterações para ficar do jeito que você quer.
Dá pra ser mais fácil?
Dá sim. Eu criei um módulo com esta solução, já incluindo os arquivos de tradução e publiquei no nosso grupo secreto. Você pode se inscrever no curso de Magento 2 para ter acesso a esse e outros materiais, ou fazer download só deste módulo aqui mesmo.
Para receber o módulo pronto, preencha seu nome e e-mail abaixo. Você receberá o módulo Magenteiro_StreetLines
em até 15 minutos, e passará a receber as novidades de cursos e artigos exclusivos do Magenteiro. Você pode se descadastrar a qualquer momento.
Grande abraço e até a próxima.
Tanto este artigo como o módulo disponível aqui foram inspirados na solução do Eduardo Dias, publicada no StackExchange com algumas modificações.
Update Magento 2.3.2
O módulo acima funciona até a versão 2.3.0, mas não funciona na 2.3.2 devido a uma alteração no tema Luma (e temas que estendem ele). Por alguma razão os labels ficaram escondidos atrás dos inputs em um update feito no Magento_Customer dentro do tema Luma.
Para realizar a correção, você precisará implementar o seguinte arquivo no seu tema:
& when (@media-common = true) { .field.street { .field { .label { clip: inherit; width: inherit; height: inherit; position: inherit; } } } }
Esta alteração fará com que os campos voltem a aparecer. Você precisará re-gerar os arquivos estáticos.
Note que quando cheguei a esta solução ainda não tenho domínio sobre como realizar alterações eficientes no front end do Magento 2. Se você tem uma solução melhor para o problema, por favor compartilhe nos comentários.
Se você não sabe como criar a estrutura básica de um tema, considere se inscrever no meu Curso de Magento 2 aqui no Magenteiro.
Provavelmente isso será corrigido em versões futuras.
- Recorrência no WooCommerce Sem Plugins Pagos - 28 de janeiro de 2024
- Chargeback. O que é, e como se livrar deles. - 19 de dezembro de 2023
- Integração PagBank Nova Geração – Um guia rápido - 31 de outubro de 2023
Deixe seu comentário
[fbcomments url="https://www.magenteiro.com/blog/magento-2/linhas-endereco-amigaveis-magento2/"]