@kachingappz/bundles-js

A vanilla JavaScript web component for integrating Kaching Bundles into any Shopify storefront.

Works with any framework or no framework at all — just drop in the <kaching-bundle-component> custom element.

Installation

npm install @kachingappz/bundles-js

Usage

<kaching-bundle-component
  shop-domain="your-store.myshopify.com"
  storefront-token="your-storefront-access-token"
  product-id="7549909008451"
></kaching-bundle-component>

<script type="module">
  import "@kachingappz/bundles-js"
</script>

Attributes

| Attribute | Required | Description | |-----------|----------|-------------| | shop-domain | Yes | Your Shopify store domain (e.g. your-store.myshopify.com) | | storefront-token | Yes | Shopify Storefront API access token | | product-id | Yes | Shopify product ID | | deal-block-id | No | Specific deal block ID to display | | selected-variant-id | No | Currently selected variant ID (plain ID or full GID) | | country | No | Country code for localization (e.g. US) | | language | No | Language code for localization (e.g. EN) | | compact | No | Compact mode — hides block title, timer, and checkbox upsells | | demo | No | Render with placeholder data (no credentials needed) |

Events

items-changed

Fired when the bundle selection changes.

document
  .querySelector("kaching-bundle-component")
  .addEventListener("items-changed", (event) => {
    console.log(event.detail.items)
  })

loaded

Fired when the widget has finished loading.

document
  .querySelector("kaching-bundle-component")
  .addEventListener("loaded", () => {
    console.log("Widget ready")
  })

Methods

items()

Returns the current bundle items.

const items = document.querySelector("kaching-bundle-component").items()

Demo Mode

Render the widget with example data — no Shopify credentials required:

<kaching-bundle-component demo></kaching-bundle-component>

Dynamic Product Switching

Change the product-id attribute to load a different product — the widget reinitializes automatically:

document
  .querySelector("kaching-bundle-component")
  .setAttribute("product-id", "8001234567890")