Solved

How can I retrieve the URL of a shop using my Node app?

magnussinger
Shopify Partner
2 1 4

Hi everyone,

 

I'm sorry if I ask a trivial question, but I'm building a Shopify App using this template: https://github.com/Shopify/shopify-app-template-node/tree/cli_three and I was wondering how I'm able to get the URL of the shop that is using my app (means the URL of the document outside the iFrame). I had a working approach using location.ancestorOrigins (https://developer.mozilla.org/en-US/docs/Web/API/Location/ancestorOrigins), but since this is not compatible with Firefox, I was wondering if there is another approach. Thanks in advance for your help!

 

Best

Magnus

Accepted Solution (1)

magnussinger
Shopify Partner
2 1 4

This is an accepted solution.

Okay, so I came up with a solution by myself, I post my code here in case anyone has the same problem in the future:

import {useAppBridge} from "@shopify/app-bridge-react";

function DemoPage() {
    const bridge = useAppBridge();
    const shopUrl = bridge.hostOrigin.replace('https://', '').replace('www.', '');
    console.log(shopUrl);
}

 

View solution in original post

Replies 9 (9)

magnussinger
Shopify Partner
2 1 4

This is an accepted solution.

Okay, so I came up with a solution by myself, I post my code here in case anyone has the same problem in the future:

import {useAppBridge} from "@shopify/app-bridge-react";

function DemoPage() {
    const bridge = useAppBridge();
    const shopUrl = bridge.hostOrigin.replace('https://', '').replace('www.', '');
    console.log(shopUrl);
}

 

salihozk
Shopify Partner
1 0 4

This doesn't work when the admin URL is like "https://admin.shopify.com/store/{STORE_NAME}".

FaizaBashir
Shopify Partner
38 0 2

How to get shop url in backend? I want to get shop url in index.js and middleware.

Fabien_Sebban
Shopify Partner
40 0 13

Unfortunately, since Shopify changed the URL from https://my-store.myshopify.com to https://admin.shopify.com this code always returns https://admin.shopify.com as the shop URL.

I am looking for another way to get the URL from the app's front end. I'll post the solution if I find it.

 

 

Fabien_Sebban
Shopify Partner
40 0 13

This is a way to get the shop URL from the back office:

 

const shopUrl = `https://${atob(new URLSearchParams(location.search).get("host"))}`;

 

I don't know if it is the best way but it works.
Fabien_Sebban
Shopify Partner
40 0 13

For a reason I don¡t know, this way works only in a dev environment. In a production environment you need to use this:

 

const shopUrl = `https://${atob(window.__SHOPIFY_DEV_HOST).split('/').slice(-1)}.myshopify.com`;

 

 

The AppBridgeProvider of the React app fills the variable window.__SHOPIFY_DEV_HOST.

 

assafl
Shopify Partner
14 0 4

Based on this forum thread I understand that the app's iframe url contains the store myshopify domain. Based on that, this line of code works for me

 

let host = ((new URL(document.location)).searchParams).get("shop");

yash100ni
Shopify Partner
5 0 3
  // The host may be present initially, but later removed by navigation.
  // By caching this in state, we ensure that the host is never lost.
    const host((new URL(document.location)).searchParams).get("shop"|| window.__SHOPIFY_DEV_HOST;


Fabien_Sebban
Shopify Partner
40 0 13

I don't know if the goal is to redirect to a Shopify resource but I leave another approach below in case it helps.

 

With AppBridge 4.0 there is no need to know the Shopify URL to redirect to Shopify resources.

You just need to use the Navigation API:

open('shopify://admin/products/1234', '_top');

 It works also if you want to redirect to the theme editor.