Make a pop up that appears only to people from 1 country

Ask the community
,
1

I want to tell my clients in México that we have a specialized website for them with a popup which has a link to the Mexican website. I dont know what is wrong or missing with the code. Any help is deeply appreciated

import { fetch } from ‘wix-fetch’ ;
import wixWindow from ‘wix-window’ ;

const API_KEY = “aaabbb” ;

$w . onReady ( function () {
fetch ( https://extreme-ip-lookup.com/json/?key=aaabbb , {
method : ‘get’
})
. then (( httpResponse ) => {
if ( httpResponse.ok ) {
return httpResponse . json ();
}
})

    . then (( json ) => { 
        const  loc  =  json.countryCode ; 
        if ( loc  ===  'MX' ) { 
         wixWindow . openLightbox ( "MexicoLightbox" ); 
        } 
    });

})

2

Try to console.log the httpResponse and the parsed json and see what it logs

3

To add, since you’re working through multiple promises before you get to your final call, you might be better off using the async/await syntax, which will reformat your code to be easier to understand and less cluttered with callbacks. So in your case it would become:


import { fetch } from 'wix-fetch'; 
import wixWindow from 'wix-window';  

const API_KEY = "aaabbb";  

$w.onReady(async function () {
    const httpResponse = await fetch(`https://extreme-ip-lookup.com/json/?key=${API_KEY}`, { method:'get'});
    if (httpResponse.ok) { 
        const json = await httpResponse.json();
        const loc = json.countryCode;
        if(loc === 'MX') wixWindow.openLightbox("MexicoLightbox"); 
    }
});

A couple of other things you can do :

  • Ensure that the API call is being correctly received by the Fetch function.
4

Hey thank you!

I applied your code, but the lightbox is still not opening up.

5

HOnestly dont know how to do it, have been copying and pasting different blocks of code until things work