I wanted to display location based content to my customers and I was unable to find a lot of material for it. I found a medium post which helped me in creating what I wanted and I want to share it here so that someone else can also make use of it and save hours of time.
If you don’t have any background in coding, it’s okay as even I am not a web designer.
I’ll try to keep the format similar to the tutorial posts by Wix.
Difficulty: Beginner
What you need:
-
Multi-state box
-
A service which returns country code based on IP address
-
A little bit of coding
Setup your multi-state box
To set up your multi-state box, follow this general procedure from here .
-
Go to properties panel of the multi-state box to change ID and state ID
-
ID of the multi-state box is set to “countryContent”
-
Change state ID to “country1” and “country2”
Getting country code from IP address
We will be using extreme IP lookup’s service to get the country code from IP address. This returns the details in a json format from which we will use the country code to identify users country.
Note: Extreme IP offers 10k requests per month for free.
Example JSON format which is returned:
{
"businessName" : "",
"businessWebsite" : "",
"city" : "user_city",
"continent" : "user_continent",
"country" : "user_country",
"countryCode" : "user_country_code",
"ipName" : "ip_name",
"ipType" : "ip_type",
"isp" : "isp_name",
"lat" : "latitude",
"lon" : "longitude",
"org" : "isp_org",
"query" : "user_ip_address",
"region" : "user_region",
"status" : "success"
}
To get the country code from the IP I used this code from the above medium post:
import wixLocation from 'wix-location';
import {fetch} from 'wix-fetch';$w.onReady(function () { // Fetch the user's location details
fetch('https://extreme-ip-lookup.com/json', {
method: 'get'
}) // Check if the request was successful
.then((httpResponse) => {
if (httpResponse.ok) {
return httpResponse.json();
}
})
.then((json) => {
// Set the user's countryCode as a const
const loc = json.countryCode; /* Check if location is Japan, and check if not already on
not Available page */ if(loc === "JP" && wixLocation.path !== "not-available"){
// Redirect to "Not Available" page
wixLocation.to("/not-available");
}
});})
Modifying the code to show content based on location
Here is the modified code:
import {fetch} from 'wix-fetch';
$w.onReady(function () {
// Fetching the user's location details
fetch('https://extreme-ip-lookup.com/json', {
method: 'get'
})
// Check if the request was successful
.then((httpResponse) => {
if (httpResponse.ok) {
return httpResponse.json();
}
})
.then((json) => {
// Set the user's countryCode as a const
const loc = json.countryCode;
/* This part changes the state of multi-state box */
/* Check if country code is of country2 */
if(loc === "country2"){
// Change content to "country2" multi-state
$w('#countryContent').changeState("country2");
}
});
})
You can add multiple states and then change the state according to country code returned.
All you have to do is repeat this block for number of states you created:
if(loc === "country1"){
// Change content to "country1" multi-state
$w('#countryContent').changeState("country1");
if(loc === "country2"){
// Change content to "country2" multi-state
$w('#countryContent').changeState("country2");
if(loc === "country3"){
// Change content to "country3" multi-state
$w('#countryContent').changeState("country3");
.
.
.
.
.
.
if(loc === "country_n"){
// Change content to "country_n" multi-state
$w('#countryContent').changeState("country_n");
Please note:
-
I do not know how efficient this method is or how it affects website loading speed
-
I would like to know what are the side effects of changing user content like this
-
Will using multiple multi-state boxes slowdown the website/impact SEO?
-
If anyone can optimize the code above, please go ahead and let me know too
That’s all.
Hope this helps you! 