Wix Tutorial: Show content based on users country

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.

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.

1. Go to properties panel of the multi-state box to change ID and state ID
2. ID of the multi-state box is set to “countryContent”
3. 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");

Hope this helps you! 👍