Magento Checkout Street Line Autofill Bug

12

Hace poco noté que varios pedidos en nuestra tienda Magento tienen copiada la línea 1 de la calle en la línea 2 de la calle.

Investigué un poco y parece estar relacionado con el autocompletado de Chrome. Si observa los campos del formulario, Magento utiliza la facturación [calle] [] y el envío [calle] [] como los nombres de campo para ambas líneas de calles. Por lo tanto, Chrome no puede determinar cuál es cuál y rellena automáticamente la línea de dirección 1 en ambos campos.

Hay cierta información flotando que puede usar el atributo de autocompletar en el campo de entrada del formulario para indicar a qué campo debe vincularse, pero esto no es compatible y no funciona. De hecho, si intenta hacer eso, deshabilita el autocompletado en todo el formulario. También intenté cambiar el nombre del campo, pero eso rompe el pago. Parece que necesitaría profundizar en el código y cambiar el nombre del campo en el formulario y en cualquier lugar al que se haga referencia, enviado a PayPal, guardado en la base de datos, etc. Esto parece una pesadilla.

¿Alguien ha tratado con esto y / o tiene una sugerencia?

frontend customer-address

— BrianVPS
fuente

¿Has encontrado una solución para este problema? Con la impresión automática de etiquetas para el envío, solo detectamos el 20% de estos errores y, a veces, el transportista no entrega ya que "la dirección es incorrecta" ...

No he encontrado una solución verdadera y completa. Para nosotros, la única preocupación real era arreglarlo en el lado de la pantalla al finalizar la compra, por lo que agregué algunos JS que se activan en el cambio de la línea 2 y, si coincide exactamente con la línea 1, lo borro. Esto no maneja las páginas de la cuenta del cliente al crear nuevas direcciones, pero no estaba tan preocupado por eso.

— BrianVPS

Esto está parcialmente relacionado con "Cómo activar el Autocompletado de Chrome" stackoverflow.com/questions/7223168/… La respuesta breve es cumplir con los requisitos de Regex para nombre o etiqueta en code.google.com/p/chromium/codesearch#chromium/ src / components / ...

— Ray Foss

3

También puede probar el x-autocompletetypeatributo, aunque esta es una característica experimental:

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

— Giel Berkers
fuente

Cheatsheet muy útil: ryan.mcgeary.org/2014/08/20/html5-autocomplete-cheatsheet

— Mihai MATEI

2

Pequeña solución rápida, agregue un atributo 'readonly' a la entrada y un atributo onfocus con el siguiente fragmento de JS:

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

Entonces todo debería verse así:

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

Chrome no podrá completar automáticamente el campo, pero el usuario puede escribirlo manualmente, ya que el JS se activará cuando haga clic en el campo.

Haga esto también para la entrada de fax, a Chrome le gusta copiar el número de teléfono en ese.

— natecornell
fuente

1

bienvenido a magento SE. No pensé que solo lectura no es una idea para detener el campo automático

— Amit Bera

Por experiencia, las personas tienden a pasarlo por alto ... lo que no es bueno en absoluto y puede costar mucho dinero, la principal dificultad para solucionarlo es la naturaleza dinámica de los campos.

— Ray Foss

2

Los atributos de autocompletar son una forma para que usted, el desarrollador, controle cómo debe llenar el navegador un campo de formulario determinado. Por ejemplo, si espera una dirección de calle, puede indicarle al navegador que la está esperando usando autocompletar = "address-line1" . Esto evita que el navegador adivine incorrectamente los campos de formulario en su sitio web, lo que puede resultar en una mala experiencia del usuario.

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

— Erfan
fuente

2

El uso x-autocompletetype="address-line2"no parece funcionar con el último Chrome (65.0.3325.106), aún duplicará la primera dirección en ambas entradas. Sin embargo, autocomplete="address-line1"y autocomplete="address-line2"parece funcionar como se esperaba.

Más detalles aquí: https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill#address

— Code Commander
fuente