Page Builder for developers - Configuration and content customization

Transcript

So Magento Commerce 2.3.1 and above come with Page Builder enabled by default. And what you get with that is a few different things. You get advanced content tools, design layouts for CMS pages, products, and categories. You can drag and drop, use a drag and drop interface to design page layouts and content. You also have the ability to use various content types such as images, videos, banners, sliders, and maps. You can add content from blocks, dynamic blocks, list products based on conditional logic. You can also add product attributes and descriptions using the Page Builder interface. So before starting to work with Page Builder, you’ll want to enable it in the configuration settings. And just like everything else in Magento, you’ll go to the configuration page. And to get to that, you will navigate in your menu to stores, then configuration, and then general, and then content management, and then advanced content tools. And you’ll see the field to enable Page Builder. And you can have three different options for how to edit CMS content. Essentially it’s Page Builder, TinyMCE WYSIWYG editor, or just a simple text area. And if you select no, you will have the WYSIWYG editor, and then optionally you can hide that WYSIWYG editor to just edit content with a text area. You’ll also have to enter a Google Maps API key if you want to use the Google Maps content type. And then a couple of other fields, such as the default column grid size. So when you add a column content type to a row, this is the default grid size that those columns will occupy. So within the Page Builder workspace, you have the Page Builder panel, which you can expand and collapse to see the various content types to drag and drop onto the stage. A little more about the Page Builder panel. It contains four groupings for each content type. You have the layout group, the elements group, the media group, and the content group. You can customize this, you can rename these groups if you want, you can add your own. You can even search within this if you don’t want to, if you’re not sure in which group a particular content type is, you can just search it in that text field up there where it says find items. And your custom one will also be searchable. And this is edited via XML. So you will see examples of this being done, as I talked about in the example modules, for any custom content type that’s being added. It does, in order for it to actually appear, it needs to be added to this Page Builder panel. Layout content types exist to house other content types. They’re containers for other content types. So in the screenshot here you can see tabs contain a product list content type, the column content type contains heading, text, and button content types. And the columns content type contains heading, text, and button content types. And that’s different from the elements content types because those exist, one within the layout content types, but they themselves have a lot more configuration options. Elements includes text, headings, buttons, dividers, and snippets of HTML code that you can drag into a row, a column, or a tab, or on the stage. Basically these are the content types that go inside the layout content types. The next group are media content types. You have image, video, banner, slider, and map. These have their own settings within them, each one being unique. They also have settings that are consistent between them, such as padding, borders, margins, CSS class. These content types tend to be a lot more configuration heavy, such as if you want to add a map content type, you then have to go in and configure what points on the map you want to be displayed. If you are adding a slider content type, you have to add additional slides to it. So these content types tend to be a lot more configuration heavy to some Page Builder content. The last group is the add content group. These content types exist to display dynamic data from Magento. You can nest other Page Builder content within a new Page Builder page, CMS block, or attribute. For example, let’s say you are adding a product attribute, and that attribute only has three different types of values that you want to be displayed on any given product. Well, instead of repeating that content every time, you can add a new CMS block, a new Page Builder CMS block. Now when you want to edit your product attribute, you can just select that block within Page Builder, and it will just re-render that content from the CMS block. You can also list out products on a CMS page or on a CMS block based on certain conditions. If you only want to display products from a particular category, or from products that are greater than a particular price, or products that are new and not products that are old, that’s the content type you would do it in. So each content type, when dragged from the panel to the stage, has a toolbox that will appear on hover over that content type. The toolbox is specific to the content type, but generally allows for deletion, duplication, and setting configuration of the content type. Some content types will have more than that, some will have less than that. That’s generally what you’ll see in the content type toolbox. So for example, if you’re hovering over a row, the row toolbox appears, and when you click on the gear icon, you can access the settings for the row content type. So settings are specific to the content type, they can be configured to only have the settings necessary for that particular content type. But there are some content types that share settings, such as any content type that has a background image will have the same options for that background image. There’s also a base option of settings for any content type, which is the advanced group. You can see here in the slideshow that contains the border option, border color, border width, things like margin and padding, the option to add a custom CSS class. Those are all common for just about every content type you’ll see in the settings panel. As we’ve already talked about, you can add catalog content with page builder. If you want to add it as a product or category attribute, you can modify an attribute setting catalog input type for store owner and set that to page builder. It will be editable as page builder content. For products to do this, you’ll go to stores, attributes, product, select attribute from grid to edit, and then change that property to page builder, and then it will be editable as page builder content. Products and categories description attribute uses page builder by default, so you don’t have to change the setting, but it is available. And this will automatically be the case if you set in the configuration the CMS editor that you wish to use as page builder. It will always be page builder. If you set this to be tiny MCE, then you will see it as a tiny MCE editor. Page builder is a useful tool for creating simple pages or bits of content for product or category descriptions. But oftentimes you might have a client that wants to do a little more, so you will have to customize page builder, either by extending an existing content type or adding a new content type. And here we see a workflow of exactly how to do that. So first going over how to extend an existing content type. This is, as you can see, it has only three steps, so it’s a lot simpler. So step one is to create an extension module. Step two is to extend the appearance with XML, which everyone in Magento should be familiar with. And then step three is to extend the forms in order to edit the appearances that will later be put into the markup. Step two is to add a new content type. It has six steps. Step one is to add the configuration. Step two, you will add the template files, both for the appearance on the front end and for the appearance on the back end, as well as any appearances that you want to add within the configuration of the content type. Step three is to add the component, which is necessary for all content types, but depending on how complex your new content type is, generally it won’t require much customizing unless you have a lot of JavaScript functionality that is going into your content type. So step four is to add a new form for your content type. This is similar to step three in extending an existing content type, but differs in the way that you have to add a bunch of overhead markup to a new form, whereas in an existing form, you would only add the nodes that you need to either extend or add onto or override. But in creating a new one, you will have to add a completely new form. And then in step five, you will add your own custom styles. This is a step that you might find yourself doing when you’re extending a new content type, depending on what type of customizations you’re doing. But generally, if you are adding a new content type, this is a step that you will need to do pretty regularly. And then step six for adding a new content type is to add an SVG icon, and this is what will appear in the page builder workspace. So if a end user wants to drag and drop your custom content type, they can pretty easily see, okay, this is a content type that roughly looks like this icon.