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

1. Quick Start
2. Event Listener Functions
3. Information Fetch Functions
4. Action Functions
5. 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 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

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

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

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