onChange( )

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

Description

The onChange() 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 onChange() 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. Learn more about global (site) code.
The onChange() 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.
When editing a site as a contributor, onChange() will only work when viewing the live site.

Syntax

function onChange(handler: CartChangedHandler): void
handler: function CartChangedHandler(cart: CartObj): void

onChange Parameters

NAME

TYPE

DESCRIPTION

handler

CartChangedHandler

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

Returns

This function does not return anything.

Return Type:

void

CartChangedHandler Parameters

NAME

TYPE

DESCRIPTION

cart

CartObj

The changed cart.

Returns

This function does not return anything.

Return Type:

void

Was this helpful?

An event when a cart is changed

Copy Code

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