extractComponents

Method resolving Bloomreach Content components into the format expected by CMS-agnostic Vue Storefront components. 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, rich text, selectable strings, documents, components, field groups.

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.

Signature

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

Parameters

Returns

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

Referenced Types

• Content
• Page
• CustomResolvers

Examples

Basic usage with raw Bloomreach Content SPA-SDK.

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

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;
}

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
      }
    }
  }
);