Shopify Hydrogen

Hydrogen pairs naturally with Kitenzo: fetch bundle data in a loader, build the UI with hooks, and add to the cart with Hydrogen’s useCart.

Install the SDK.
Terminal window
```
npm install @kitenzo/react
```

Add the provider in your root layout (client side), or skip it and use KitenzoClient directly in loaders.

import { KitenzoProvider } from '@kitenzo/react';

export default function App() {
  return (
    <KitenzoProvider apiKey={/* see step 3 */}>
      <Outlet />
    </KitenzoProvider>
  );
}

Fetch the bundle in a loader (keeps the key server-side):

import { KitenzoClient } from '@kitenzo/react';

export async function loader({ params, context }: LoaderFunctionArgs) {
  const client = new KitenzoClient({ apiKey: context.env.KITENZO_API_KEY });
  return { bundle: await client.getBundle(Number(params.id)) };
}

Build the UI and add to cart with useCart:

import { useLoaderData } from '@remix-run/react';
import { useCart } from '@shopify/hydrogen-react';
import {
  useBundle, useBundleBuilder, useBundlePrice, useBundleCart, addBundleToCart,
} from '@kitenzo/react';

export default function BundleRoute() {
  const { bundle: initialData } = useLoaderData<typeof loader>();
  const { bundle } = useBundle(initialData.id, { initialData });
  const builder = useBundleBuilder(bundle);
  const price = useBundlePrice(bundle, builder.selections);
  const { addBundleToCart: configure } = useBundleCart();
  const cart = useCart();

  async function onAdd() {
    const result = await configure(bundle, builder.selections);
    await addBundleToCart(result, {
      addLines: (lines) => cart.linesAdd(lines),
      getAttributes: () => cart.attributes ?? [],
      setAttributes: (attrs) => cart.cartAttributesUpdate(attrs),
    });
  }

  // render bundle.sections + builder, show price.formattedDiscountedPrice,
  // disable the add button until builder.isComplete, then call onAdd()
}