Suggestions for Shopify App Bridge POS documentation

[DanAtBonify]

When trying to setup a POS integration with one of my apps I ran into a couple issues with the Shopify App Bridge documentation that I think warrant some attention. I apologize if some of my notes and/or recommendations are incorrect.

1. Outdated App Bridge file referenced:
Where: https://shopify.dev/tools/app-bridge/getting-started
There is a reference to the file: https://unpkg.com/@shopify/app-bridge@1.6.6/umd/index.js.

Unfortunately this file is long-outdated and I found that POS functionality was not even included in it (a bit confusing since it's not clear if the preferred JS is to use a specific file version or the magical "@1" link).

Using the "https://unpkg.com/@shopify/app-bridge@1" file worked correctly which currently points to version: https://unpkg.com/@shopify/app-bridge@1.17.0/umd/index.js

I would recommend the documentation at least referencing a version that includes POS integration.

2. Possible TypeScript inclusion (not sure if that's on purpose):
Where: https://shopify.dev/tools/app-bridge/actions/cart
I believe all of the code examples should be vanilla JS and not include TypeScript?
There are a couple places where code examples are written as such:

cart.subscribe(Cart.Action.UPDATE, function (payload: Cart.Payload) {...}

The "payload: Cart.Payload" function parameter causes a fatal error in vanilla JS.

Maybe that info is just in there for reference but I found it confusing when copy/pasting.

3. Cart "Set customer" example should use Cart.Action.SET_CUSTOMER
Where: https://shopify.dev/tools/app-bridge/actions/cart#set-customer

The current example calls:

cart.dispatch(Cart.Action.FETCH, {
  data: cutomerPayload
});

I believe a better example would be using:

cart.dispatch(Cart.Action.SET_CUSTOMER, {
  data: cutomerPayload
});

4. Confused (and still not sure) what the difference is between Object.Action.ACTION vs. Object.ActionType.ACTION.
It seems like most events are dispatched using the "Object.Action.ACTION" syntax.

However, POS for example uses "pos.dispatch(Pos.ActionType.CLOSE);".

I am unsure why "ActionType" is used here and not sure if the difference between "Action" and "ActionType" is

documented.

At the end of the day, though, I got the POS integration working. 🙂

[hassain]

Hey @DanAtBonify ,

Thanks for your suggestions. It looks like the App Bridge team has taken these suggestions and made the appropriate fixes to the documentation.

[policenauts1]

I think it was actually correct the way it was written, I just wasted a ton of time because of this.

 pos.dispatch(Pos.Action.CLOSE);

doesn't work.

 pos.dispatch(Pos.ActionType.CLOSE);

as it was originally written, apparently, does work.