Skip to main content
Version: next

Content Composition

Since version 3.11

The Content Composition API allows you to create and compose custom building blocks for your content.

References​

API​

register lifecycle hook​

A method that allows you to register a new composition or extend an existing one.

Parameters​

  • name: string - The name of the composition
  • collection:CompositionCollection - An array of composition entries.

Example​

./example-extension/acme-extension/index.ts
export default defineExtension({
  unstable_lifecycleHooks: {
    onContentCompositionInit: (composition) => {
      composition.register("Wysiwyg", [
        {
          // Since this exists, it will override the existing composition
          name: "DefaultWysiwyg",
          client: {
            component: new URL(
              "./components/DefaultWysiwyg.tsx",
              import.meta.url
            ),
          },
          fragment: /* GraphQL */ `
            fragment DefaultWysiwygFragment on DefaultWysiwyg {
              childNodes
            }
          `,
        },
        {
          // This will be added to the composition for `Wysiwyg`
          name: "CustomWysiwyg",
          client: {
            component: new URL(
              "./components/MagentoWysiwyg.tsx",
              import.meta.url
            ),
          },
          fragment: /* GraphQL */ `
            fragment CustomWysiwygFragment on CustomWysiwyg {
              childNodes
            }
          `,
        },
      ]);
    },
  },
});

createContentComposition helper​

This method is a helper to create a Content Composition collection, which can then be used in the onContentCompositionInit lifecycle hook to register your composition.

Parameters​

See register for more information.

Example​

./example-extension/acme-extension/index.ts
import { createContentComposition } from "@front-commerce/core";

const WysiwygComposition = createContentComposition("Wysiwyg", [
  {
    // Since this exists, it will override the existing composition
    name: "DefaultWysiwyg",
    client: {
      component: new URL("./components/DefaultWysiwyg.tsx", import.meta.url),
    },
    fragment: /* GraphQL */ `
      fragment DefaultWysiwygFragment on DefaultWysiwyg {
        childNodes
      }
    `,
  },
  {
    // This will be added to the composition for `Wysiwyg`
    name: "CustomWysiwyg",
    client: {
      component: new URL("./components/MagentoWysiwyg.tsx", import.meta.url),
    },
    fragment: /* GraphQL */ `
      fragment CustomWysiwygFragment on CustomWysiwyg {
        childNodes
      }
    `,
  },
]);

export default defineExtension({
  unstable_lifecycleHooks: {
    onContentCompositionInit: (composition) => {
      composition.registerComposition(WysiwygComposition);
    },
  },
});