Welcome to the Web SDK documentation for controlling the Cart Widget from your JavaScript code. With our Web SDK, you can listen to various events, open or close the Cart Widget, and perform various actions to enhance your users' shopping experience. This guide will help you understand and utilize the Web SDK effectively..

Available Functions

Our Web SDK provides three types of functions: Event Listener Functions, Information Fetch Functions, and Action Functions. These functions allow you to interact with the Cart Widget from your JavaScript code.

Event Listener Function

These functions listen for specific actions in our widgets and execute a callback function that you define when those actions occur.

corner.on(eventName,callback)

Inside Corner Cart, we offer a handful of events that you can use to track specific actions:

onCartEdit: Triggered when any type of edit occurs within the cart.
onCowiOpen: Triggered when the cart widget is opened.
onCowiClose: Triggered when the cart widget is closed.
onCartCtaClick: Triggered when the Call to Action (CTA) button on the cart is clicked.
onUpsellCtaClick: Triggered when the CTA button on upsell products is clicked.
onDiscountCodeAdd: Triggered when a user adds a discount code.
onDiscountCodeRemove: Triggered when a user removes a discount code.
onSatcCtaClick: Triggered when the CTA button on the Sticky Add to Cart is clicked.
onCartGoalMilestoneAchieve: Triggered when user achieves a new cart goal Milestone
onCartGoalMilestoneLost: Triggered when user looses a cart goal Milestone which they previously achieved.

Track Cart Edits

To capture any changes made to the cart, use the following snippet:

corner.on("onCartEdit", (params) => {
   // Insert the Js code to run on every cart edit
});

In the above code snippet, the params object will contain:

{
cartDetails:{...} // An object containing details of the current cart state
cartEdits:[{...},{...}] // An array of cart edits user made
}

Track Cart Widget Open

To capture when a visitor opens the cart, use the following snippet:

corner.on("onCowiOpen", (params) => {
   //  Insert the Js code to run every time the cart widget is opened
});

In the above code snippet, the params object will contain:

{
cartDetails:{...} // An object containing details of the current cart state
}

Track when user click the checkout button

To capture when a visitor clicks the checkout button, use the following snippet:

corner.on("onCartCtaClick", (params) => {
    //  Insert the Js code to run every time the cart CTA is clicked
});

In the above code snippet, the params object will contain:

{
cartDetails:{...} // An object containing details of the current cart state
}

Track Upsell Product CTA Click

To capture when a visitor clicks the CTA button on an upsell product featured inside the cart, use the following snippet:

corner.on("onUpsellCtaClick", (params) => {
   // Insert the Js code to run every time the upsell CTA is clicked
});

In the above code snippet, the params object will contain:

{
cartDetails:{...} // An object containing details of the current cart state
productAdded : {...} // An object containing detials of specific variant the user just added cart
}

Track Discount Code Additions

To capture when a visitor adds a discount code via our cart widget, use the following snippet:

corner.on("onDiscountCodeAdd", (params) => {
    // Insert the Js code to run every time discount code is added 
});

In the above code snippet, the params object will contain:

{
cartDetails:{...} // An object containing details of the current cart state
discountCodeAdded : {...} // An object containing details regarding the discount code user just added
}

Track Discount Code Removal

To capture when a visitor removes a discount code via our cart widget, use the following snippet:

corner.on("onDiscountCodeRemove", (params) => {
    // Insert the Js code to run every time discount code is removed 
});

In the above code snippet, the params object will contain:

{
cartDetails:{...} // An object containing details of the current cart state
discountCodeRemoved : {...} // An object containing details regarding the discount code user just removed
}

Track Sticky Add to Cart CTA Click

To capture when a visitor clicks the CTA button on the Sticky Add to Cart bar, use the following snippet:

corner.on("onSatcCtaClick", (params) => {
   // Insert the Js code to run every time discount code is removed 
});

In the above code snippet, the params object will contain:

{
cartDetails:{...} // An object containing details of the current cart state
}

Track Cart Goal Campaign Milestones progression

To capture when a visitor achieves a new milestone, use the following snippet:

corner.on("onCartGoalMilestoneAchieve", (params) => {
   // Insert the event capture snippet from your analytics app here
});

In the above code snippet, the params object will contain:

{
cartDetails:{...} // An object containing details of the current cart state
achievedMilestoneIndex: 1 // Position of the milestone user just achieved (starting from 1). 
}

Track Cart Goal Campaign Lost Milestones

To capture when a visitor losses a cart goal milestone, use the following snippet:

corner.on("onCartGoalMilestoneLost", (params) => {
   // Insert the event capture snippet from your analytics app here
});

In the above code snippet, the params object will contain:

{
cartDetails:{...}, // An object containing details of the current cart state
lostMilestoneIndex: 1 // Position of the milestone user just achieved (starting from 1). 
}

These snippets will help you track specific events within the Corner Cart, providing valuable insights for optimizing your user experience.
```

Information Fetch Function

These functions fetch specific information from our system.

corner.get(infoName)

infoNames
cartInfo : Get the cart object, including information about your current cart.
currentProduct : Get the product object of the current product you are viewing.
pageType : Get the type of the current page you are on.

Example
The following function will assign the current page type to a variable named a:

let a = corner.get("pageType")

Action Function

TThese functions allow you to perform actions on the Cart Widget, such as opening and closing it.

corner.do(actionName,value)

Available Actions
openCart: Opens the cart widget.
closeCart: Closes the cart widget.
refreshCart: Refetches cart data from shopify and refreshes corner cart.
cartAdder: Opens the item adder popup. You should pass the product handle of the specific product you want to display in the popup as the second argument.

Open cart widget

Run the following code to open the cart

corner.do("openCart")

Close cart widget

Run the following code to close the cart

corner.do("closeCart")

Close cart widget

Run the following code to refetches cart data from shopify and refreshes corner cart

corner.do("refreshCart")

Open the item adder popup

To open the cart widget and display an option to add a specific product to the cart, use the following JavaScript function. Pass the product id as the second argument:

corner.do("cartAdder",productId)

For Example
The following function will open the cart and inside the cart widget the visitor will be given an option to add the the product with product id 29933171856 to his cart.

corner.do("cartAdder","29933171856")

Updated on: 01/08/2024