The StoreFront Visual Builder will fire several events which you can add JavaScript code to listen to. These public events are designed to be long term stable without exposing any implementation details that we may change in the future.

The following JavaScript code can be added to simply log the events.

jQuery(document).on("stable:cartItem:add stable:cartItem:update stable:cartItem:delete", function(event, item){
  console.log("stable item event", event.type, " on item ", item);
});


jQuery(document).on("stable:cartCoupon:add stable:cartCoupon:delete", function(event, coupon){
  console.log("stable coupon event", event.type, " on coupon ", coupon);
});

Below is a description of the events and example objects.

Item Events

Event Name	Description	Example Payload
stable:cartItem:add	Fired when an item is added by the visual builder.	{ "itemId": "TSHIRT", "quantity": 1 }
stable:cartItem:update	Fired when an item quantity is updated by the visual builder.	{ "itemId": "TSHIRT", "position": 3, "quantity": 1 }
stable:cartItem:delete	Fired when an item is removed by the visual builder	{ "itemId": "TSHIRT", "position": 3 }

Coupon Events

Event Name	Description	Example Payload
stable:cartCoupon:add	Fired when a coupon is added to the cart via the visual builder.	{ "couponCode": "NEWYEAR10" }
stable:cartCoupon:delete	Fired when a coupon is removed from the cart via the visual builder.	{ "couponCode": "NEWYEAR10" }