Line Item Discounts in PoS App

Highlighted
Excursionist
18 2 6

Hey all,

I'm attempting to make a custom app that will discount products to a value set in a tag on the product, at PoS. Each product might have a different discounted price, and therefore tag value.

Everything I've read has pointed me towards an Edit Cart integration, so I've just gotten to the stage where I have something working in terms of a discounting tile. So if I click a tile in the Shopify POS app on my phone, it can apply a flat $5 off, and revert it. This involved setting up endpoints at /api/promotions, /perform_action and /revert_action.

However, I'm not seeing anything in the accepted SimpleActionList responses that would do a line item discount. I tried using app.getState() to check the items in the cart, but can't do that serverside anyway in an API response. You can tell I'm grasping at straws here, but I believe there's nothing I can do with the Edit Cart endpoints to assess the cart and apply line item discounts.

Now I'm thinking what I need to do is just embed the app generally in POS, and the user clicks a tile to open a UI (like opening an app from the Shopify admin), and there I expect to be able to use functions like https://shopify.dev/tools/app-bridge/actions/cart#set-line-item-discount. What this'll end up being is likely an app with a button to apply the discounts to the cart, and a button to unapply them, retrieving product information to find the discounted price in tags. I believe this means the user will have to go into the app and do all this for every cart.

Can anyone with a bit of App Bridge knowledge qualify my approach now that I'm redoing the app to not be an Edit Cart action? It'd be great to have an idea if this is possible or if I'm going to run into more issues. Cheers.

0 Likes
Highlighted
Shopify Partner
234 14 49

I was able to utilize this method just fine --> https://shopify.dev/tools/pos-app-sdk/methods#set-line-item-discount.  In my custom HTML page I just referenced https://cdn.shopify.com/s/assets/external/pos_app.js and was able to access the cart via the ShopifyPOS.fetchCart() method, and then if there are line items present I could set discounts on them. Although I realize the POS SDK is deprecated in favor of the App Bridge, my development work was just a proof of concept, since we aren't using Shopify POS in production as of yet.

2 Likes
Highlighted
Excursionist
18 2 6

Hey Greg, thanks for chiming in. A good way through this I wondered if I wasn't better off using the SDK, since there's a working example app and tutorial out there.

I did eventually get this done with App Bridge. I'm using line item discounts as documented here: https://shopify.dev/tools/app-bridge/actions. One weird thing: I tried running the discounts a few times in a row, and I got some really odd results with fractions of a cent involved. If I remove all discounts before applying them again, that works, so that's what I'm doing.

For anyone else reading, I did have to abandon the Edit Cart integration, it doesn't handle anything more complex than static discounts available from an endpoint. Instead the user has to go into the app, and click a button, which applies the discount for the current cart. It has to be applied again if the cart changes, because I need to be precise and needed to use a flat rather than percentage discount.

My rough structure using the index.js file is to fetch the cart, then query for the products in there with GraphQL on componentDidMount. This gives me my tag data on load. Then, when I apply the discount, I add all the cart dispatch events to a queue and run them with a recursive queue function, which runs itself as a callback until it's been through all the events - I believe the cart dispatch events are super fast, but asynchronous. This is working for me. Feel free to message me if you have questions about your own app if it's in a similar style.

0 Likes