Shopify App Bridge and Shopify POS

Indinuity
Shopify Partner
41 1 2

I have been trying for hours to get this to work and keep ending up with an empty page as rendered in the modal. (Edit Cart Link Integration).

 

Is there a super minimal hello-world app available for Shopify POS and App Bridge ?

 

import createApp from '@shopify/app-bridge';
import { Toast } from '@shopify/app-bridge/actions';

const root = document.getElementById("root");

const providerProps = {
  apiKey: root.dataset.apiKey,
  shopOrigin: root.dataset.shopOrigin
};

const app = createApp(providerProps);

const toastOptions = {
  message: 'Product saved',
  duration: 5000,
};

const toastNotice = Toast.create(app, toastOptions);

toastNotice.dispatch(Toast.Action.SHOW);

Here is a very minimal attempt at triggering a Toast via app bridge on ShopifyPOS.   The Toast does not appear.  I have confirmed the apiKey and shopOrigin values are correct.

 

 

Reward yourself and your Customers.
Reply 1 (1)

Trish_Ta
Shopify Staff
58 13 28

Hi Indinuity,

 

Is there any errors in the console when you see the empty page rendered? Can you also try to use the development version of App Bridge to see if it shows any additional helpful messages?

 

Use this:

 

import createApp from '@shopify/app-bridge/development';
 
Instead of: 

 

import createApp from '@shopify/app-bridge';

Trish | Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog