Adding the Autoaddress Control to an Address form
The Autoaddress control requires three things to work correctly with Magento:
- Some lines of code, provided by Autoaddress, to be added to the forms PHTML file and discussed further in this document.
- License key. For more information about license keys, see Configuration Options.
For demonstration purposes, this document will implement the Autoaddress control in the default customer form provided by Magento. The following steps can be re-produced in your own custom form if not using the default.
If, at this point, you haven't downloaded the code from GitHub, you can follow our CRM Integration Files section for instructions on how to do that..
After downloading the loader file, save it to the Magento file system, within the view folder of your module. For the default customer module, it is stored at “Magento\Customer\view\frontend\web”. For a custom module, the last three parts of the location will be the same: “view\frontend\web”. Lastly, open the loader file and enter the license key:
The file is now ready to be referenced by the address form.
Open the PHTML file that makes up your form. For example, the Magento default is the “edit.phtml” file which is found at “Magento\Customer\view\frontend\templates\address”. Above the code for the first address line, add the below code:
This line of code is used by the jQuery to know where to place the Autoaddress control.
Next is to add the reference to the loader file. Add the following code to the bottom of the PHTML file:
That is all that is required to provide an out of the box Autoaddress solution for Magento 2.
This section will breakdown the loader file.
The beginning of the file ensures the code providing the functionality will be able to work as it should.
The requirejs is used again here to make sure jQuery is loaded before the Autoaddress code is called. The line below it tells the system to relinquish control of the “$” symbol so that it can be used by this JS file.
The function “LoadAutoAddress” will load the Autoaddress jquery and CSS files and create the Autoaddress control for the web page. The function takes a country as a parameter. This allows the control to be created for the correct region (IE or GB). Part of the function is to point to the address form controls so that the Autoaddress control knows where to show the information it returns
Values in quotes refer to the name of the address form controls. The default values in the loader file refer to the default Magento 2 address form controls. If the ID for your controls are different, this part of the file will need to be updated to reflect that.
The “UnloadAutoaddress” function will remove the Autoaddress control when called.
The code below is necessary for checking if the control should be loaded to the page when the page first loads
The last piece of code adds a change event to the country drop down box. This change event will check whether the Autoaddress control needs to be loaded whenever the value of the country field is changed.