Magento
The Autoaddress Javascript control and CSS can be easily added to a Magento address form.
Adding the Autoaddress Control to an Address form
Requirements
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.
- A JavaScript file named “Autoaddress_Magento_Loader.js” (called the loader file from here on out). This file can be downloaded from here and contains functionality to provide an out of the box Autoaddress solution that can be edited depending on requirements.
- License key. For more information about license keys, see Configuration Options.
Implementation
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:
Requirejs is a javascript and module loader that Magento uses to load required javascript files or libraries into the system. For more information, follow this link to the Requirejs home page.
Due to the way Magento implements Requirejs, the usual Autoaddress implementation of through <Script src=””> will not work due to causing conflicts with built in Magento javascript functionality. The advantage of using Requirejs is better management of load order of scripts and helping prevent cross-site scripting (XSS). In the case above, we are loading the Autoaddress loader file into the system. Magento will know how to find the file by providing the vendor name, module name and the javascript file name. The above location translates to “Vendor_Module/javascript_file_name”.
That is all that is required to provide an out of the box Autoaddress solution for Magento 2.
Autoaddress_Magento_Loader.js: Breakdown
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.
