Magento 2 Areas: adminhtml, base and frontend

Nov 27, 2018209Yaroslav Tobolich
Magento 2 Areas: adminhtml, base and frontend

Today we will talk about Magento 2 and answer the following Frontend certification questions:

Which design areas exist?
What is the difference between them, and what do design areas have in common?
What are design areas used for?
How can design areas be utilized for custom themes or customizations?


Types of design areas in Magento 2

In terms of frontend, the Magento 2 areas are components that determine which modules and resources will be shown in particular area.

There are 3 types of areas in Magento 2:

  • Magento Admin (adminhtml) is used in the admin panel for displaying modules and resources that are used in the admin panel. The files are usually stored in /app/design/adminhtml, and the module is stored in <module_dir>/view/adminhtml.
  • Basic (base) is used for the basic files in modules, <module_dir>/view/base.
  • Storefront (frontend) is used for the external part of your store, particularly for displaying modules and resources that are used directly in the external part of the store and are visible to the user.

What is the difference between them, and what do design areas have in common?

If we address the differences between these areas, we can identify some files from Basic (base) that can be used in adminhtml and frontend. However, the adminhtml files cannot be used in the frontend. What is more, UI components can be used in adminhml, but not in the frontend. One thing that they have in common is their structure. I have already addressed the folder structure in Magento 2 on our blog.

What design areas are used for?

Areas most commonly used in adminhtml and frontend:

  • in adminhtml – for creating admin panel themes;
  • in frontend – for designing the exterior of your store using different modules, as well as for store customization.

How can design areas be utilized for custom themes or customizations?

Design areas can be used for:

  • creating design for the admin panel;
  • creating design for Storefront;
  • separating letter templates from the admin panel and Storefront.

In addition to that, let’s look into how to create a theme for admin panel.

To begin with, create a folder for the theme itself. I use the command line, but you can use your file manager for that purpose. Enter the following code in the command line:

Now we go to our folder and create the files with the following content:

registration.php, theme.xml.
registration.php:

theme.xml:

Let’s also create a module for the application of our theme. Write the following in the command line (make sure you do it in the root directory of Magento 2):

Create the following structure:

 

Now let’s consider each file individually:

  • registration.php (register our module):

  • module.xml (specify what we inherit our module from):

 

  • etc/di.xml (now we apply our theme):

 

Now we can customize our theme a little, particularly change the logo. Create the following structure:

As you can see from the structure, the logo is located in the web/logo.svg folder. You can read more on folder structure in Magento 2 (link) in my previous article. For now we are interested in the admin_login.xml file.

Let’s redefine the logo using <referenceBlock> (take a look at the article called Layout XML Directives and Their Arguments in Magento 2 to learn more about directives):

It is clear from the code where we indicated the logo:

This is what the whole admin_login.xml file will look like:

After you performed everything described above, you need to update the configuration. To do this, write the following code in the command line:

After the upgrade, you will see your logo displayed in the admin panel:

I hope this blog post answered all of your questions for this topic. Feel free to leave us a comment down below!



Post a new comment

top
BelVG Newsletter
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Email *