Guidance for developing the Custom Pagebuilder Module with combination of Multiple pagebuilder Content interface in Magento Enterprise Edition …
Anusha J

Overview of Concept

• Custom PageBuilder Module Structure
• Custom Module Creation for PageBuilder
• Custom Menu Creation in Menu Section
• Creation of di.xml files
• Creation of Pagebuilder Xml File
• Define Ui component File Path in Layout File
• Ui Component Xml File Creation
• Template Files Creation
• Js Files Creation
• Css Files Creation
• Widget Js File Creation
• Suggestions

1. Custom PageBuilder Module Structure:

1. Add configuration: Create an XML file to define your content type and reference the other files that control the appearance and behavior of your content type.
   
   • Pagebuilder.xml


2. Add templates: Create HTML templates that define the appearance of your content types on the Admin stage (preview.html) and the storefront (master.html).
   
   • Preview.html (responsible for the admin preview)
   • Master.html (responsible for frontend preview)


3. Add component: Create a JavaScript file that defines the behaviour of your content type on the Admin stage (preview.js) and the storefront (master.js).
   
   • Preview.js (responsible for initialize or define js funtions using js libraries whatever is required in module)
   • Master.js (optional)


4. Add form: Create a UI component form and a layout so Admin users can edit your content type within the Page Builder editor.
   
   • Pagebuilder_footer_form.xml


5. Add styles: Create LESS files to style your content types when rendered in the Admin UI and on the storefront. This is optional we can manage with our theme less/css file also.
   


6. Add an icon: Create an SVG icon to visually identify your content type within the Page Builder panel.
   

2. Custom Module Creation for PageBuilder:

we developed the PagebuilderFooter Module based on this requirement.

We need to create the below mentioned files.

app/code/Symphisys/PageBuilderFooter/registration.php.

app/code/Symphisys/PageBuilderFooter/etc/module.xml.

3. Custom Menu Creation in Menu Section:

We need to create menu in the below mentioned file.

app/code/Symphisys/PageBuilderFooter/view/adminhtml/pagebuilder/menu_section.xml Please find the code example below:

    
  <menu_section name="symphisys_common" translate="label" sortOrder="40" label="Symphisys Common"/>

Please find the screenshot custom menu’s creation output below.

4. Creation of di.xml files:

We need to create the di files in the below mentioned paths.

app/code/Symphisys/PageBuilderFooter/etc/di.xml code

we need to define our custom widget js path in this file

• app/code/Symphisys/PageBuilderFooter/etc/adminhtml/di.xml Code

we define here all required dependencies of our module.

Note:In the above code virtual type name “AppearanceSourceFooter” should match with appearance fieldset appearance field formElements options class. Let’s see the uicomponent xml file code below.

5. Creation of Pagebuilder Xml File:

This plays a vital role in our pagebuilder module. In this file, we need to mention config name, menu section code, appearances, whatever the elements you required, related converters etc….

We need to create xml file in the below mentioned path.

app/code/Symphisys/PageBuilderFooter/view/adminhtml/pagebuilder/content_type/footer.xml

In this file, we also need to define template paths of preview.html and master.html like this.

Note:
Please don’t take same config name. for suppose we already have “banner” config name again you are mentioned “banner” config name then it’s getting error while deploying time.

Let’s see the example below:

      <type name="footer"
      label="Symphisys Footer"
      component="Magento_PageBuilder/js/content-type-collection"
      preview_component="Symphisys_PageBuilderFooter/js/content-type/footer/preview"
      master_component="Magento_PageBuilder/js/content-type/master-collection"
      form="pagebuilder_footer_form"
      menu_section="symphisys_home"
      icon="icon-pagebuilder-row"
      sortOrder="10"
      translate="label">

In the above code config name means type name. so, footer is the config name according to this code

6. Define Ui component File Path in Layout File:

We need to create one xml file in the below mentioned file.

app/code/Symphisys/PagebuilderFooter/view/adminhtml/layout/pagebuilder_footer_form.xml

we have mentioned the path of our ui component xml in this file like this example.

    <referenceContainer name="content">
        <uiComponent name="pagebuilder_footer_form"/>
    </referenceContainer>

7. Ui Component Xml File Creation:

Ui component file refers to the Fieldset and Ui elements whatever you have required.

We need to create xml file in the below mentioned path. Let’s see the example below.

app/code/Symphisys/PageBuilderFooter/view/adminhtml/ui_component/pagebuilder_footer_form.xml

we develop admin interface of pagebuilder module which contain all relevant fields.

8. Template Files Creation:

We need to create preview.html and master.html here. Preview.html is used to show admin preview. Master.html is used to frontend view purpose.

We need to create these files in the below mentioned path. Let’s see the example below.

app/code/Symphisys/PageBuilderFooter/view/adminhtml/web/template/content-type/footer/default/preview.html

app/code/Symphisys/PageBuilderFooter/view/adminhtml/web/template/content-type/footer/default/master.html

Note:
Definitely we need to follow core structure of each element. For Suppose, we need to take block field, then we need to use this structure only.

master.html code:

          
<div html="data.main.html" attr="data.main.attributes" css="data.main.css" ko-style="data.main.style"></div>

In the above code, main is the element name whatever you have mentioned in pagebuilder xml element name.

This is the pagebuilder xml file code:

For block purpose, we need to use the below mentioned code in main element

            
<html name="html" preview_converter="Magento_PageBuilder/js/converter/attribute/preview/store-id"/>            

9. Js Files Creation:

Whatever you have mentioned in your pagebuilder xml file of preview component, we need to create our custom Js File in the same path.
Let’s see the pagebuilder xml code

  
     <type name="footer"
     label="Symphisys Footer"
     component="Magento_PageBuilder/js/content-type-collection"
     preview_component="Symphisys_PageBuilderFooter/js/content-type/footer/preview"
     master_component="Magento_PageBuilder/js/content-type/master-collection"
     form="pagebuilder_footer_form"
     menu_section="symphisys_home"
     icon="icon-pagebuilder-row"
     sortOrder="10"
     translate="label">

In the above code, preview_component refers to the our custom js file path.
app/code/Symphisys/PagebuilderFooter/view/adminhtml/web/js/content-type/footer/preview.js

10. Css Files Creation:

We need to create our custom less file for css purpose in the below mentioned path.
app/code/Symphisys/PagebuilderFooter/view/adminhtml/web/css/source/_module.lessapp/code/Symphisys/PagebuilderFooter/view/adminhtml/web/css/source/content-type/footer/_import.lessapp/code/Symphisys/PagebuilderFooter/view/adminhtml/web/css/source/content-type/footer/_default.less

11. Widget Js File Creation:

We need to create this widget.js file in the below mentioned path.
app/code/Symphisys/PagebuilderFooter/view/base/web/js/content-type/footer/appearance/default/widget.js
In this js file we need to add the below code.

     
          define([
    'jquery',
], function ($) {
    'use strict';
    return function (config, element) {
        var element = $(element);
        console.log("ELEMENT: " + element.data('element'));
    };
});

12. Suggestions:

• If you want to add any element in our custom pagebuilder module, then first you need to refer the core pagebuilder module files regarding that element. It will helps lot of us
  
  For Example, you need to implement block element in your custom module mainly you need to refer these files.
  
  Vendor/magento/module-page-builder/etc/di.xml
  
  Vendor/magento/module-page-builder/etc/adminhtml/di.xml
  
  Vendor/magento/module-page-builder/view/adminhtml/pagebuilder/content_type/block.xml
  
  Vendor/magento/module-page-builder/view/adminhtml/layout/pagebuilder_block_form.xml
  
  Vendor/magento/module-page-builder/view/adminhtml/ui_component/pagebuilder_block_form.xml
  
  Vendor/magento/module-page-builder/view/adminhtml/web/js/content-type/block/preview.js
  
  Vendor/magento/module-page-builder/view/adminhtml/web/template/content-type/block/default/master.html