We’re running our site on Magento CE2.4.1. Currently, checkout fields have the following attributes:
<input class="input-text" type="text" data-bind="
value: value,
valueUpdate: 'keyup',
hasFocus: focused,
attr: {
name: inputName,
placeholder: placeholder,
'aria-describedby': getDescriptionId(),
'aria-required': required,
'aria-invalid': error() ? true : 'false',
id: uid,
disabled: disabled
}" name="lastname" aria-required="true" aria-invalid="false" id="KR2W89N">
I would like add the autocomplete attribute to each field. Like this:
<input class="input-text" type="text" autocomplete="name" data-bind="[...]" name="lastname" aria-required="true" aria-invalid="false" id="KR2W89N">
I checked the following files to see if there is a way to achieve this:
magento/module-checkout/view/frontend/web/template/shipping-address/form.html
magento/module-checkout/Block/CheckoutLayoutProcessor.php
As for the form.html:
I could not figure a way to get the particular autocomplete value as a variable for each field.
As for the CheckoutLayoutProcessor.php:
I created a small module with the help of this thread:
How to auto fill the shipping address field in Checkout in Magento 2.2
I was able to e. g. change the LABEL for each field (just as a test). However, I could not find a way to define any other attribute / option for each checkout field.
Am I looking at the right files, anyway? Any help would me much appreciated.
I am not trying to autofill the fields myself. I just want to add the attributes so that browsers autofill the fields correctly. Currently, input of street.0 will also be added to street.1.
If the desired solution is not possible: is there a way to just set autocomplete="off" for only the street.1 field?
Thanks!
Alex
2
Answers
I now went for a probably non-elegant solution. In LayoutProcessor.php (please refer to link in initial post) I simply defined a custom template:
In this custom template I just hardcoded:
This way it would obviously also be possible to set individual values for each field by creating a separate template for each field. Though, this seems a bit too much.
Just in case this might be of help for someone else I will mark this answer as the accepted one for now. Once someone will provide a more professional approach I will be more than happy to change her / his post to the accepted answer.
You solution is good. But not the best. I had to improve on it.
The best way is to override the template as you said. But we override only the template we want to change.
You create your module, normal stuff… etc/ module.xml, registration.php
Now to achieve this, we will need to override the template rendered for the company field. This can be done by overriding the configurations for this form field. The configuration is found in module-checkout of magento in the layout file checkout_index_index.xml. Its the item with name company
To override the template,
Create a layout file in your module
view/frontend/layout/checkout_index_index.xml with the following code to override the config
Create the new template file you would like to use for this field
view/frontend/web/template/form/element/input-no-autocomplete.html
Put the following code inside
Now deploy your module and check the field.
bin/magento setup:upgrade… etc
Code for Step 1.
For Step 2.