Usage
Alokai integration for Bloomreach Content ships with a framework-agnostic Typescript SDK. It allows you to:
- fetch your pages from the Bloomreach Content Delivery API,
- connect your application to the Experience Manager.
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 then
th container available on the page,p1_p{n}_p{x}
for thex
th container item added to then
th 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.
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>
</>
);
}
'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;
}