Guide for Magento 2 Google Address Autocomplete Extension
Using the Magento 2 Google Address Autocomplete Extension now the users/customers of your Magento 2 store can easily enter their address using the Google auto address suggestion at the checkout page.
Apart from that, the customers can enter their address under their address book using the feature as well.
The admin on the other hand will be able to configure the plugin by enabling the functionality and entering the Google API key in the plugin’s configuration settings.
The admin will also be able to use the Google auto address suggestion to add the address of the customers while creating an order and when editing the address of the customer.
With the autocomplete feature, customers no longer need to type their entire address, which can take time and lead to errors. Instead, they can select their address from the suggestions provided by Google Address Autocomplete.
Apart from that, A long and tedious checkout process can lead to Magento 2 cart abandonment. By providing a fast and efficient checkout process, you can reduce the chances of customers abandoning their carts.
Check how you can add this extension from the admin backend panel and how it will reflect on the storefront in the mentioned video:
Features
- Google Address Autocomplete for customers’ add address section.
- Google Address Autocomplete for the checkout section.
- Google Address Autocomplete for placing orders from the admin panel.
- Google Address Autocomplete for editing customer addresses from the admin panel.
- Google Address Autocomplete for editing all the order’s addresses from the admin panel.
Installation
#Download Module
Firstly, you need to log in to Webkul Store, go to My Account>My Purchased Products section, verify and then download and extract the contents of this zip folder on the system.
#Upload Folder
Once the module zip for Magento 2 Google Address Autocomplete Extension is extracted, follow path src>app and then copy the app folder into the Magento 2 root directory on the server as shown below:
#3 Run Commands
You need to run the following commands:
php bin/magento setup:upgradephp bin/magento setup:di:compilephp bin/magento setup:static-content:deployphp bin/magento indexer:reindexphp bin/magento cache:flush
Language Translation
For translating the module language, navigate through src/app/code/Webkul/GoogleAddressAutoComplete/i18n and edit the en_US.csv file. Thereafter, rename the CSV as “en_SA.csv” and translate all right side content after the comma in the Arabic language. After editing the CSV, save it.
Now, upload it to the path src/app/code/Webkul/GoogleAddressAutoComplete/i18n where the installation of Magento 2 is on the server. The module gets translated into the Arabic Language. It supports both RTL and LTR languages.
The user can edit the CSV like the image below.
How to get the Google Maps API Key
Step 1. Go to console.developers.google.com and log in using your Gmail ID. After that, click on the Select a project option.
Step 2. Click on New Project Button. After that, you need to enter the name of the project and Browse the location of the organization.
Step 3. After creating the project click on the Enable API And Services.
Step 4. Then click on the Maps JavaScript API to get the API key.
Step 5. After clicking on the Maps JavaScript API, you need to click on the ENABLE button.
Step 6. Once you have enabled the API then you need to navigate through Credentials> Credentials in APIs & Services.
Step 7. After that, you need to click on the create credentials and select the API key.
Step 8. Now you can copy the generated API key.
Initial Configuration Settings
After the successful installation of the extension, the admin will navigate through Stores->Configuration->Google Address Autofill.
Here, the admin will –
- Enable the plugin functionality by choosing the option as a Yes else to disable the functionality choose it as a NO.
- Enter the Google Map API Key as required.
At Checkout – Goggle Auto Address Suggestion
At checkout time, the customers/users can add their street address and the suggestion for the address is displayed by the Google Auto Address suggestion as shown below in the snapshot.
After that, the customer/user can choose the most appropriate one and then proceed further to place the order.
Address Book – Google Auto Address Suggestion
The customers can add their addresses within the address book using the Google Auto Address suggestion feature.
So, the customers can add the address via the address auto-complete at the checkout time or within the address book section as required for filling up the Magento 2 Google Maps Pin Address to proceed further.
Admin – Add Address Via Google Auto Address Suggestion
The admin while editing customer information, can add the address using the Google Auto Address suggestion feature as shown below in the snapshot.
The admin whilst creating an order from the admin backend can add the address for the customer using the Google Auto Address suggestion feature as shown below in the snapshot.
Support
That is all about the Magento 2 Google Address Auto Complete extension. If you have any queries regarding the plugin, please contact us at Webkul Support System.
If you’re looking to create a custom e-commerce website, it’s a great idea to hire Magento developers who can help you build a powerful and scalable online store.
You can also check our complete Magento 2 extensions.