Questions and discussions about using the Shopify CLI and Shopify-built libraries.
It looks like in past versions of AppBridge there was a mechanism to access POS information such as the storefront name. I could find no such information within the current documentation of AppBridge; only a boolean value indicating whether the app is embedded on POS. The new 4.x version as a new release should contain and build off of all the best features of <3.x. Can someone please advise if this functionality is possible within the current context.
Solved! Go to the solution
This is an accepted solution.
@camman00 wrote:It looks like in past versions of AppBridge there was a mechanism to access POS information such as the storefront name. I could find no such information within the current documentation of AppBridge; only a boolean value indicating whether the app is embedded on POS. The new 4.x version as a new release should contain and build off of all the best features of <3.x. Can someone please advise if this functionality is possible within the current context.
Found an answer for this. You can actually use both versions of AppBridge concurrently. To do install AppBridge <3.x from npm. Utilize the following:
import React, { createContext, useContext } from 'react';
import { createApp } from '@shopify/app-bridge';
import {Pos} from '@shopify/app-bridge/actions';
// Create the App Bridge context
const AppBridgeContext = createContext();
// Custom hook to use the App Bridge context
export const useAppBridge = () => useContext(AppBridgeContext);
// App Bridge provider component
export const AppBridgeProvider = ({ apiKey, host, children }) => {
// Initialize App Bridge
const app = createApp({
apiKey,
host,
});
const pos = Pos.create(app);
return (
<AppBridgeContext.Provider value={{app, pos}}>
{children}
</AppBridgeContext.Provider>
);
};
In app.jsx make the following change:
return (
<AppBridgeProvider apiKey={apiKey} host={host}>
<AppProvider isEmbeddedApp apiKey={apiKey}>
<Link to="/app"/>
<Outlet />
</AppProvider>
</AppBridgeProvider>
);
Merry xmas you should be all set.
This is an accepted solution.
@camman00 wrote:It looks like in past versions of AppBridge there was a mechanism to access POS information such as the storefront name. I could find no such information within the current documentation of AppBridge; only a boolean value indicating whether the app is embedded on POS. The new 4.x version as a new release should contain and build off of all the best features of <3.x. Can someone please advise if this functionality is possible within the current context.
Found an answer for this. You can actually use both versions of AppBridge concurrently. To do install AppBridge <3.x from npm. Utilize the following:
import React, { createContext, useContext } from 'react';
import { createApp } from '@shopify/app-bridge';
import {Pos} from '@shopify/app-bridge/actions';
// Create the App Bridge context
const AppBridgeContext = createContext();
// Custom hook to use the App Bridge context
export const useAppBridge = () => useContext(AppBridgeContext);
// App Bridge provider component
export const AppBridgeProvider = ({ apiKey, host, children }) => {
// Initialize App Bridge
const app = createApp({
apiKey,
host,
});
const pos = Pos.create(app);
return (
<AppBridgeContext.Provider value={{app, pos}}>
{children}
</AppBridgeContext.Provider>
);
};
In app.jsx make the following change:
return (
<AppBridgeProvider apiKey={apiKey} host={host}>
<AppProvider isEmbeddedApp apiKey={apiKey}>
<Link to="/app"/>
<Outlet />
</AppProvider>
</AppBridgeProvider>
);
Merry xmas you should be all set.