Page Builder

Adobe Commerce and Magento 2.4.3+ allow merchants to author pages using Page Builder. Front-Commerce supports Page Builder managed content out-of-the-box.

In this section, you will learn how to use this feature and extend it. Create new content types and refine UI components so that merchants can create the rich shopping experiences that was designed for their customers.

Since version 2.11.0 (early preview)
Early preview: we’re currently looking for feedbacks about this feature. The core API is stable and ready for use in your storefronts. We’re improving default content types support. Please contact us if you’re using this feature.
Work In Progress: this documentation page will get more details in the next few days

Prerequisites

Page Builder is only available for content that:

Please check these prerequisites first if your content does not appear properly.

Concepts

Page Builder content types have 2 integration points:

  • server side data conversion will parse Magento HTML response to extract rich structured data exposed in GraphQL
  • client side React components will display the content using existing components, from data fetched from GraphQL
Work In Progress: if you need details right now, please contact us. We will make sure to answer you in a timely manner.

Supported content types

Currently supported

We currently support these content types in a basic way:

  • ButtonItem (button-item)
  • Buttons (buttons)
  • Column (column)
  • ColumnGroup (column-group)
  • Divider (divider)
  • Heading (heading)
  • Row (row)
  • Text (text)

We’ll support more options in the next few weeks.

Upcoming

Our 2.12 focus will be to:

  • expose all possible data in GraphQL for supported content types
  • honor the most common used content type options and content types

It should allow merchants to build advanced page layouts using native Magento features.

Let us know if you have specific needs.

Styles

Front-Commerce supports custom styles from the Advanced Magento settings of all content types:

Advanced styles Magento settings

Extend the Page Builder

You can extend existing Page Builder content types, or register new ones specific to your projects. To do so, there are 2 extension points: UI and GraphQL data resolution.

Customize UI components

Work In Progress: if you need details right now, please contact us. We will make sure to answer you in a timely manner.
  • override theme/modules/WysiwygV2/MagentoWysiwyg/PageBuilder/_appComponents.scss to register your custom styles
  • override theme/modules/WysiwygV2/MagentoWysiwyg/PageBuilder/appComponentsMap.js to register new components (or override existing ones)

Expose content types data in GraphQL

Work In Progress: if you need details right now, please contact us. We will make sure to answer you in a timely manner.

The PageBuilder loader allows you to register new content types.

First, you must define your content type. Content types must extend the ContentType class (see below). The name should match Magento’s content type identifier and the extractData method can be used to return structured data to be exposed as GraphQL fields for this type.

import ContentType from "server/modules/magento2/wysiwyg/loaders/content-types/ContentType";

export default class Foo extends ContentType {
  name = "foo";
  extractData(node) {
    return {
      // custom data. Can also be extracted from the passed `node` information
      bar: "baz"
    };
  }
}

Then you must register it from a contextEnhancer, using the PageBuilder.registerContentType method:

PageBuilder.registerContentType(
  new Foo(), // <-- the content type defined above
  "MyPageBuilderFooData" // <-- the GraphQL type for related data default to MagentoPageBuilderDefaultData (if no additional data)
);

If your content type exposes additional data with a specific GraphQL type (MyPageBuilderFooData in this current example), you will then have to update your resolvers. To do so, Front-Commerce provides a generic PageBuilderContentTypeResolver class that will expose data returned by the content type’s extractData.

# schema.gql
# Your custom page builder node data must implement
# both MagentoPageBuilderNodeData and WysiwygNodeData GraphQL interfaces
type MyPageBuilderFooData implements MagentoPageBuilderNodeData & WysiwygNodeData {
  dataId: ID
  appearance: String
  bar: String # <- custom structured data
}
// resolvers.js
import PageBuilderContentTypeResolver from "server/modules/magento2/wysiwyg/graphql/PageBuilderContentTypeResolver";

export default {
  MyPageBuilderFooData: new PageBuilderContentTypeResolver(),
};
Edit on GitHub