Search.../

onCartChanged( )

An event handler that is triggered when items are added or removed from a shopping cart.

Description

The onCartChanged() function is a client-side event handler invoked every time the cart changes. It takes a callback function which receives the new Cart object as a parameter.

Notes:

  • Use onCartChanged() in the global site code file (masterPage.js). This ensures the event is triggered when a change to the cart is made on any page.
  • The onCartChanged() function can only be used once a page has loaded. Therefore, you must use it in code that is contained in or is called from the onReady() event handler or any element event handler.

Syntax

function onCartChanged(handler: CartChangedHandler): void
handler: function CartChangedHandler(cart: Cart): void

onCartChanged Parameters

NAME
TYPE
DESCRIPTION
handler

CartChangedHandler

The name of the function or the function expression to run when a cart changes.

Returns

This function does not return anything.

Return Type:

void

CartChangedHandler Parameters

NAME
TYPE
DESCRIPTION
cart

Cart

The changed cart.

Returns

This function does not return anything.

Return Type:

void

Was this helpful?

An event when a cart is changed

Code Example

Copy Code
1/************************************
2 * Global (Site) code (masterPage.js) *
3 ************************************/
4
5import wixStores from 'wix-stores';
6
7$w.onReady(function () {
8 wixStores.onCartChanged((cart) => {
9 const cartId = cart._id;
10 const cartLineItems = cart.lineItems;
11 });
12});
13
14/* Example cart object:
15*
16* {
17* "_id": "b36eb035-635a-450e-b74d-acf86ee4dfcc",
18* "appliedCoupon": {
19* "couponId": "e81e9c48-f954-4044-ba64-ccfe5c103c8f",
20* "name": "Summer Sale",
21* "code": "SummerSale",
22* "discountValue": "$10.00",
23* "couponType": "MoneyOff"
24* },
25* "billingAddress": {
26* "firstName": "John",
27* "lastName": "Doe",
28* "email":"john.doe@somedomain.com",
29* "phone":"5555555",
30* "address":"235 West 23rd Street\nNew York, New York 10011\nUnited States"
31* },
32* "buyerNote": "This is a note from the buyer.",
33* "buyerInfo":{
34* "firstName": "John",
35* "lastName": "Doe",
36* "email": "john.doe@somedomain.com",
37* "phone": "5555555555",
38* "identityType": "CONTACT"
39* },
40* "status": "INCOMPLETE",
41* "currency": {
42* "code": "USD",
43* "symbol": "$"
44* },
45* "shippingInfo": {
46* "deliveryOption": "Free Shipping",
47* "shippingAddress": {
48* "firstName": "John",
49* "lastName": "Doe",
50* "email":"john.doe@somedomain.com",
51* "phone":"5555555",
52* "address":"235 West 23rd Street\nNew York, New York 10011\nUnited States"
53* },
54* "pickupDetails":null
55* },
56* "lineItems":[
57* {
58* "quantity": 1,
59* "price": 120,
60* "name": "A product",
61* "productId": "a668ef33-f5b8-6569-d04c-1d123be68441",
62* "totalPrice": 120,
63* "lineItemType": "PHYSICAL",
64* "customTextFields": [
65* "title": "Custom Field",
66* "value": "Custom value"
67* ],
68* "mediaItem": {
69* "src": "wix:image://v1/a9ff3b_ed3b544c319b4fad9c222c791a997832.jpg/file.jpg#originWidth=1000&originHeight=1000",
70* "type": "IMAGE"
71* },
72* "sku": "21554345656",
73* "options": [ ],
74* "weight": 3
75* },
76* {
77* "quantity": 1,
78* "price": 25,
79* "name": "Another product",
80* "productId": "1a2d7e83-4bef-31d5-09e1-3326ee271c09",
81* "totalPrice": 25,
82* "lineItemType": "PHYSICAL",
83* "mediaItem": {
84* "src": "wix:image://v1/a9ff3b_c6158b4d41784ae8b08337a331e1de7f.jpg/file.jpg#originWidth=1000&originHeight=1000",
85* "type": "IMAGE"
86* },
87* "sku": "217537123517253",
88* "options": [
89* {
90* "option": "Size",
91* "selection": "Medium"
92* },
93* {
94* "option": "Color",
95* "selection": "Black"
96* }
97* ],
98* "weight": 2
99* }
100* ],
101* "totals": {
102* "discount": 0,
103* "quantity": 2,
104* "shipping": 0,
105* "subtotal": 145,
106* "tax": 0,
107* "total": 145,
108* "weight": 5
109* },
110* "weightUnit": "LB"
111* }
112*/