Adding Pack A/B Testing to your existing Shopify Hydrogen project

Install the Pack A/B Testing Beta dependencies

  1. @pack/client@1.0.1-ab-test.0

npm

npm install @pack/client@1.0.1-ab-test.0
  1. @pack/hydrogen@1.0.1-ab-test.0

npm

npm install @pack/hydrogen@1.0.1-ab-test.0

1. Add PACK_STOREFRONT_ID to .env

PACK_STOREFRONT_ID is now a new required environment variable.

For those using typescript, make sure to update your remix.env.d.ts to include PACK_STOREFRONT_ID as part of your Env interface.

interface Env {
  ...
  PACK_STOREFRONT_ID: string;
  ...
}

2. Update server.ts imports from @pack/hydrogen

// server.ts
import { createPackClient, PackSession, handleRequest } from '@pack/hydrogen'
  1. Import PackSession which replaces PreviewSession
  2. Import new handleRequest function

3. Update session storage

// server.ts
// packSession was previously previewSession
const [cache, session, packSession] = await Promise.all([
  caches.open('hydrogen'),
  AppSession.init(request, [env.SESSION_SECRET]),
  PackSession.init(request, [env.SESSION_SECRET]),
])
  1. Update previewSession to packSession
  2. Update PreviewSession.init() to PackSession.init()

4. Update createPackClient options

// server.ts
const pack = createPackClient({
  cache,
  waitUntil,
  storeId: env.PACK_STOREFRONT_ID,
  token: env.PACK_SECRET_TOKEN,
  session: packSession,
  contentEnvironment: env.PACK_CONTENT_ENVIRONMENT,
})
  1. Add in storeId, from newly required environment variable
  2. Pass in packSession as the session
  3. No longer need preview in the create Pack client options

5. Use new Pack handleRequest function

// server.ts
/**
 * Create a Remix request handler and pass
 * Hydrogen's Storefront client to the loader context.
 */
const response = await handleRequest(
  pack,
  request,
  createRequestHandler({
    build: remixBuild,
    mode: process.env.NODE_ENV,
    getLoadContext: () => ({
      cache,
      waitUntil,
      session,
      storefront,
      cart,
      env,
      pack,
    }),
  }),
)
  1. Pass in the pack client, request, and Shopify's createRequestHandler as arguments
  2. Don't forget to add the pack client to the getLoadContext

6. Update root loader function

// root.tsx
export async function loader({context, request}: LoaderFunctionArgs) {
  const {storefront, session, pack} = context;
  ...
  return defer(
    {
      analytics,
      customer,
      customerAccessToken,
      ENV: {...ENV, SITE_LOGO, SITE_TITLE} as Record<string, string>,
      groupingsPromise,
      selectedLocale: storefront.i18n,
      seo,
      siteSettings,
      siteTitle: SITE_TITLE,
      url: request.url,
      ...pack.getPackSessionData(),
    },
    {headers},
  );
}
  1. You can update your loader's return by using getPackSessionData() function off of the pack client from the context
  2. Remove customizerMeta and isPreviewModeEnabled as they are now provided by getPackSessionData

Resources

Pack A/B Testing

Get a tour of Pack's A/B Testing

A/B Testing API

Get a tour of Pack's customizer what it can do

Was this page helpful?