In Magento 2 customer IP is generally getting displayed at the admin order page, But not the customer location.
So today we are going to talk about displaying customer location on the admin order page by using a location API.
Follow the below tutorial step wise to get it done:
1. Create {{Your Vendor name}}/{{Extension Name}}/registration.php
For Example : Magemonkey/CustomerLocation/registration.php
1 2 3 4 5 6 7 |
<?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'Magemonkey_CustomerLocation', __DIR__ ); |
2. Create {{Your Vendor name}}/{{Extension Name}}/composer.json
For Example : Magemonkey/CustomerLocation/composer.json
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
{ "name": "magemonkey/customerlocation", "version": "1.0.0", "description": "Display Customer Location on admin order page", "type": "magento2-module", "license": [ "OSL-3.0", "AFL-3.0" ], "autoload": {"files": ["registration.php"], "psr-4": {"Magemonkey\\CustomerLocation\\": ""}}, "keywords": [ "eCommerce" ,"freegeoip.net" ,"Geolocation" ,"Magento" ,"Magento 2" ,"Magento extension" ] } |
3. Create {{Your Vendor name}}/{{Extension Name}}/etc/module.xml
For Example : Magemonkey/CustomerLocation/etc/module.xml
1 2 3 4 |
<?xml version='1.0'?> <configxmlns:xsi='http://www.w3.org/2001/XMLSchema-instance' xsi:noNamespaceSchemaLocation='urn:magento:framework:Module/etc/module.xsd'> <module name='Magemonkey_CustomerLocation' setup_version='1.0.0'/> </config> |
4. Create {{Your Vendor name}}/{{Extension Name}}/view/adminhtml/layout/sales_order_view.xml
For Example : Magemonkey/CustomerLocation/view/adminhtml/layout/sales_order_view.xml
1 2 3 4 |
<?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <head><script src='Magemonkey_CustomerLocation::general.js' defer='defer'/></head> </page> |
5. Create {{Your Vendor name}}/{{Extension Name}}/view/adminhtml/web/general.js
For Example : Magemonkey/CustomerLocation/view/adminhtml/web/general.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
require([ 'jquery' ], function($) {$(function() { var $ipAddressCell = $('.order-information-table td').filter(function() { return /\d+\.\d+\.\d+\.\d+/.test(this.innerHTML); }); if ($ipAddressCell.length) { var address = $ipAddressCell.html(); if ('127.0.0.1' !== address) { $.get('https://freegeoip.app/json/' + address, function(data) { var location = [data['country_name'], data['region_name'], data['city']] .filter(function(item) {return !!item;}) .join(', ') ; var $ipAddressRow = $ipAddressCell.closest('tr'); var $geoRow = $('<tr>') .append($('<th>').append($.mage.__('Customer Location'))) .append($('<td>').append(location)) ; $ipAddressRow.after($geoRow); }); } } }); }); |
After follow above steps run below commands:
1 2 |
- php bin/magento setup:upgrade - php bin/magento cache:flush |
Once you’ll execute above steps, you’ll able to see the location at the admin order view page as shown below:
[crayon-63d3df6c56271276098366/] Using above fucntion Images can be imported directly from...
Override view block using di.xml and add the below code...
You can check a list of called layout XML for...
Follow the below steps to install and set up PWA...
If you want to remove all leading zero's from order,...
Let our Magento expert connect to discuss your requirement.
We offer Magento
certified developers.
Our Magento clientele
is 500+.
We sign NDA for the
security of your projects.
We’ve performed 100+
Magento migration projects.
Free quotation
on your project.
Three months warranty on
code developed by us.