Home > @vsf-enterprise/bloomreach-content-sdk > extractComponents

extractComponents() function

Method resolving Bloomreach Content components into the format expected by CMS-agnostic Vue Storefront components.

Signature:

export declare function extractComponents(content: Content, page: Page, customResolvers?: CustomResolvers): Content;

Parameters

Parameter	Type	Description
content	Content	Data object which gets transformed into the format expected by Vue Storefront components. In the first extractComponents call, it's an instance of a Bloomreach Content component.
page	Page	An instance of a Bloomreach Content page.
customResolvers	CustomResolvers	Custom resolvers which can be used to override the default behavior of the extractComponents function.

Returns:

Content

Returns a CMS-agnostic object which can be used by Vue Storefront components.

Remarks

The method works with two primary data objects used by Bloomreach Content: component (first argument) and page (second argument). It traverses them recursively and uses a set of predicates to detect certian types of objects and a set of resolvers to resolve them into the desired format. Among others, the method resolves the following objec types: image sets, (opens new window) rich text, (opens new window) selectable strings, (opens new window) documents, (opens new window) components, (opens new window) field groups. (opens new window)

Certain of the default resolvers can be customized. You can pass them to the extractComponents function as the third argument. Each custom resolver receives five arguments: the content object, the page object, the extractComponents function (in case you need to call it again, e.g. to resolve nested entries), the customUtils object and the defaultUtils object (in case you still need to use the default resolvers).

See the examples section for more details.

Example 1

Basic usage with raw Bloomreach Content SPA-SDK (opens new window).

import { initialize } from '@bloomreach/spa-sdk';
import { sdk } from '~/sdk.config.ts';

const page = await initializeSdk({ ... });
const component = page.getComponent('banner');

const extractedData = sdk.bloomreachContent.utils.extractComponents(component, page);

Example 2

Customizing the image set resolver. By default, the resolver transforms Bloomreach Content image sets to a CMS-agnostic format expected by Vue Storefront components:

interface AgnosticCmsImage {
  desktop?: string;
  thumbnail?: string;
  mobile?: string;
  alt?: string;
}

Using a custom resolver might come in handy in places where you need a single image URL or different image formats.

const extractedData = sdk.bloomreachContent.utils.extractComponents(
  component,
  page,
    {
      resolveImageSet: (imageSet) => imageSet.getOriginal().getUrl()
    }
  }
);

Example 3

Customizing the document resolver. Re-using the default resolver and extending its behavior to include an additional property in the returned object. Notice how we're passing on extractComponents and customUtils as arguments to the default resolver.

const extractedData = sdk.bloomreachContent.utils.extractComponents(
  component,
  page,
  {
    resolveDocument: (
      content,
      page,
      extractComponents,
      customUtils,
      defaultUtils
    ) => {
      const defaultResolvedDocument = defaultUtils.resolveDocument(content, page, extractComponents, customUtils, defaultUtils);
      return {
        additionalProperty: 'whatever',
        ...defaultResolvedDocument
      }
    }
  }
);

This way we have transformed the default resolved entry interface:

interface Default {
  id?: string;
  component?: string;
  [x: string]: any;
}

into the new one which includes the additionalProperty string:

interface Transformed {
  id?: string;
  component?: string;
  additionalProperty: string;
  [x: string]: any;
}