Add a New Appearance to the Product Content-Type for the Page Builder on Magento 2 EE

Peeter RANNOU — Thu, 11 Jul 2019 12:09:18 GMT

The recent addition of Page Builder (formely known as BlueFoot when it was available as a separate extension), allows for a more user-friendly way to create CMS Pages. However, when using a Products item to generate a list of products, only one template is available. Let me show you how to create new templates and make them available on the creation form.

Short Explanation (+ Download)

Behind the scene, a Products item from the PageBuilder is just a wrapper for the ProductsList widget. Therefore, the process is fairly simple, we just need to:

Tweak some JavaScript (widget-directive.js) to allow new templates to be used.
Create a valid .phtml file using the methods available for ProductsList widget (Magento\CatalogWidget\Block\Product\ProductsList).
Add a new Appearance with some XML.

Download the module from this article

You can download an archive of the module here. Just drop it at the root of your website and modify what you need based on the tutorial below.

Full explanation

Create a module

First thing we have to do is create a new module. Here's a link to the official documentation if you don't know how to do it.

For the example, we'll name the module Thedotwriter_PageBuilderExtensionProducts (following the naming convention used in the documentation for extending a content type).

List of files

Here's a tree view of all files and folders we're going to create:

app   
└───code
    └───Thedotwriter
        └───PageBuilderExtensionProducts
            │   composer.json
            │   registration.php
            │   
            ├───etc
            │   │   module.xml
            │   │   
            │   └───adminhtml
            │           di.xml
            │           
            └───view
                ├───adminhtml
                │   ├───pagebuilder
                │   │   └───content_type
                │   │           products.xml
                │   │           
                │   └───web
                │       ├───css
                │       │   └───images
                │       │       └───content-type
                │       │           └───products
                │       │               └───appearance
                │       │                       menu-list-complex.svg
                │       │                       menu-list-simple.svg
                │       │                       
                │       └───js
                │           └───content-type
                │               └───products
                │                   └───mass-converter
                │                           widget-directive.js
                │                           
                └───frontend
                    └───templates
                        └───product
                            └───widget
                                └───content
                                        widget-menu-list-complex.phtml
                                        widget-menu-list-simple.phtml

Now, let's explain them one by one.

Add a dependency to Magento_PageBuilder

Let's make sure to load our module components after Magento_PageBuilder. For that, add a to your module.xml file:

etc/module.xml:

Create a new widget convertor

Remember, the Products PageBuilder item is only a wrapper for the already existing ProductsList widget ("Catalog Product List" in the backend). Therefore, the PageBuilder item configuraton needs to be passed to a ProductsList widget at some point. That's the job of the widget-directive.js convertor.

There's one issue with it though, the path to the phtml file is hard coded into the original file. So, we're gonna create another JS convertor that lets us set the phtml file as a setting in the products.xml file. It's quite simple (once you spent enough time looking around!):

Copy:
vendor/magento/module-page-builder/view/adminhtml/web/js/content-type/products/mass-converter/widget-directive.js
Into our module :
view/web/js/content-type/products/mass-converter/widget-directive.js

Then in the toDom() function, change the line 53:

template: "Magento_CatalogWidget::product/widget/content/grid.phtml",

Into this:

template: config.template_path,

Create a new template file

Now, create an empty .phtml file in the following path in our module:
view/frontend/templates/product/widget/content/

This example being based on a recent work of mine, the file is called widget-menu-list-simple.phtml, but call it however you want. Just remember to update the name in the products.xml file I'll make you create later. That's where the template file will be specified.

In the ZIP file provided in this article, you'll find an example of how to work with this template. But if you want more, you can check out the original grid.phtml file in vendor/magento/module-catalog-widget/view/frontend/templates/product/widget/content/.