Issue with Embedded POS app - AppBridge Cart not fetching data

Solved
Highlighted
New Member
16 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
Shopify Staff
Shopify Staff
12 0 3

👋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
New Member
16 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
Shopify Staff
Shopify Staff
12 0 3

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

Success.

Shopify Staff
Shopify Staff
34 14 3

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