Join Enno Stuurman for an in-depth discussion in this video Customizing the product page, part of Building Magento 2 Themes.
- [Speaker] So in a previous video we moved the HTML, we moved the category page title, and in this video we are going to add HTML and we are going to add the HTML to our product page. But, before we dive into that, just a little explanation about the different product types that you have in Magento, I have opened up here the docsmagento.com, Magento 2 User Guide, the product types page, and there are six products types in Magento. You have the simple product, configurable product, a grouped product, a virtual product, a bundle product, and a downloadable product, and you can read more about it on this page.
But how does this translate to the Magento code? Each product type has its own module. So if you open up the Magento folder, which you see here, then we have the module bundle, which is responsible for the bundle product logic, we have a configurable module, which is the module configurable product, we have a downloadable module, we have a module grouped product module.
Well we don't have a simple and virtual separate module, because the simple and the virtual products, they are in the module catalog, which we used in the previous video to change our category page, and each product type in each module has its own specific layout file. Now I will show you right away we have the catalog product view, which is the default file for all product types, default layout file, and in the module catalog, you see here the catalog product view type simple layout file and the virtual file.
Now we are going to change our layout of our simple products page. What we are actually going to do, this is a one-column layout. We discussed the different layouts two videos back. And, what I want to do is I want to make this a two-column page layout with a two-column right page layout so we have a column at the right, and in that column I want to add our USPs, our Unique Selling Propositions, and I want to add those with a template.
So, let's get back to business. Let's see how we can do that. So first of all, the change of the page layout. As I just explained to you, if we only want to change something for a simple product, we have to use the catalog product view type simple.xml. So, for this, we are going to change our own custom theme, and we're going to add the catalog product view type simple.xml.
I always find it easiest to copy the first bits of the original file, than to copy that. I'm going to add it to our own file. Here we are.
So we have a kind of skeleton here. So, first of all, how can we change the layout of the page? We can do that with the layout directive. You also will see it in a lot of xml files. And for one column it will be one column, for two columns left it will be two columns left, and otherwise it will be three columns, but in this case, we want to change our page layout on our simple product page so we have two columns right.
So, add that here. I will clean the Magento cache, and in the previous videos I just cleaned all caches, but since we are only interested in the layout cache because we are changing layouts, and the full page cache, which is enabled in this environment, we are going to clean out only the layout and the full page cache, so that's also possible. Saves you some time, and time is money also when you are developing.
So let's see if we, and there we have our two columns right layout, and you see that automatically the compare products and wish list blocks that are by default enabled in the right column also appear on our product page. So now we want to add our own html in this right column. So, how would we do that? Before we're going to do that, just want to say something about developing strategy, about theming strategy.
What I mean with that is that you always have to think, you always have to anticipate on what you are developing. So, for example, we now want to add a USP, which stands for Unique Selling Proposition, html text, we want to add that to our product page. But, it might be that in future, on other pages, we want to add those USPs to, for example, the home page, or to a CMS page. So, with that in mind, instead of adding the template to our Magento catalog, which would be more logic when we only have text that we are sure that only will be shown on the catalog page, my advice would be to use the Magento theme which is more a general part of your theme, so we've got to add the html to our Magento theme.
So, for that I am going to add a new directory, and add directory we have seen it probably before, but we haven't used it before yet, is a templates directory, but follow Magento a little bit for custom html or specific html only I also add the template's html. Also in the module theme you will find a templates html folder. So, I am going to add our custom template to the templates html, but of course you could also add it just directly in your templates folder.
So, adding the file, and that's the phtml file, so we have the USP phtml here, and we go into, that's USPs explaining why this theming video is such a good, is so great, is such a good idea to follow. So, here we have a template, and now we still have to add it to our product page.
So, where are we going to add it? We are going to add it to the right column. And, two videos ago we explained to you a little bit more about the page layouts, and again this knowledge comes in very handy. Just to get a little refresher, we had in the module theme, we had the different page layouts, so let's have a look to find out what exactly the container is where we have to add our custom template.
So I am going to module theme, we have the page layouts here. You might still recall that the two columns left actually was the xml file where a different layout was added. So actually, we need to have not the diff sidebar additional but we need to have the sidebar additional, and we need to reference that. You have seen that before. So, we're actually referencing to a container.
We are not defining a tier but we are referencing it. Difficult word sometimes. So, we have the sidebar additional. Sorry, yep, there we go. So we're referencing the sidebar, and we're actually referencing here the sidebar additional. You could also reference the sidebar main, but depending on your layout, if you have a three-columns layout it will be shown on the left, in this case they will be shown on top of each other, but at this moment you will see sidebar additional where also the wishlist and the compare two products was added.
So how are we going to add a template? Well, you could go, of course, to the Magento DevDocs, where you also will find information about the how to add a template via layout xml, but of course you could also have a look in encode, and the Magento theme front end layout default xml is often my own reference points, because it contains a lot of html which is used on all pages, so I actually see already on the first line a block named templates, which adds actually a template, in this case the recurring js template, through the theme.
So, I'm actually going to copy this one, and I'm going to change it to my liking, in the catalog product view type simple. So, here we have our snippet to add to templates, but first of all I am going to add a USP. I am going to give it a unique name, so it could be USP, I always prefer to add a name space to my own block names in case another module would already use the block name USP.
You could have a collision of the block names. So, the class is Magento favorite view elements, templates, we can just leave that here, and then we reference to our own templates, and when you reference a template in your own folder, like Magento catalog, then it would be sufficient to only put a location in here, but when you reference it from another directory, like Magento theme, then you add first in Magento theme double column, and then you add the location.
So in this case, we are already using Magento theme html USP phtml from our Magento catalog. So, let's save this one, last clean cache, we saw now that we can also clean only specific cache, as you see layout and the full page cache, and look, here is our Magento 2 Theming 101.
Should you want to have our USPs a little bit on top of everything because we think they are important, we can use the before directive that we also used in the previous lesson when we changed the, when we moved the cutaway page title. So again, changing our, cleaning our cache, and then we'll see that our USPs actually are above the compare products and my wishlist. So, again we saw how to add html, we saw that we can do that in the templates, and how we can do that in xml.
We also saw how we could change the page layouts, also using xml. So in our next session, we are going to add some more html. We're using different techniques and we're going to do some nice stuff there, so thank you for watching and see you in our next video.
Learn how to create and customize Magento 2 themes. Instructor Enno Stuurman begins the course by taking a look at the default Luma theme. After he goes over the structure of Luma, he helps you use that knowledge to build your own unique theme. Enno discusses page layouts in Magento themes, overriding and extending Magento theme CSS, deploying Magento 2 themes to production, and more. Throughout the course, he covers Knockout.js, Grunt, and other tools you need to master Magento theming.
- Creating custom Magento themes
- Changing the theme logo and favicon
- Moving elements inside a theme layout
- Customizing a product page
- Understanding CSS in Magento themes
- Changing your theme style with overrides