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
• Cart Edit Override Functions
• Checkout Override Functions
• Need Help?

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

Do something after cart edit

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
}

Do something after cart 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
}

Do something after 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
}

Do something after 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
}

Do something after 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
}

Do something after 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
}

Do something after cart goal 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.

Cart Edit Override Functions

The overrideCartEdit function in the CornerCart Web SDK provides powerful control over your store's cart functionality. It acts as a middleware, allowing you to intercept and modify any cart-related action triggered by a customer on your storefront before it is executed.

This is particularly useful for implementing complex, conditional cart logic that goes beyond standard discount rules.

How It Works

When a user performs an action that would normally edit the cart—such as adding a product, changing a quantity, or removing an item—the CornerCart app first compiles a list of Ajax jobs to perform the requested changes.

If you have defined the overrideCartEdit function, the app will pass this list of jobs to your custom function. Your function can then review, modify, or even replace this list of jobs before returning it. CornerCart will then execute the jobs you return.

This gives you a chance to alter any cart operation on the fly.

Function Definition

The function is defined as a callback on the global corner object:

corner.overrideCartEdit((cartObject, ajaxJobQueue) => {
  console.log("Cart edit triggered:", ajaxJobQueue);
  
  // Your custom logic goes here...
  
  // You must always return the job list, even if it's unmodified
  return ajaxJobQueue;
});

Parameters

• cartObject: A JavaScript object representing the current state of the cart before the edit takes place. You can use this to check the cart's contents, total price, or line item properties to inform your logic.
• ajaxJobQueue: An array of JavaScript objects, where each object represents a specific action to be performed on the cart. This is the list of jobs that our app would have run by default.

Practical Example: Enforcing a Minimum Quantity

A common use case for overrideCartEdit is to enforce a minimum quantity for a specific product. This example shows how to block a user from decreasing the quantity of a specific variant below 5 and displays a modal to inform them.

corner.overrideCartEdit((cartObject, ajaxJobQueue) => {
  // The variant ID for the product with a minimum quantity requirement.
  const targetVariantId = 44482780168383;

  // Find the index of the target item in the current cart.
  const index = cartObject.items.findIndex(item => item.variantId === targetVariantId);

  // Only proceed if the item is in the cart.
  if (index !== -1) {
    // Find if there is a 'change' job that attempts to set the quantity to less than 5.
    const jobIndex = ajaxJobQueue.findIndex(jobItem => {
      const isChangeJob = jobItem.job === 'change';
      const isLineMatch = jobItem.details?.payload?.line === index + 1;
      const isQtyLessThan5 = jobItem.details?.payload?.quantity < 5;
      return isChangeJob && isLineMatch && isQtyLessThan5;
    });

    // If such a job is found, we'll block it and show a modal.
    if (jobIndex !== -1) {
      // Show a modal to the user explaining the minimum quantity.
      window.showCornerCartModal({
        title: "Minimum Quantity",
        description: "The minimum quantity for this item is 5.",
        primaryCta: { text: "OK" }
      });
      
      // Remove the job from the queue to prevent the quantity change.
      ajaxJobQueue.splice(jobIndex, 1);
    }
  }

  // Always return the (potentially modified) job queue.
  return ajaxJobQueue;
});

Important Considerations

• Return a Value: Your overrideCartEdit function must always return an array (the ajaxJobQueue or a modified version). If it does not return an array, the cart edit will fail.
• The Power of ajaxJobQueue: The objects within this array represent a variety of cart actions. You can inspect the method and url properties of these jobs to understand what action they represent. You can also add your own jobs to the array to trigger new actions, such as adding a different item, setting line item properties, or even updating the cart total.

ajaxJobQueue Object Structure

Every object in the ajaxJobQueue array will follow this structure:

{
  "job": "string",
  "details": {}
}

• job: This is a string that indicates the type of cart action. The possible values correspond to the Shopify AJAX API calls:
• • "add": Corresponds to cart/add.js.
  • "update": Corresponds to cart/update.js.
  • "change": Corresponds to cart/change.js.

You can read more about these API calls in the Shopify AJAX API reference.

• details: An object containing the specifics for the job. It has the following structure:
• • payload: The payload for the corresponding AJAX API call.
  • params: An array of extra data. At the moment, this value is only used for discount add and remove jobs.
• Debugging: Use console.log() inside your function to inspect the cartObject and ajaxJobQueue and understand how the data changes with each cart interaction.

Checkout Override Functions

The overrideCheckout function provides a way for you to intercept and customize what happens when a customer clicks the checkout button in your cart. Instead of immediately redirecting to the Shopify checkout page, this function allows you to execute your own custom logic first.

This is useful for adding an extra confirmation step, displaying a final upsell offer, or ensuring certain conditions are met before a user can check out.

Function Definition

The function is defined as a callback on the global corner object:

corner.overrideCheckout((cartObject, discountCodeApplied) => {
  console.log("Checkout triggered");
  
  // Your custom logic goes here...
});

Parameters

• cartObject: A JavaScript object representing the current state of the cart at the moment the checkout button is clicked. You can use this to check items, totals, or other properties.
• discountCodeApplied: An array of strings representing the codes of any discounts currently applied to the cart.

Practical Example: Enforcing a Minimum Order Value

In this example, we will prevent a user from checking out if their order total is less than $20. A modal will be displayed to inform them of the minimum requirement.

corner.overrideCheckout((cartObject, discountCodeApplied) => {
  // Check if the cart total is less than our minimum threshold
  if (cartObject.cost.totalAmount / 100 < 20) {
    // If it is, show a modal and prevent checkout
    window.showCornerCartModal({
      title: "Minimum Order",
      description: "You must have a cart total of at least $20 to check out.",
      primaryCta: {
        text: "Ok"
      }
    });
  } else {
    // If the cart total is high enough, proceed to checkout
    window.location.href = '/checkout';
  }
});

Important Considerations

• You must manually redirect: By default, once overrideCheckout is defined, the app will not automatically redirect to the checkout page. You must manually add a line of code like window.location.href = '/checkout' to perform the redirection once your custom logic is complete.
• Single function definition: You should only define the overrideCheckout function once on your storefront.
• Async operations: If your logic involves an asynchronous operation (like fetching data from an external API), make sure to handle the promise and perform the checkout redirection within the .then() block.

Need Help?

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

Updated on: 10/09/2025