Pagebuildercontenttype

Page Builder comes with several content types (controls) you can use to build your storefront pages. In this tutorial, you will add a new content type: a Quote control, which you can use to show customer testimonials or other types of quotations within your storefront.

https://devdocs.magento.com/page-builder/docs/create-custom-content-type/overview.html

Use the snippet in the Magento 2 module creator.

Files

view/adminhtml/ui_component/pagebuilder_mage2gen_test_form.xml

<?xml version="1.0" ?>
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd" extends="pagebuilder_base_form">
	<argument name="data" xsi:type="array">
		<item name="js_config" xsi:type="array">
			<item name="provider" xsi:type="string">pagebuilder_mage2gen_test_form.pagebuilder_mage2gen_test_form_data_source</item>
		</item>
		<item name="label" xsi:type="string" translate="true">Test</item>
	</argument>
	<settings>
		<namespace>pagebuilder_mage2gen_test_form</namespace>
		<deps>
			<dep>pagebuilder_mage2gen_test_form.pagebuilder_mage2gen_test_form_data_source</dep>
		</deps>
	</settings>
	<dataSource name="pagebuilder_mage2gen_test_form_data_source">
		<argument name="data" xsi:type="array">
			<item name="js_config" xsi:type="array">
				<item name="component" xsi:type="string">Magento_Ui/js/form/provider</item>
			</item>
		</argument>
		<dataProvider name="pagebuilder_mage2gen_test_form_data_source" class="Magento\PageBuilder\Model\ContentType\DataProvider">
			<settings>
				<requestFieldName/>
				<primaryFieldName/>
			</settings>
		</dataProvider>
	</dataSource>
	<fieldset name="appearance_fieldset" sortOrder="10" component="Magento_PageBuilder/js/form/element/dependent-fieldset">
		<settings>
			<label>Appearance</label>
			<additionalClasses>
				<class name="admin__fieldset">true</class>
			</additionalClasses>
			<collapsible>false</collapsible>
			<opened>true</opened>
			<imports>
				<link name="hideFieldset">${$.name}.appearance:options</link>
				<link name="hideLabel">${$.name}.appearance:options</link>
			</imports>
		</settings>
		<field name="appearance" formElement="select" sortOrder="10" component="Magento_PageBuilder/js/form/element/dependent-visual-select">
			<argument name="data" xsi:type="array">
				<item name="config" xsi:type="array">
					<item name="default" xsi:type="string">default</item>
				</item>
			</argument>
			<settings>
				<additionalClasses>
					<class name="admin__fieldset-wide">true</class>
					<class name="admin__field-visual-select-container">true</class>
				</additionalClasses>
				<dataType>text</dataType>
				<validation>
					<rule name="required-entry" xsi:type="boolean">true</rule>
				</validation>
				<elementTmpl>Magento_PageBuilder/form/element/visual-select</elementTmpl>
			</settings>
		</field>
		<formElements>
			<select>
				<settings>
					<options>AppearanceSourceTest</options>
				</settings>
			</select>
		</formElements>
		<fieldset name="general" sortOrder="20">
			<settings>
				<label>General</label>
			</settings>
			<field name="Test" formElement="input" sortOrder="0">
				<argument name="data" xsi:type="array">
					<item name="config" xsi:type="array">
						<item name="source" xsi:type="string">page</item>
					</item>
				</argument>
				<settings>
					<dataScope>Test</dataScope>
					<dataType>text</dataType>
					<label translate="false">Test</label>
				</settings>
			</field>
		</fieldset>
	</fieldset>
</form>

view/adminhtml/web/template/content-type/test/default/master.html

<!--master.html-->
<div attr="data.main.attributes"
     ko-style="data.main.style"
     css="data.main.css"
     data-mage-init='{"accordion":{
        "openedState": "active",
        "collapsible": true,
        "active": false,
        "multipleCollapsible": true
    }}'
>
    <div class="test-content" data-role="collapsible">
        <h3 attr="data.Test.attributes"
            data-role="trigger"
            html="data.Test.html"></h3>
    </div>
</div>

view/adminhtml/web/template/content-type/test/default/preview.html

<!-- preview.html -->
<div attr="data.main.attributes"
     ko-style="data.main.style"
     css="data.main.css"
     event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false"
>
    <render args="getOptions().template" />
    <div class="test-content">
        <div attr="data.Test.attributes"
             data-bind="liveEdit: { field: 'Test', placeholder: $t('Test') }">
        </div>
    </div>
</div>

view/adminhtml/pagebuilder/content_type/mage2gen_test.xml

<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_PageBuilder:etc/content_type.xsd">
	<type name="mage2gen_test" label="test" menu_section="elements" components="Magento_PageBuilder/js/content-type" preview_component="Magento_PageBuilder/js/content-type/preview" master_component="Magento_PageBuilder/js/content-type/master" form="pagebuilder_mage2gen_test_form" icon="icon-pagebuilder-image" sortOrder="22" translate="label">
		<children default_policy="deny"/>
		<appearances>
			<appearance name="default" default="default" preview_template="Mage2Gen_Module/content-type/test/default/preview" master_template="Mage2Gen_Module/content-type/test/default/master" reader="Magento_PageBuilder/js/master-format/read/configurable">
				pagebuilder_mage2gen_test_form.pagebuilder_mage2gen_test_form_data_source
				<elements>
					<element name="main">
						<style name="text_align" source="text_align"/>
						<attribute name="name" source="data-content-type"/>
						<attribute name="appearance" source="data-appearance"/>
						<css name="css_classes"/>
					</element>
				</elements>
				<element name="test">
					<html name="test" converter="Magento_PageBuilder/js/converter/html/tag-escaper"/>
				</element>
			</appearance>
		</appearances>
	</type>
</config>

view/adminhtml/layout/pagebuilder_mage2gen_test_form.xml

<?xml version="1.0" ?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
	<update handle="styles"/>
	<body>
		<referenceContainer name="content">
			<uiComponent name="pagebuilder_mage2gen_test_form"/>
		</referenceContainer>
	</body>
</page>

etc/adminhtml/di.xml

<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
	<virtualType name="AppearanceSourceTest" type="Magento\PageBuilder\Model\Source\VisualSelect"/>
	<arguments>
		<argument name="optionsSize" xsi:type="string">large</argument>
		<argument name="optionsData" xsi:type="array">
			<item name="0" xsi:type="array">
				<item name="value" xsi:type="string">default</item>
				<item name="title" xsi:type="string" translate="true">Default</item>
			</item>
		</argument>
	</arguments>
</config>
Sitemap
Snippets information
About Mage2Gen

Mage2Gen is an easy to use open source module generator for Magento 2. With the extensive interface the user can easily generate base code for a Magento 2 module.

The following parts can be generated by Mage2Gen: controllers, models, blocks, template files, plugins (the new rewrites), observer, console scripts and product attributes. Even more will be added in future updates.

Once logged in, you can save all of the generated modules. This enables you to go back to a module and generate a part that you possibly forgot when you initially created the module.

When the module is complete, you can download it as a zipfile or immediately install it with the provided wget shell command!

Supporting Mage2Gen

You can help Mage2Gen by reporting bugs, suggesting features, sharing it with others or by creating a pull request with fixes or features.

If you want to create you own snippet, check out this blog how to create a Mage2Gen snippet.

I generate your code so
Generate me a coffeeGenerate me a coffee