{"id":1257,"date":"2019-01-29T02:07:18","date_gmt":"2019-01-29T04:07:18","guid":{"rendered":"https:\/\/magenteiro.com\/blog\/?p=1257"},"modified":"2019-08-16T05:39:59","modified_gmt":"2019-08-16T08:39:59","slug":"linhas-endereco-amigaveis-magento2","status":"publish","type":"post","link":"https:\/\/www.magenteiro.com\/blog\/magento-2\/linhas-endereco-amigaveis-magento2\/","title":{"rendered":"Linhas de endere\u00e7o amig\u00e1veis no Magento 2 (com m\u00f3dulo)"},"content":{"rendered":"
\n

Este artigo foi inspirado em uma pergunta feita no grupo secreto dos alunos do<\/span> curso de Magento 2 do Magenteiro.<\/a> O m\u00f3dulo final est\u00e1 dispon\u00edvel no fim do artigo.<\/em><\/p>\n<\/blockquote>\n

Assim como no Magento 1, as linhas de endere\u00e7o nativos do Magento 2 podem ser configur\u00e1veis.<\/p>\n

Em\u00a0Store>Configurations>Customers>Configurations>Name and address options<\/span>\u00a0 voc\u00ea pode alterar o n\u00famero de linhas do endere\u00e7o, para suportar complemento e bairro.<\/p>\n

\"Configura\u00e7\u00e3o<\/a><\/p>\n

Estes atributos de endere\u00e7o s\u00e3o muito comuns em lojas brasileiras, sendo o “complemento” obrigat\u00f3rio na maioria dos meios de pagamento.<\/p>\n

Por padr\u00e3o, somente 2 linhas de endere\u00e7o s\u00e3o exibidas e sem nenhuma informa\u00e7\u00e3o. Idealmente, alteramos o valor acima pra 4.<\/p>\n

\"Atributos<\/p>\n

\u00a0<\/p>\n

\u00a0<\/p>\n

\u00a0<\/p>\n

\u00a0<\/p>\n

A customiza\u00e7\u00e3o dos labels<\/em> e valida\u00e7\u00f5es no Magento 2 s\u00e3o feitas atrav\u00e9s da cria\u00e7\u00e3o de uma classe do tipo Plugin.<\/em> Ela dever\u00e1 alterar a sa\u00edda o m\u00e9todo process<\/em> da classe Magento\\Checkout\\Block\\Checkout\\LayoutProcessor<\/code>.<\/p>\n

Desta forma, o cliente poder\u00e1 ter uma experi\u00eancia mais amig\u00e1vel ao preencher os dados de endere\u00e7o.<\/p>\n

\"Campos<\/p>\n

\u00a0<\/h2>\n

Como implementar os labels de endere\u00e7o?<\/h2>\n

Assumindo que voc\u00ea j\u00e1 criou um m\u00f3dulo base para Magento 2<\/a>, e alterou as configura\u00e7\u00f5es para 4 linhas, vamos ent\u00e3o criar um Plugin.<\/p>\n

Para fazer isso, crie dentro da pasta do m\u00f3dulo os seguintes arquivos:<\/p>\n

<type name="Magento\\Checkout\\Block\\Checkout\\LayoutProcessor">\n    <plugin name="rewrite-street" type="Vendor\\ModuelName\\Model\\Checkout\\LayoutProcessorPlugin" sortOrder="10"\/>\n<\/type><\/pre>\n
\u00a0<\/p>\n
<?php\nnamespace Vendor\\ModuleName\\Model\\Checkout;\n\nclass LayoutProcessorPlugin\n{\n    \/**\n     * @param \\Magento\\Checkout\\Block\\Checkout\\LayoutProcessor $subject\n     * @param array $jsLayout\n     * @return array\n     *\/\n\n    public function afterProcess(\n        \\Magento\\Checkout\\Block\\Checkout\\LayoutProcessor $subject,\n        array  $jsLayout\n    ) {\n        $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']\n        ['shippingAddress']['children']['shipping-address-fieldset']['children']['street'] = [\n            'component' => 'Magento_Ui\/js\/form\/components\/group',\n            \/\/'label' => __('Street Address'), \/\/desabilitamos o label principal\n            'required' => false, \/\/mudamos para false caso tehamos desabilitado o label acima\n            'dataScope' => 'shippingAddress.street',\n            'provider' => 'checkoutProvider',\n            'sortOrder' => 0,\n            'type' => 'group',\n            'additionalClasses' => 'street',\n            'children' => [\n                [\n                    'label' => __('Label 1'),\n                    'component' => 'Magento_Ui\/js\/form\/element\/abstract',\n                    'config' => [\n                        'customScope' => 'shippingAddress',\n                        'template' => 'ui\/form\/field',\n                        'elementTmpl' => 'ui\/form\/element\/input'\n                    ],\n                    'dataScope' => '0',\n                    'provider' => 'checkoutProvider',\n                    'validation' => ['required-entry' => true, "min_text_len\u200c\u200bgth" => 1, "max_text_length" => 255],\n                ],\n                [\n                    'label' => __('Label 2'),\n                    'component' => 'Magento_Ui\/js\/form\/element\/abstract',\n                    'config' => [\n                        'customScope' => 'shippingAddress',\n                        'template' => 'ui\/form\/field',\n                        'elementTmpl' => 'ui\/form\/element\/input'\n                    ],\n                    'dataScope' => '1',\n                    'provider' => 'checkoutProvider',\n                    'validation' => ['required-entry' => true, "min_text_len\u200c\u200bgth" => 1, "max_text_length" => 255],\n                ],\n                [\n                    'label' => __('Label 3'),\n                    'component' => 'Magento_Ui\/js\/form\/element\/abstract',\n                    'config' => [\n                        'customScope' => 'shippingAddress',\n                        'template' => 'ui\/form\/field',\n                        'elementTmpl' => 'ui\/form\/element\/input'\n                    ],\n                    'dataScope' => '2',\n                    'provider' => 'checkoutProvider',\n                    'validation' => ['required-entry' => true, "min_text_len\u200c\u200bgth" => 1, "max_text_length" => 255],\n                ],\n                [\n                    'label' => __('Label 4'),\n                    'component' => 'Magento_Ui\/js\/form\/element\/abstract',\n                    'config' => [\n                        'customScope' => 'shippingAddress',\n                        'template' => 'ui\/form\/field',\n                        'elementTmpl' => 'ui\/form\/element\/input'\n                    ],\n                    'dataScope' => '3',\n                    'provider' => 'checkoutProvider',\n                    'validation' => ['required-entry' => false, "min_text_len\u200c\u200bgth" => 1, "max_text_length" => 255],\n                ],\n            ]\n        ];\n        return $jsLayout;\n    }\n}<\/pre>\n
E depois basta criar o csv com as tradu\u00e7\u00f5es dos Labels <\/em>na pasta i18n\/pt_BR.csv<\/code> do seu m\u00f3dulo.<\/p>\n
Altere Vendor<\/code> e ModuleName<\/code> para os nomes do seu respectivo m\u00f3dulo, e revise as altera\u00e7\u00f5es para ficar do jeito que voc\u00ea quer.<\/p>\n
D\u00e1 pra ser mais f\u00e1cil?<\/h2>\n
D\u00e1 sim. Eu criei um m\u00f3dulo com esta solu\u00e7\u00e3o<\/strong>, j\u00e1 incluindo os arquivos de tradu\u00e7\u00e3o e publiquei no nosso grupo secreto. Voc\u00ea pode se inscrever no curso de Magento 2<\/a> para ter acesso a esse e outros materiais, ou fazer download s\u00f3 deste m\u00f3dulo aqui mesmo.<\/p>\n
Para receber o m\u00f3dulo pronto, preencha seu nome e e-mail abaixo. Voc\u00ea receber\u00e1 o m\u00f3dulo Magenteiro_StreetLines<\/code> em at\u00e9 15 minutos, e passar\u00e1 a receber as novidades de cursos e artigos exclusivos do Magenteiro. Voc\u00ea pode se descadastrar a qualquer momento.<\/p>\n