Issue with Embedded POS app - AppBridge Cart not fetching data

Solved
Highlighted
Shopify Partner
20 0 0

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.

0 Likes
Highlighted
Shopify Staff
Shopify Staff
45 7 13

👋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()?

0 Likes
Shopify Partner
20 0 0

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 ?

 

 

0 Likes
Highlighted
Shopify Staff
Shopify Staff
45 7 13

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?

 

Simulator Screen Shot - iPad Air 2 - 2019-09-07 at 14.14.12.png

0 Likes
Highlighted
Shopify Staff
Shopify Staff
56 21 6

This is an 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);
}
});
});
0 Likes
Highlighted
Explorer
107 8 15

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? 

0 Likes
Highlighted
Shopify Staff
Shopify Staff
56 21 6

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

0 Likes
Highlighted
Explorer
107 8 15

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...)

0 Likes
Highlighted
Explorer
107 8 15

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

1 Like
Highlighted
Shopify Staff
Shopify Staff
56 21 6

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. 

1 Like