Create an app and import the Cart module from @shopify/app-bridge/actions. Note that we'll be referring to this sample application throughout the examples below.
Cart actions are available only on the Shopify Point of Sale app, so it’s a good idea to check if an action is available before you call it. This makes sure that you're able to display the appropriate UI when a feature is or is not available. To learn more about Feature Detection, see Features.
The following example shows how you could use Feature Detection with cart actions by requesting if Cart.Action.FETCH is available and using the result to alter your UI.
Start off by requesting if the cart group is available:
The promise block resolves to a state object containing the status of the cart actions. Query for Cart.Action.FETCH and then Dispatch inside that object. If it's true, follow the instructions below for Fetch cart. If it's false, the cart action is not available in this context. Using this approach, it’s possible to distinguish between an empty cart and a context where cart is not available.
app.featuresAvailable(Group.Cart).then(function(state){var_ref=state.Cart&&state.Cart[Cart.Action.FETCH],Dispatch=_ref.Dispatch;if(Dispatch){cart.dispatch(Cart.Action.FETCH);}else{vartoastOptions={message:'Cart is not available',duration:5000,isError:true};vartoastError=Toast.create(app,toastOptions);toastError.dispatch(Toast.Action.SHOW);}});
Update cart
Group
Cart
Action
UPDATE
Action Type
APP::CART::UPDATE
Description
Retrieves the latest state of the currently active cart from Shopify POS.
Subscribing to this action provides you with cart updates.
varunsubscriber=cart.subscribe(Cart.Action.UPDATE,function(payload){console.log('[Client] fetchCart',payload);unsubscriber();});// ...// Call other Cart actions
NoteAttribute Payload
Key
Type
Description
name
String
The name of the attribute.
value
String
The value of the attribute.
Response
Key
Type
Description
subtotal
String
The total cost of the current cart including discounts, but before taxes and shipping. Value is based on the shop's existing currency settings.
taxTotal
String
The sum of taxes for the current cart. Value is based on the shop's existing currency settings.
grandTotal
String
The total cost of the current cart, after taxes and discounts have been applied. Value is based on the shop's existing currency settings.
This is the customer that will be attached to the cart and subsequent order. You can either set a customer with an existing customer ID or create a new customer.
Existing customer with ID:
varcustomerPayload={id:123};
New customer:
varcustomerPayload={email:'voisin@gmail.com',firstName:'Sandrine',lastName:'Voisin',note:'First customer of 2019',};
You can apply a discount to the entire cart, which will affect all line items. There are several different types of discounts. See below for an example of each type.
Flat amount discount:
vardiscountPayload={amount:1,discountDescription:"$1 off discount",type:'flat',}
Percentage discount:
vardiscountPayload={amount:0.5,discountDescription:"50% off discount",type:'percent',}
The discount amount to be applied to the subtotal of the cart as a flat value or total percentage discount. flat discount amounts must be greater than 0. Discounts greater than the subtotal of the cart will be reduced to the subtotal amount. percent discount amounts must be between 0.0 and 1.0.
discountDescription
String?
A description of the discount being applied. Defaults to Discount, if not supplied.
type
String?
The discount type. The options are flat or percent. Defaults to flat, if not supplied.
A list of properties to remove from the current cart.
Add line item
Group
Cart
Action
ADD_LINE_ITEM
Action Type
APP::CART::ADD_LINE_ITEM
Description
Adds a new line item to the current cart.
Line items can be added to the cart in two different ways: as a variant of a product, or as a quick sale item (usually used for one-off sales on items not backed by a variant).
Quick Sale line item:
varlineItemPayload={price:20,quantity:1,title:'Bab Low - Blue Jay // White Soles',};
The key-value pairs of properties to add to the specified line item.
Remove line item properties
Group
Cart
Action
REMOVE_LINE_ITEM_PROPERTIES
Action Type
APP::CART::REMOVE_LINE_ITEM_PROPERTIES
Description
Removes a property from a given line item in the current cart.
When removing properties, reference the key of property. In the properties that were set on the cart above, the keys were: referral and userID. You can pass in either of those values to remove them.