# Headless Storefronts

Intelligems supports headless storefronts via the `@intelligems/headless` package. Use this package for Hydrogen/Remix and other headless React storefronts.

## Install the Package

```bash
npm install --save @intelligems/headless
```

```bash
yarn add @intelligems/headless
```

```bash
pnpm add @intelligems/headless
```

## Required Environment Variables

```
INTELLIGEMS_ORG_ID=<Intelligems-Organization-Id>
SHOPIFY_STOREFRONT_ACCESS_TOKEN=<Storefront-API-Token>
```

## Shopify Hydrogen / Remix Requirements

### Vite Plugin (Required)

Hydrogen apps must include the `intelligemsVitePlugin` to ensure the Preview Mode widget renders correctly.

```typescript
import { defineConfig } from "vite";
import { hydrogen } from "@shopify/hydrogen/vite";
import { oxygen } from "@shopify/mini-oxygen/vite";
import { vitePlugin as remix } from "@remix-run/dev";
import tsconfigPaths from "vite-tsconfig-paths";
import { intelligemsVitePlugin } from "@intelligems/headless/hydrogen";

export default defineConfig({
  plugins: [
    hydrogen(),
    oxygen(),
    remix({
      presets: [hydrogen.preset()],
      future: {
        v3_fetcherPersist: true,
        v3_relativeSplatPath: true,
        v3_throwAbortReason: true,
        v3_lazyRouteDiscovery: true,
      },
    }),
    tsconfigPaths(),
    intelligemsVitePlugin(),
  ],
  ssr: {
    optimizeDeps: {
      include: ["@intelligems/headless/hydrogen"],
    },
  },
});
```

### Load Config in `loader()`

```tsx
import { getIntelligemsConfig } from "@intelligems/headless/hydrogen";

export async function loader({ request, context }: LoaderFunctionArgs) {
  const intelligems = await getIntelligemsConfig(
    env.INTELLIGEMS_ORG_ID,
    cacheIntervalMinutes
  );

  return {
    intelligems,
  };
}
```

### Add `IntelligemsHydrogenProvider`

`activeCurrencyCode` is required.

```tsx
import { IntelligemsHydrogenProvider } from "@intelligems/headless/hydrogen";

export default function App({ children }) {
  return (
    <IntelligemsHydrogenProvider
      config={intelligems}
      organizationId={process.env.INTELLIGEMS_ORG_ID}
      storefrontApiToken={process.env.SHOPIFY_STOREFRONT_ACCESS_TOKEN}
      activeCurrencyCode="USD"
      antiFlicker={true}
    >
      {children}
    </IntelligemsHydrogenProvider>
  );
}
```

### Track Page Views

Use `useIgTrack` client-side and pass cart/checkout token, currency, and country.

```tsx
import { useIgTrack } from "@intelligems/headless/hydrogen";

useIgTrack({
  cartOrCheckoutToken,
  currency,
  country,
});
```