Geolocation app - API

Highlighted

Is the underlying API behind this new app available or documented anywhere - https://apps.shopify.com/geolocation

Would love to use it to show location specific promos or delivery information on catalog pages.

Some Shopify/Ecommerce related articles - https://medium.com/@stephenkeable
Highlighted

So a little poking around and you can call the following endpoint on your store.

/browsing_context_suggestions.json

This gives you a simple object below

{
  "detected_values": {
    "country_name": "United Kingdom"
  },
  "suggestions": []
}

Which you can parse and use a if/else of switch statement to show or modify elements on your site via JS.

The query string options for the endpoint that are generated by the app include the below:-

source=locale_bar_app
currency[enabled]=true
currency[exclude]=USD
language[enabled]=true
language[exclude]=en

With the response changing to:-

{
    "detected_values": {
        "country_name": "United Kingdom"
    },
    "suggestions": [
        {
            "parts": {
                "currency": {
                    "handle": "GBP",
                    "name": "British pounds",
                    "confidence": 1,
                    "options": {
                        "CAD": "CAD $",
                        "DKK": "DKK kr",
                        "EUR": "EUR €",
                        "GBP": "GBP £",
                        "SEK": "SEK kr",
                        "USD": "USD $"
                    }
                }
            },
            "confidence": 1
        }
    ]
}

Would be great if there's some documentation out there for these options. As using this native functionality would be nicer than needing to rely on third party IP to Country solutions.

Some Shopify/Ecommerce related articles - https://medium.com/@stephenkeable
Highlighted

If you run your app backend/API on Google AppEngine, then Appengine provides a few location related headers for every request. See below.

https://cloud.google.com/appengine/docs/standard/python/reference/request-response-headers#app_engin...

 

Since Shopify runs on GCP, this is probably how they get it.

https://apps.shopify.com/adsimpli
0 Likes
Highlighted

That's great however I'm more interested in being able to make use of the endpoint via AJAX on a store.

Say enabling a merchant to have a few options for showing delivery rates for a country in the page header maybe.

That will allow merchants to avoid needed to use external services, just some custom code in their theme.

Some Shopify/Ecommerce related articles - https://medium.com/@stephenkeable
0 Likes
Highlighted
Shopify Expert
2 0 0

hi,
probably it become from Cloudflare directly.
Shopify uses Cloudflare for dns and cdn

0 Likes
Highlighted
Explorer
191 3 12

Hi there!

 

If you want to use geolocation API, here is one worth checking out: Geo Targetly.

 

Its particular Geo Redirect tool can access your website visitors' location information easily using IPs. You can just  drop in the Javascript code they provided and get visitors' location using simple JavaScript variables and geolocation html tags. Regarding that you like to show location specific promos or delivery information, its Geo Content tool could be your choice. It can alter almost any content on your webpages based on your visitors' locations, like banners, headlines, texts, etc...Location-specified content can be set up using its inbuilt HTML editor.

 

Hope it helps. Feel free to reach out if you have any questions.

0 Likes
Highlighted
Shopify Partner
9 0 5

Thanks Stephen,

That's really helpful.

Is there an easy way to turn that endpoint into a JS variable with the name of the country?

Thanks!

Mike

0 Likes
Highlighted

Should be able to fetch the endpoint parse as JSON then:-

yourJsonObject.detected_values.country_name

 

Some Shopify/Ecommerce related articles - https://medium.com/@stephenkeable
Highlighted
Shopify Partner
9 0 5

Thanks Stephen,

I share the complete code in case it is useful for anyone else.

 

  <script>
    
    
async function load() {
    let url = 'https://*****************.myshopify.com/browsing_context_suggestions.json';
    let obj = await (await fetch(url)).json();
    window.alert(obj.detected_values.country_name);
}

load();

</script>