Vue Storefront is now Alokai! Learn More
Usage

Usage

Alokai integration for Bloomreach Content ships with a framework-agnostic Typescript SDK. It allows you to:

Fetching pages

The getPage() method allows you to fetch a page for a specific path and channel:

import { getSdk } from '@/sdk/sdk.server';

const sdk = getSdk();

const page = await sdk.bloomreachContent.getPage({
  path: '/',
  channel: 'en',
});

Both parameters can be derived from your application's router & i18n state:

import { useRouter } from 'next/router'
import { getSdk } from '@/sdk/sdk.server';

const sdk = getSdk();
const { locale, pathname } = useRouter();

const page = await sdk.bloomreachContent.getPage({
  path: pathname,
  channel: locale,
});

Initializing Live Preview

The initLivePreview() method does the heavy lifting of preparing our app's HTML for the connection with the Experience Manager. All you have to do is:

  • provide the utility with the raw, non-unified page object,
  • add data-brx-id attributes to the HTML elements rendered based on the dynamic content from Bloomreach.

The utility recursively retrieves all the Experience Elements from the received page object. Every Element has its unique identifier, for example:

  • p1 for the page's Root Component,
  • p1_p{n} for the nth container available on the page,
  • p1_p{n}_p{x} for the xth container item added to the nth container,
  • f25007c7-a312-4e7f-ab35-a32f5325fdad for a document

You have to add the data-brx-id to HTML elements to associate them with the corresponding Experience Elements. Then the utility will be able to retrieve the former from the DOM, add required classes to them (e.g. hst-container) and render their meta-comments in proper locations.

page.tsx
import { getSdk } from '@/sdk/sdk.server';
import LivePreview from './live-preview';

export default async function Page() {
  const sdk = getSdk();

  const page = await sdk.bloomreachContent.getPage({
    path: '/',
    channel: 'en',
    endpoint: "endpoint-query-param",
    previewToken: "preview-token-query-param"
  });

  return (
    <>
      <LivePreview page={page.$raw} />
  
      <div data-brx-id={page.componentsAboveFold.containerId}>
        {
          page.componentsAboveFold.children.map((child) => (
            <div
              key={child.containerItemId}
              data-brx-id={child.containerItemId}
            >
              {/* your content goes here */}
            </div>
          ))
        }
      </div>
    </>
  );
}
live-preview.tsx
'use client';
import type { PageModel as BloomreachPageModel } from '@bloomreach/spa-sdk';
import { useEffect } from 'react';
import { useSdk } from '@/sdk/alokai-context';

export interface LivePreviewProps {
  page: BloomreachPageModel;
}

export default function LivePreview({ page }: LivePreviewProps) {
  const sdk = useSdk();
  useEffect(() => {
    const terminate = sdk.bloomreachContent.utils.initLivePreview({ page });
    return terminate;
  }, [])

  return null;
}