Add-To-Cart Events
- Andy Jiang
- Chaoran Wang
- Danny Wang
This section explains how you can listen to add-to-cart events trigger actions.
Events
Event Name: przGreenbackAddToCartEvent
The przGreenbackAddToCartEvent event fires when adding to the cart is triggered in the Greenback widget. The event will contain products in an array of objects and each has IDs and quantity.
Syntax
Use the code below to listen to the event when it fires.
document.addEventListener('przGreenbackAddToCartEvent', function(event) {
const items = event.detail;
// Do what you want to do with product in items, e.g. refresh cart
})Data
Name | Data Type | Example | Explain |
|---|---|---|---|
detail | array | [
{
id: "1234",
productId: "1111",
quantity: 1
},
{
id: “4421”,
productId: "2222",
quantity: 1
}
] | The detail contains a list of products added to the cart.
|
Implementation
Example
document.addEventListener('przGreenbackAddToCartEvent', function(event) {
const items = event.detail;
// Refresh cart
})Test without a developer
You can test without modifying the code
Inspect the page
Go to the page that has the Greenback widget on. Right-click on the page and click oninspect. It opens up the devtool panel. Then click on theconsoletab within the dev tool panel.Add event listener
Within the console panel copy and paste the sample code below.document.addEventListener('przGreenbackAddToCartEvent', function(event) { const items = event.detail; console.log('Items added to cart:', items); })Press enter
Add product to cart
Navigate to the Greenback widget and interact with the chat to add a product to the cart while keeping the console open. Once the add-to-cart is triggered you should see a message in the console showing all items passed in the event.
