Cursos Magento

Linhas de endereço amigáveis no Magento 2 (com módulo)

,

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.

Configuração de linhas de endereço Magento 2

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.

Atributos de endereço no Magento 2

 

 

 

 

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.

Campos de endereço com descrição no Magento 2

 

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_len‌​gth" => 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_len‌​gth" => 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_len‌​gth" => 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_len‌​gth" => 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.

Magento 2.3.2

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.

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

Deixe seu comentário

[fbcomments url="https://www.magenteiro.com/blog/magento-2/linhas-endereco-amigaveis-magento2/"]