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

npm install --save @intelligems/headless

yarn add @intelligems/headless

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.

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()

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.

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.

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

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