Erro de preenchimento automático da linha de rua do checkout do Magento

12

Recentemente, notei que vários pedidos em nossa loja Magento têm a linha 1 da rua copiada para a linha 2.

Fiz algumas escavações e parece estar relacionado ao preenchimento automático do Chrome. Se você olhar para os campos do formulário, o Magento usa faturamento [rua] [] e expedição [rua] [] como os nomes de campo para as duas linhas de rua. Portanto, o Chrome não consegue descobrir qual é qual e preenche automaticamente a linha de endereço 1 nos dois campos.

Há algumas informações flutuando em torno das quais você pode usar o atributo de preenchimento automático no campo de entrada do formulário para indicar a qual campo ele deve se vincular, mas isso não é suportado e não funciona. De fato, se você tentar fazer isso, desabilitará o preenchimento automático em todo o formulário. Também tentei alterar o nome do campo, mas isso interrompe o checkout. Parece que eu precisaria me aprofundar no código e alterar o nome do campo no formulário e em qualquer lugar em que ele for referenciado, enviado ao PayPal, salvo no banco de dados, etc. Isso parece um pesadelo.

Alguém já lidou com isso e / ou tem uma sugestão?

frontend customer-address

— BrianVPS
fonte

Você encontrou uma solução para esse problema? Com impressão automática de etiquetas para o transporte só pegar 20% desses erros e às vezes o portador não geram uma vez que "o endereço está errado" ...

Não encontrei uma solução completa e verdadeira. Para nós, a única preocupação real era consertá-lo no lado da tela no checkout, então adicionei algumas JS que são acionadas na alteração da linha 2 e, se corresponder exatamente à linha 1, eu a limpo. Isso não lida com as páginas da conta do cliente ao criar novos endereços, mas eu não estava tão preocupado com isso.

— BrianVPS

Isso é parcialmente relacionado a "Como acionar o preenchimento automático do Chrome" stackoverflow.com/questions/7223168/… A resposta curta é atender aos requisitos de nome ou etiqueta do Regex

— Ray Foss

3

Você também pode tentar o x-autocompletetypeatributo, embora este seja um recurso experimental:

<input x-autocompletetype="address-line1" />
<input x-autocompletetype="address-line2" />

— Giel Berkers
fonte

Cheatsheet

— Mihai MATEI

2

Correção rápida rápida, adicione um atributo 'readonly' à entrada e um atributo onfocus com o seguinte trecho JS:

onfocus="this.removeAttribute('readonly');"

Portanto, a coisa toda deve se parecer com:

<input type="text" title="Street Address 2" name="billing[street][]" id="billing:street2" value="" class="input-text " readonly onfocus="this.removeAttribute('readonly');">

O Chrome não poderá preencher automaticamente o campo, mas o usuário poderá digitá-lo manualmente, pois o JS será acionado ao clicar no campo.

Faça isso também para a entrada de fax, o Chrome gosta de copiar o número de telefone para aquele.

— natecornell
fonte

1

, bem-vindo ao magento SE. Eu não achava que a boa somente leitura não é idéia de campo auto batente

— Amit Bera

Por experiência, as pessoas tendem a simplesmente ignorá-lo ... o que não é bom e pode custar muito dinheiro, a principal dificuldade em corrigi-lo é a natureza dinâmica dos campos.

— Ray Foss

2

Os atributos de preenchimento automático são uma maneira de você, desenvolvedor, controlar como o navegador deve preencher um determinado campo de formulário. Por exemplo, se você está esperando um endereço, pode sugerir ao navegador que está esperando usando autocomplete = "address-line1" . Isso evita que o navegador adivinhe incorretamente os campos do formulário em seu site, o que pode resultar em uma experiência ruim para o usuário.

https://developers.google.com/web/updates/2015/06/06/checkout-faster-with-autofill

— Erfan
fonte

2

O uso de x-autocompletetype="address-line2"não parece funcionar com o Chrome mais recente (65.0.3325.106), ainda duplicará o primeiro endereço nas duas entradas. No entanto, autocomplete="address-line1"e autocomplete="address-line2"parece funcionar como esperado.

Mais detalhes aqui: https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill#address

— Code Commander
fonte