Issue with Embedded POS app - AppBridge Cart not fetching data

[runTimeZero]

In my embedded POS application, I am creating a Cart object (on cart page).

However when I perform any actions on the cart I get no response back.

I did verify that I have permissions to access the cart.

const AppBridge = window['app-bridge'];
const actions = window['app-bridge'].actions;
const createApp = AppBridge.createApp;
const Cart = actions.Cart;

const app = createApp({
  apiKey: 'foo',  
  shopOrigin: 'foobar.myshopify.com'
});

// Verify that you have permissions to the cart
app.getState().then((state) => {
     console.info('App State: %o', state)
}).catch(error => {
    alert(error);
});

// The above returns this data. Hence I know that I have access to Cart
{
..
Cart: { UPDATE: {Subscribe: true, Dispatch: true}, FETCH: {Subscribe: true, Dispatch: true} .....
}


const cart = Cart.create(app);
cart.subscribe(Cart.Action.FETCH, function (payload) {
   // ---> This callback never executes
      $("#container2").html(JSON.stringify(payload));
});

cart.subscribe(Cart.Action.UPDATE, function (payload) {
   // ---> This callback never executes too
     // do something here
});

// ok let's try this
app.featuresAvailable(Group.Cart).then(function (state) {
  --> this call back doesn't fire too... 
});
cart.dispatch(Cart.Action.FETCH);

I feel like there's something very basic that I am missing. Can someone pls assist.

[hannachen]

👋Hi runTimeZero, thanks for sharing this. The code you posted looks to be correct, so I'm unsure why you're not seeing any data being returned.

The only thing that looks off to me is when subscribing to `app.featuresAvailable`, I don't see `Group` defined in your code sample, so in this case, you might need something like `actions.Group.Cart` instead for that part to work.

Aside from that, I was wondering how you're checking the data that is returned from the cart update events? Are you testing your app using the POS Mobile app? What do you use to inspect the output from console.log()?

[runTimeZero]

The way I verify is below:

// in my html
<div id="container">

//in my javascript 
app.getState().then((state) => {
    $("#container").html(JSON.stringify(state));
}).catch(error => {
   alert(error);
});

So using actions.Group.Cart  I was able to retrieve information as below:

{"Cart":{"UPDATE":{"Subscribe":true,"Dispatch":true},"REMOVE_LINE_ITEM_DISCOUNT":{"Subscribe":true,"Dispatch":true},"FETCH":{"Subscribe":true,"Dispatch":true},"REMOVE_PROPERTIES":{"Subscribe":true,"Dispatch":true},"ADD_LINE_ITEM":{"Subscribe":true,"Dispatch":true},"REMOVE_LINE_ITEM_PROPERTIES":{"Subscribe":true,"Dispatch":true},"REMOVE_DISCOUNT":{"Subscribe":true,"Dispatch":true},"REMOVE_LINE_ITEM":{"Subscribe":true,"Dispatch":true},"SET_LINE_ITEM_PROPERTIES":{"Subscribe":true,"Dispatch":true},"ADD_CUSTOMER_ADDRESS":{"Subscribe":true,"Dispatch":true},"CLEAR":{"Subscribe":true,"Dispatch":true},"SET_DISCOUNT":{"Subscribe":true,"Dispatch":true},"SET_PROPERTIES":{"Subscribe":true,"Dispatch":true},"UPDATE_LINE_ITEM":{"Subscribe":true,"Dispatch":true},"SET_CUSTOMER":{"Subscribe":true,"Dispatch":true},"REMOVE_CUSTOMER":{"Subscribe":true,"Dispatch":true},"SET_LINE_ITEM_DISCOUNT":{"Subscribe":true,"Dispatch":true},"UPDATE_CUSTOMER_ADDRESS":{"Subscribe":true,"Dispatch":true}}}

From my understanding, it seems I do have permissions to access Cart data. However I am still lost as to why none of the callbacks fire.

The below still won't work

const cart = Cart.create(app);
cart.subscribe(Cart.Action.FETCH, function (payload) {
$("#container2").html(JSON.stringify(payload));
});
cart.dispatch(Cart.Action.FETCH);

Could you please assist ?

[hannachen]

That's very curious indeed, because your code looks to be correct. Just to confirm, there's an app link from the POS checkout screen to your app, right? And you're viewing this page after following the link?

I tried out your code in my own test app and I had similar issues getting the cart action subscriptions to work at first. But after a few refreshes and app restarts, it seems to be working consistently now. I'm wondering if you might be experiencing something similar? Could you please try refreshing the page from within the POS app by pulling down on the page?

[Henry_Tao · Accepted solution]

Hi @runTimeZero 

Can you try this snippet?

const AppBridge = window['app-bridge'];
const actions = window['app-bridge'].actions;
const createApp = AppBridge.createApp;
const Cart = actions.Cart;

const app = createApp({
  apiKey: 'foo',  
  shopOrigin: 'foobar.myshopify.com'
});

const unsubscribe = app.subscribe(Features.ActionType.UPDATE, function () { 
  app.featuresAvailable(Group.Cart).then((features) => { 
    const hasFetchCart = features.Cart[Cart.Action.FETCH]; 
    if (hasFetchCart) { 
      unsubscribe(); 
      const cart = Cart.create(app); 
      cart.subscribe(AppBridge.Cart.Action.UPDATE, payload => { 
        console.log({cart: { payload }}); 
      });
      cart.dispatch(Cart.Action.FETCH);
    } 
  }); 
});

[policenauts1]

Hi @Henry_Tao 

The code snippet you provided below works when I run it on Android Shopify POS (3.50.0), but it doesn't work when I run it on iOS in the new Shopify POS (iPhone 8, iOS 13, Shopify POS 6.5.0) - hasFetchCart returns false.

For iOS, the documented snippet does work (https://shopify.dev/tools/app-bridge/actions/cart), but I can't get it work on Android (Pixel 1, Android 10 running 3.50.0). 

Is this a known issue? 

[Henry_Tao]

Hi @policenauts1 I will find someone to help with your question. 

[policenauts1]

Thanks @Henry_Tao. This wouldn't be a big deal if I could detect the device and route accordingly, but I'm also having trouble there (see: https://community.shopify.com/c/Shopify-APIs-SDKs/App-Bridge-Pos-app-getState-pos-device-is-returnin...)

[policenauts1]

Hi @Henry_Tao thanks for your help, it looks like your snippet for Cart functions is now working for both iOS and Android.

[Henry_Tao]

FYI, the other issue https://community.shopify.com/c/Shopify-APIs-SDKs/App-Bridge-Pos-app-getState-pos-device-is-returnin... still need to be fixed. I log a ticket for it.