Kaching Bundles for Hydrogen

A React component for integrating Kaching Bundles into your Hydrogen store.

Installation

npm install @kachingappz/bundles-hydrogen
# or
yarn add @kachingappz/bundles-hydrogen
# or
pnpm add @kachingappz/bundles-hydrogen

Usage with Hydrogen

1. Import the required styles and components:

import "@kachingappz/bundles-hydrogen/dist/bundles-hydrogen.css";
import {
  KachingBundlesWidget,
  fetchKachingBundlesData,
} from "@kachingappz/bundles-hydrogen";

2. Set up the data loader:

function loadDeferredData({ context, params }, productId) {
  const kachingBundlesData = fetchKachingBundlesData(context.storefront, {
    productId,
  });

  return {
    kachingBundlesData,
  };
}

Supported Storefront API Clients

The component supports the following Storefront API clients:

• @shopify/hydrogen
• @shopify/react-hydrogen
• @shopify/storefront-api-client

3. Use the component in your product page:

const { kachingBundlesData } = useLoaderData();

return (
  <ClientOnly>
    <Await resolve={kachingBundlesData}>
      {(data) => (
        <KachingBundlesWidget
          data={data}
          selectedVariantId={selectedVariant.id}
          onLinesChange={(lines) => setLines(lines)}
        />
      )}
    </Await>
  </ClientOnly>
);

Usage without Hydrogen

If you're not using Hydrogen, you can pass shopify domain and storefront access stoken directly:

import "@kachingappz/bundles-hydrogen/dist/bundles-hydrogen.css";
import {
  KachingBundlesWidget,
  fetchKachingBundlesData,
} from "@kachingappz/bundles-hydrogen";

const [kachingBundlesData, setKachingBundlesData] = useState(null);

useEffect(() => {
  const loadData = async () => {
    const data = await fetchKachingBundlesData(
      {
        shopifyDomain: "your-store.myshopify.com",
        storefrontAccessToken: "your-storefront-access-token",
      },
      {
        productId: "gid://shopify/Product/123456789",
        country: "US", // optional
        language: "EN", // optional
      }
    );

    setKachingBundlesData(data);
  };

  loadData();
}, []);

{
  kachingBundlesData && (
    <KachingBundlesWidget
      data={kachingBundlesData}
      selectedVariantId={selectedVariant.id}
      onItemsChange={(items) => {
        // items structure:
        // [
        //   {
        //     id: 123456789, // variant id
        //     quantity: 2,
        //     properties: { "__kaching_bundles": "{ id: 'abc' }" },
        //     selling_plan: 987654321 // optional
        //   }
        // ]
        setItems(items);
      }}
    />
  );
}

Preview Mode

If bundle data is not available (e.g., during development or testing), you can use preview mode instead:

<KachingBundlesWidget
  preview={{
    price: 19.99,
    color: "#00CC6A",
    cornerRadius: 10,
  }}
/>

Support

For support, please contact the Kaching Bundles team through our help center.