Lightweight, global helpers for opening/closing the slide cart and adding items programmatically. These functions are injected on the storefront once Oxify Cart is installed and enabled.

Getting Started

Once Oxify Cart is installed on your Shopify store, the public API becomes available on the global window object on storefront pages.

Prerequisites

• Active Oxify Cart installation on your Shopify store
• Basic understanding of JavaScript
• Familiarity with Shopify theme structure

Feature Detection (Important)

Always check that the functions exist before calling them. This prevents errors if the app is disabled or a script hasn’t loaded yet.

<script>
  function isIACartReady() {
    return typeof window.openIACartDrawer === "function" &&
           typeof window.closeIACartDrawer === "function" &&
           typeof window.addItemsToIACartDrawer === "function";
  }
</script>

Best Practices

• Check for API availability before calling (see Feature Detection).
• Handle failed add-to-cart attempts gracefully (network issues, invalid variant IDs, etc.).
• Use event listeners from your theme (e.g., re-render cart badge after add) where applicable.
• Test across multiple devices and browsers; verify behavior with other cart apps present.

Browser Compatibility

The IA Cart Public API supports modern browsers:

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Note: Implement feature detection before using these APIs to ensure compatibility across browsers and versions.

API Reference

window.openIACartDrawer()

Summary

Programmatically opens the Oxify Cart slide cart. Useful when your theme or another app overrides default open behavior.

Type

() => void

Example

if (typeof window.openIACartDrawer === "function") {
  window.openIACartDrawer();
}

window.closeIACartDrawer()

Summary

Programmatically closes the IA Cart slide cart. Useful when another app intercepts default close behavior.

Type

() => void

Example

if (typeof window.closeIACartDrawer === "function") {
  window.closeIACartDrawer();
}

window.addItemsToIACartDrawer(listOfItems: any)

Summary

Adds one or more line items to the cart. When used together with openIACartDrawer(), the drawer will open and show the updated cart contents.

Type

(listOfItems: Array<{ id: number; quantity: number; selling_plan?: number }>) => void

Parameters

Example

if (typeof window.addItemsToIACartDrawer === "function") {
  window.addItemsToIACartDrawer([
    { id: 50633075097873, quantity: 1, selling_plan: 5960958225 }
  ]);
  // Optionally open the drawer after adding:
  if (typeof window.openIACartDrawer === "function") {
    window.openIACartDrawer();
  }
}

Usage Examples

Open the cart from a custom button

<button id="open-cart">Open Cart</button>
<script>
  document.getElementById("open-cart").addEventListener("click", function () {
    if (typeof window.openIACartDrawer === "function") {
      window.openIACartDrawer();
    }
  });
</script>

Add a single variant (with optional subscription)

<button id="add-variant">Add & Open Cart</button>
<script>
  const VARIANT_ID = 50633075097873;      // replace with your variant id
  const SELLING_PLAN_ID = 5960958225;     // optional, remove if not using subscriptions

  document.getElementById("add-variant").addEventListener("click", () => {
    if (typeof window.addItemsToIACartDrawer !== "function") return;

    window.addItemsToIACartDrawer([
      { id: VARIANT_ID, quantity: 1, selling_plan: SELLING_PLAN_ID }
    ]);

    if (typeof window.openIACartDrawer === "function") {
      window.openIACartDrawer();
    }
  });
</script>

Add multiple line items at once

<script>
  function addBundleToCart() {
    if (typeof window.addItemsToIACartDrawer !== "function") return;

    const items = [
      { id: 50633075097873, quantity: 1 },
      { id: 50633075130641, quantity: 2 },
      { id: 50633075163409, quantity: 1, selling_plan: 5960958225 } // optional subscription
    ];

    window.addItemsToIACartDrawer(items);

    if (typeof window.openIACartDrawer === "function") {
      window.openIACartDrawer();
    }
  }

  // Example: call this after a bundle CTA click
  // document.querySelector(".bundle-cta").addEventListener("click", addBundleToCart);
</script>

Troubleshooting & FAQs

The functions are undefined.

• Ensure Oxify Cart is installed and enabled on the published theme.
• Verify the storefront is not blocking third-party scripts (content security policy/ad blockers).
• Use feature detection and optionally delay your call until DOMContentLoaded.

Items didn’t appear in the cart, or the wrong item was added.

• Confirm you’re passing variant IDs (not product IDs).
• Make sure the selling_plan ID is valid for that variant (if used).
• Check quantity is a positive integer.

Another cart app conflicts with opening/closing.

• Prefer calling window.openIACartDrawer() and window.closeIACartDrawer() directly from your custom triggers to override theme/app intercepts.
• Avoid binding duplicate click handlers on the same element.

Type Definitions

type IACartLineItem = {
  id: number;            // Variant ID
  quantity: number;      // > 0
  selling_plan?: number; // Optional subscription selling plan ID
};

Updated on: 15/09/2025