CMS Pages With Page Builder And Hyva

Page Builder comes with a set of tools that helps you build your storefront pages. The big advantage for you as a developer is the possibility to create new content types. It lets you to customize Page Builder to suit your needs. In our case we would like to create a new control with the help of the Adobe documentation and use Tailwind CSS to style our control. It retains all the benefits of using Hyvä Themes.

About Page Builder

Page Builder is the default content management system that comes with Magento Adobe Commerce. It has an easy-to-use interface that requires no technical knowledge about coding. The drag-and-drop page design allows to rapidly create pages, update them and maintain responsive design. The live preview allows seeing how the content will look on the storefront. As a result, store owners and managers are able to build pages independently, save time and keep updated content.

Everything we need to use Page Builder on our project is Magento updated up to version 2.4.3. Using this tool does not force you to rebuild all existing pages because the content created in WYSIWYG will be transferred to Page Builder as HTML Code. It is built-in content type. We are still able to edit our previous content.

Page Builder “HTML Code” page builder html code.png

Editing content editing content.png

Hyva Themes

Hyvä Themes is a new way to build out storefronts for Magento 2. Hyvä uses two modern dependencies: Tailwind CSS and Alpine.js. In effect, the Magento frontend is very light and our site loads faster. This is important because performance affects the SEO ranking.

I recommend updating your Hyvä version to 1.1.9 otherwise you will need to install an additional Page Builder module for compatibility with Hyvä. So now we can use Page Builder with Hyvä and keep all the benefits. If you would like to find out more information about Page Builder and Hyvä Themes, just watch “Hyvä Meetup”. John Hughes explains how the module for Hyvä works, mentioning rebuilt styles, keeping performance benefits, and overriding content types.

Let’s have a look at how we can create our own content type. For this, we are going to use an example from the Page Builder documentation. Please follow the instructions and compare with my code. I hope my advice helps you build Quote controls quicker.

1. Introduction

We start with short information about our example. The first step to building a content type is to create a new module, located in the directory app/code. If you use Visual Studio Code I recommend you use the MagentoWizard extension for that.

This extension automates some repeating tasks. In this section, we will find out more about the next creation steps. Pay attention to the file structure. There are many catalogs and it is very easy to make a mistake. You do not need all of them. We are going to pick only what is needed to create the first control in order not to make it complicated.

2. Configuration

Configuration files include a bunch of things. You are going to know them deeper but for now, compare my configuration with that from the documentation.

Our configuration is very similar. I changed

preview_component

Magento_PageBuilder/js/content-type/preview

in line 7 to keep this example simple. You can find out more information about components in the section

Add components

and consider using them.

Please pay attention to lines 20 and 21, and make sure your paths are correct, it is very easy to make a mistake in a nested catalog.

3. Add templates

As the documentation says, appearance defines how the content type appears on the Admin stage

preview.html

and the storefront

master.html

. In our case, we have got the default appearance but we are not limited to using only one. We can create more, it depends on what effect we want to get. It makes content types more flexible. Notice the appearance name is the default one, which means our templates are located in the default catalog. I skipped other appearances, as a result, we have got fewer files and catalogs.

Let’s compare preview templates.

I changed the closing tags from

<render args="getOptions().template" />

<render args="getOptions().template"></render>

in line 7. I will explain this in Common Issues below. If you jump to the

Add styles

section for a moment you can see the data flow between the template, configuration, and form field.

4. Add components

We use default preview and master components in the file

example_quote.xml

in lines 7 and 8. In our case, we will skip this step, but I am convinced you will come back here later because this section shows how we can customize the options menu for each content type. How does it work? We just define our own preview component in

example_quote.xml

to extend the default component.

5. Add a form

This section provides a lot of information but it is very important. When we add a form we allow the user to customize the entire control and our content. Follow the instructions in the documentation. This part is clear. You need to create new files and update

example_quote.xml

Data flow

Before we start styling, I would like you to pay attention to the data flow. The diagram in the

Add styles

section is an example of how CSS binding works. In

Add templates

we can read some information about the node’s attributes in templates. How do they correspond with elements from the configuration and form fields. It is easy to make a mistake. I suggest you focus on this case. It lets you avoid issues with data binding or loading templates. I encourage you to create a new element on your own. I hope the diagram below helps you imagine how it works.

6. Add styles

I mentioned we want to use Tailwind CSS instead of Less CSS on the frontend. We keep admin styles using fewer CSS files based on the documentation but in my file, I renamed the CSS classes and changed the colors a little bit. Their names correspond with Tailwind CSS classes. In the preview Page Builder uses styles from

adminhtml/web/css/source/content-type/example-quote/_import.less

. On the frontend we use Tailwind CSS so our additional classes affects the design. You can see my changes below:

Now we have to change the values for the options in

pagebuilder_example_quote_form.xml

, as shown in the snippet below:

Now we have to create styles for the frontend. Tailwind CSS will recognize the color classes and add styles. We have to deal with the rest. I recommend creating a new CSS component named

page-builder-quote.css

{PATH_TO_YOUR_THEME}/web/tailwind/components/

. We can omit Less CSS files in the catalogs

frontend/web/css/source/content-type/example-quote/

and

frontend/web/css/source/content-type/

. You can remove them and any unneeded catalog. In

PATH_TO_YOUR_THEME}/web/tailwind/tailwind-source.css

add

page-builder-quote.css

using

@import url(components/page-builder-quote.css);

To write styles for the frontend we use nesting CSS syntax like in Less files and Tailwind’s

@apply

directive. We don’t focus on styling in our case but I prepared some styles to show you what it may look like.

In summary, we use less CSS for styling our preview in the admin panel but for the frontend we use a stylesheet to add Tailwind CSS classes. We used the

css

attribute to add a class to a quote. You may notice we have access to the HTML structure in

master.html

. It means we can directly add Tailwind CSS classes to nodes. It is another way to apply styles. As a result, we write fewer styles in

page-builder-quote.css.

Example of a master template.

However, this solution has one drawback. If we save some content on our page and we want to edit it again we get a reconverted master template from the database in the preview. It means all classes will be added to nodes. It does not affect the preview because their classes are not recognized on the admin panel.

Effect

Preview

Example of the frontend

We have got almost the same view on the admin panel and the frontend. Our content type is done. We just need to create an icon and add it to the configuration file. Try to edit our control, for example by adding a custom toolbar for the quoted text. I recommend creating a few simple content types and then trying to extend them. The Adobe documentation includes topics that will help you expand your knowledge. You can check Page Builder examples to learn more from source codes.

I give you access to our own repository with this example to compare.

Custom content types are a very powerful feature of Page Builder. We are not limited to using built-in tools. You can build content types customized to your project. That will definitely improve your work.

Common issues

In my case, I use PHP 7.4 and Magento 2.4.4. When I tried to add a content type by dragging on the stage, it did not appear. I was still able to see the HTML structure when I inspected the page. To solve the issue I eliminated self-closing tags. You can read more in this thread on Github.

Would you like to innovate your ecommerce project with Hatimeria?

Author

Tomasz

Developer

A photography fanatic and software magician. He can capture stunning shots with his camera and breathtaking code with his keyboard. His coworkers say he has a tendency to see the world through a lens and approach coding problems with an artist's eye.