What is the best way to get shopOrigin from within Shopify react app?

Viewed 260

Overview:

I am using Shopify's CLI to generate an embedded React app. I would like to be able to get the shopOrigin (see code below) from other pages within the application.

Problem:

I have attempted using store-js to store the shopOrigin. This works at first but it seems to clear when I navigate to any other pages within the application.

Note:

Since it is set properly in _app.js I feel that I should simply be able to get the shopOrigin further downstream (i.e. in my index page or any other page) without having to set it in storage.

So, I am completely open to obtaining the shopOrigin a different way without storing it via store-js or any other storage mechanism.

Nonetheless, here is my current code.

Code:

// _app.js

import store from "store-js";
// other imports

class MyApp extends App {
  render() {
    const { Component, pageProps, shopOrigin } = this.props;
    store.set("shopUrl", shopOrigin);
    return (
      <AppProvider i18n={translations}>
        <Provider
          config={{
            apiKey: API_KEY,
            shopOrigin: shopOrigin,
            forceRedirect: true,
          }}
        >
          <ClientRouter />
          <MyProvider Component={Component} {...pageProps} />
        </Provider>
      </AppProvider>
    );
  }
}
// index.js

import store from "store-js";
// other imports

function Index(props) {
  console.log("SHOP URL IS HERE: " + store.get("shopUrl"));
}
0 Answers
Related