It is the domain of the front-end developer and the starting point for almost every tutorial that describes front-end development in Magento 2. Luckily, the task of setting up a theme is very straightforward. This tutorial will cover the basic concepts of a theme and the changes that have come with the latest update Magento 2. Magento 2 comes with two built in themes: Blank and Luma. There is no requirement to use these themes, you can start your theme from scratch without any inherited templates, styles or layouts.

Author:Tokora Shaktibei
Language:English (Spanish)
Published (Last):15 March 2019
PDF File Size:19.94 Mb
ePub File Size:17.10 Mb
Price:Free* [*Free Regsitration Required]

In , a small company named Varien, based in Los Angeles, quietly released an open source ecommerce platform to the world.

Magento, as it came to be known as, quickly gained traction with web developers wishing to move on from the days of osCommerce and Zen Cart to a more professional and robust system. Magento has earned a reputation of being flexible and powerful, while remaining somewhat of a mystery to developers. Documentation for the platform was, and still is, scarce.

The block classes allow us to move the reusable functionality from the PHP template files into PHP classes, which can be used again on different template files in the future. As a rule, all template files will have an associated block class. Along with providing useful methods to the template files, blocks are also used to decide how to render the template file to the user.

Each block has a toHtml method for this purpose. Usually, the toHtml method will simply parse the template file and output it to the user, but we could override that functionality and return anything we like, such as XML or JSON. But what are those interface and theme names in there? An interface, in Magento template terms, is a collection of themes. A theme, therefore, is just a bunch of layout and template files.

The interface will define the overall layout of your ecommerce site, while a theme sits on top of it and gives it a particular look. Say you have an interface for your site, and a default theme. Whenever a module specifies that a layout file needs to be loaded by the system, Magento will look in a number of places. Magento will check the following folders, in order, for a file named customer.

Any unchanged files will be located and loaded by heading down the inclusion hierarchy. This searching strategy makes multiple themes quite manageable. A minimal block definition must contain a block type and a name.

Earlier, we mentioned that all templates must have a block type. This relationship is asymmetrical; we can define a block that does not have a template.

That block would simply have to use its toHTML method to generate its output. The same hierarchical lookup is done on files in the skin directory as is done with template files.

In the layout XML above, you can see that the header block has another block nested inside it. Child blocks are a great way to separate out parts of a page into reusable components. More on Layout Handles As we previously mentioned, the layout handle maps a URL to a specific area in the layout file.

Magento will merge various layout handles on each page load. When Magento renders a page to the user, it loads all the layout XML files it can find following the previously discussed inclusion hierarchy, and looks for the above handles in turn.

It follows that absolutely any layout XML file could contain a handle to any page in the system. Referencing Declared Blocks All of the global blocks are defined in the default handle. But now we have a problem. What if we want to add something to the header block on some pages, but not others?

Does that mean we need to put the header separately into each layout handle? Fortunately for us, no. The reference tag gives you access to the inside of another block: anything inside that reference tag will be placed inside the target block.

How does it know which block to target? You just set the name attribute to be the same as the targeted block. To explain how this works, we need to head back to the toHtml method of a block.

The order of the blocks being output is, generally, the order in which they appear in the XML; however, we can override this behavior with the after and before attributes. So the wrapper is just a list of other blocks that will be displayed in a certain order. With that in mind, here are a few guiding principles for your theme development.

When you update Magento, the default templates will likely be modified. Use local. Instead, apply your changes to a different file called local. The local. Magento loads the local.

A Real World Example So we have the theory nailed, right? Before we begin, you should download Magento and install it on your local web server or virtual machine. Choose Add Design Change and select your new theme.

As you can see, you can set a design change to come into effect during certain days of the year. This would be perfect for the Christmas example we used earlier on, but for now just leave those fields blank to have your design become the default.

This is normal, because the pages are cached. Take a look at the source of the page. First, we need to identify the names of the blocks. If your editor or IDE has a folder-wide search option, this is a great time to put it to use! After some detective work, we find the PayPal block defined as the following in paypal. The XML, which is to be placed in our local. We can see that there are currently no before or after attributes defined for the block.

Our local. Super Big Corporation, Inc. Fantastic news! The first thing we need to do is make a template. That file can contain whatever HTML you want to display as the advertisement. Next, we need to add it to the layout XML. There you go!


Tutorial: Introduction to Magento Theme Development



Magento 2 Theming Basics


Related Articles