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.

  • When editing a site as a collaborator, onCartChanged() will only work when viewing the live site.

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* "id": 1
76* },
77* {
78* "quantity": 1,
79* "price": 25,
80* "name": "Another product",
81* "productId": "1a2d7e83-4bef-31d5-09e1-3326ee271c09",
82* "totalPrice": 25,
83* "lineItemType": "PHYSICAL",
84* "mediaItem": {
85* "src": "wix:image://v1/a9ff3b_c6158b4d41784ae8b08337a331e1de7f.jpg/file.jpg#originWidth=1000&originHeight=1000",
86* "type": "IMAGE"
87* },
88* "sku": "217537123517253",
89* "options": [
90* {
91* "option": "Size",
92* "selection": "Medium"
93* },
94* {
95* "option": "Color",
96* "selection": "Black"
97* }
98* ],
99* "weight": 2,
100* "id": 2
101* }
102* ],
103* "totals": {
104* "discount": 0,
105* "quantity": 2,
106* "shipping": 0,
107* "subtotal": 145,
108* "tax": 0,
109* "total": 145,
110* "weight": 5
111* },
112* "weightUnit": "LB"
113* }
114*/