Corner Cart Web SDK Documentation

Introduction

Welcome to the Corner Cart Web SDK documentation. This guide helps you control the Cart Widget and enhance your users' shopping experience directly from your JavaScript code. With our SDK, you can listen to events, retrieve information, and perform actions to create a seamless shopping journey.

Table of Contents

Quick Start
Event Listener Functions
Information Fetch Functions
Action Functions
Modal Functions

Quick Start

The Corner Cart SDK is automatically available on your site as the global corner object. No installation is required.

// Example: Open the cart
corner.do("openCart");

// Example: Listen for cart edits
corner.on("onCartEdit", (params) => {
  console.log("Cart was edited:", params);
});

Event Listener Functions

Listen for specific actions in our widgets and execute your custom callback function when those actions occur.

Basic Usage

corner.on(eventName, callback)

Available Events

Event Name	Description
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 checkout button is clicked
onUpsellCtaClick	Triggered when an upsell product's CTA button is clicked
onDiscountCodeAdd	Triggered when a discount code is added
onDiscountCodeRemove	Triggered when a discount code is removed
onSatcCtaClick	Triggered when the Sticky Add to Cart button is clicked
onCartGoalMilestoneAchieve	Triggered when a user achieves a new cart goal milestone
onCartGoalMilestoneLost	Triggered when a user loses a previously achieved cart goal milestone

Event Examples

Track Cart Edits

corner.on("onCartEdit", (params) => {
  // Your code here
  console.log("Cart details:", params.cartDetails);
  console.log("Edit history:", params.cartEdits);
});

The params object contains:

{
  cartDetails: {...}, // Current cart state
  cartEdits: [{...}, {...}] // Array of cart edits made by the user
}

Track Cart Widget Open

corner.on("onCowiOpen", (params) => {
  // Your code here
  console.log("Cart opened with items:", params.cartDetails.items.length);
});

The params object contains:

{
  cartDetails: {...} // Current cart state
}

Track Checkout Button Clicks

corner.on("onCartCtaClick", (params) => {
  // Your code here
  console.log("Checkout initiated with total:", params.cartDetails.total_price);
});

The params object contains:

{
  cartDetails: {...} // Current cart state
}

Track Upsell Product Clicks

corner.on("onUpsellCtaClick", (params) => {
  // Your code here
  console.log("Upsell product added:", params.productAdded.title);
});

The params object contains:

{
  cartDetails: {...}, // Current cart state
  productAdded: {...} // Details of the specific variant added to cart
}

Track Discount Code Activity

// When a discount code is added
corner.on("onDiscountCodeAdd", (params) => {
  console.log("Discount code added:", params.discountCodeAdded.code);
});

// When a discount code is removed
corner.on("onDiscountCodeRemove", (params) => {
  console.log("Discount code removed:", params.discountCodeRemoved.code);
});

The params objects contain:

{
  cartDetails: {...}, // Current cart state
  discountCodeAdded/discountCodeRemoved: {...} // Details about the discount code
}

Track Sticky Add to Cart Clicks

corner.on("onSatcCtaClick", (params) => {
  // Your code here
  console.log("Sticky add to cart clicked");
});

The params object contains:

{
  cartDetails: {...} // Current cart state
}

Track Cart Goal Campaign Progress

// When a milestone is achieved
corner.on("onCartGoalMilestoneAchieve", (params) => {
  console.log("Milestone achieved:", params.achievedMilestoneIndex);
});

// When a milestone is lost
corner.on("onCartGoalMilestoneLost", (params) => {
  console.log("Milestone lost:", params.lostMilestoneIndex);
});

The params objects contain:

{
  cartDetails: {...}, // Current cart state
  achievedMilestoneIndex/lostMilestoneIndex: 1 // Position of the milestone (starting from 1)
}

Information Fetch Functions

Retrieve specific information from our system using the get method.

Basic Usage

corner.get(infoName)

Available Information Types

Info Name	Description
cartInfo	Get the complete cart object with current cart information
currentProduct	Get the product object for the product currently being viewed
pageType	Get the type of the current page

Example

// Get the current page type
const pageType = corner.get("pageType");
console.log("Current page:", pageType);

// Get cart information
const cartInfo = corner.get("cartInfo");
console.log("Cart total:", cartInfo.total_price);

// Get current product information (on product pages)
const productInfo = corner.get("currentProduct");
if (productInfo) {
  console.log("Viewing product:", productInfo.title);
}

Action Functions

Perform actions on the Cart Widget using the do method.

Basic Usage

corner.do(actionName, value)

Available Actions

Action Name	Description	Value Required
openCart	Opens the cart widget	No
closeCart	Closes the cart widget	No
refreshCart	Refetches cart data from Shopify and refreshes the cart	No
cartAdder	Opens the item adder popup for a specific product	Yes - Product ID

Examples

// Open the cart
corner.do("openCart");

// Close the cart
corner.do("closeCart");

// Refresh the cart
corner.do("refreshCart");

// Open item adder for a specific product
corner.do("cartAdder", "29933171856");

Modal Functions

Display modal messages within your application using the window.showCornerCartModal function.

Basic Usage

window.showCornerCartModal({
  title: "Optional Title",
  description: "Your message goes here",
  isClosable: true,
  primaryCta: {
    text: "Confirm",
    action: () => {
      // Your code here
    }
  },
  secondaryCta: {
    text: "Cancel",
    action: () => {
      // Your code here
    }
  }
});

Parameters

Parameter	Type	Required	Description
title	String	No	Text displayed as the title of the modal
description	String	No	HTML-enabled text displayed as the main message
isClosable	Boolean	No	When true, displays a close button in the top-right corner
primaryCta	Object	No	Configuration for the primary call-to-action button
primaryCta.text	String	No	Text displayed on the primary button (defaults to "Ok")
primaryCta.action	Function	No	Function to execute when the primary button is clicked
secondaryCta	Object	No	Configuration for the secondary call-to-action button
secondaryCta.text	String	No	Text displayed on the secondary button (defaults to "Cancel")
secondaryCta.action	Function	No	Function to execute when the secondary button is clicked

Example Use Cases

Basic Alert

window.showCornerCartModal({
  title: "Information",
  description: "Your cart has been updated.",
  primaryCta: {
    text: "Ok"
  }
});

Confirmation Dialog

window.showCornerCartModal({
  title: "Confirm Action",
  description: "Are you sure you want to remove all items?",
  isClosable: true,
  primaryCta: {
    text: "Yes, remove all",
    action: () => {
      // Code to remove items
      emptyCart();
      // Close the modal manually when done
      nav.cowiOverlay.set(null);
    }
  },
  secondaryCta: {
    text: "Cancel"
  }
});

Warning Message

window.showCornerCartModal({
  title: "Warning",
  description: "The discount code you entered is not applicable to items in your cart.",
  secondaryCta: {
    text: "Ok"
  }
});

HTML-Formatted Message

window.showCornerCartModal({
  title: "Information",
  description: "Your order is <strong>confirmed</strong>. Thank you for shopping with us!",
  primaryCta: {
    text: "Continue Shopping"
  }
});

Notes

- If no action is defined for the buttons, the modal will simply close when clicked.
- The description parameter supports HTML formatting.
- If either CTA button is omitted, it won't appear in the modal.
- The modal automatically animates with a slide-up effect.

Need Help?

For additional assistance or technical support, please contact our support team.

Updated on: 05/05/2025