What's your biggest current challenge? Have your say in Community Polls along the right column.
Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Shopify App Bridge: Access Current POS Location Name.

Solved

Shopify App Bridge: Access Current POS Location Name.

camman00
Shopify Partner
2 1 0

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.

Accepted Solution (1)

camman00
Shopify Partner
2 1 0

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.

View solution in original post

Reply 1 (1)

camman00
Shopify Partner
2 1 0

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.