Suggestions for Shopify App Bridge POS documentation

Suggestions for Shopify App Bridge POS documentation

DanAtBonify
Shopify Partner
57 4 38

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

Replies 2 (2)

hassain
Shopify Staff (Retired)
624 104 188

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.

 

To learn more visit the Shopify Help Center or the Community Blog.

policenauts1
Trailblazer
174 13 39

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.