Page Builder for developers - Introduction

Transcript

Hey everyone, welcome to the Magento U course for Page Builder for Developers. My name is Nathan Toombs. I am a front-end engineer at Classy-Lama in Springfield, Missouri. I’ve worked with Page Builder for several months now since it was released. There’s a case study we’re going to be going over with some work that I’ve done. So let’s just go ahead and dive right into it.

So we’re going to cover five different sections. Introduction and Case Studies, Key Features and Overview of Theming, the Admin and Theming Tasks, Storefront Theming Tasks, and Customizing, Grading New Content Types. Let’s get started with the introduction. This is a screenshot showing you different content types, what it looks like in the back-end compared to the front-end. Here you see you have columns, content types, row content type, tab content types, tab items as well within that tab content types, and then product list content type. You can see what it looks like on the back-end and on the front-end and how the content is displayed similarly, both in the back-end and front-end, to make it truly what you see is what you get editor. And then you have in the editor, you have a menu of available content types that you can drop into what’s called the staging area. And the staging area is essentially where all of these content types will be housed. Okay, so here we have the menu of all the various content types that are installed by default within Page Builder. You can drag and drop these content types into the staging area and see what they will look like in the preview and edit them via a form slide-out. And there’s a UI that we will go through to show you how to do that in a future slide.

So where is Page Builder available? Here you can see highlighted in blue, you can edit them in pages, blocks, dynamic blocks, category and product descriptions. And also if you create a new product attribute, you can configure that product attribute to be displayed as a Page Builder attribute. So you can edit it within a Page Builder UI.

Here’s just showing some of the capabilities within Page Builder. You can add content types, edit content types, extend them to do more things than they could natively. And you can review the sample repository of example modules to kind of see how those different types of editing can be done. It’s very useful. I definitely recommend it.

So let’s get into case studies. So the first case study we have here comes from my company, some work that I did for a client of ours building some custom content types. So the first content type that I added is a video button type. And when you go to add a button on a slide or a banner, you can select a link to add and the link can either be a category or a CMS page. I believe there’s one or two more, but I added a custom one that was a video URL. So when you clicked on the link, a modal would open up to display the YouTube video matching the URL that you configured in that video button link. So the second one is a brand tile. And when you hover over the brand tile, you get a description of the brand. So there you can see there’s GE and Philips. So it actually say this brand is Philips. And when you click on the tile, it will take you to a page. And this content type was integrated with an extension, a third party extension. So that is also possible within Page Builder. And then the third content type was a custom product slider. This is now native within Magento 2. It wasn’t at the time. Essentially, it’s just a modification of the product list extension.

We may continue using this if it suits our needs better than the native one, but the native one right now for most people is sufficient. So similar to brand tile, I also have a category tile. And when you hover over a category tile, there is a category description, which is essentially a text area on the content type, category tile content type in the back end. So you can type in a description of the category that will then get displayed on the front end when you hover over that category tile. And when you click on the category tile, it will take you to that category. So it’s useful for a quick and easy way for a client to add in a grid of categories that looks really nice. So they don’t have to really mess with any markup. They can just say, I want this category tile to have this image, and I want it to link to this category and have this description. And there’s a lot of different ways to do that. And there’s not too much fussing about with anything else. And the client that this was built for really appreciated that.