Magento 2 Areas vs Modules | A Complete Guide
In this article, we will talk about Magento 2 Areas and Modules.
What is an Area in Magento 2?
An area can be understood as a logical component that can help you organizes code in order to optimize the processing of the request. Areas are usually used to streamline web service calls. This can be done by loading only the dependent code for a particular area. Each of the default areas which are defined by Magento can include totally different code for process URLs and requests. For instance, when you invoke a REST web service call, you can identify a separate area that loads the code that its scope is limited to answering REST calls.
6 Magento area types
1. Magento Admin: adminhtml
index.php
or pub/index.php
is the entry point for the adminhtml
area. All the code which are needed for managing the store will be included in this Admin panel area. If you want to view all the code for components which you will see while working in the Admin panel, you can access the /app/design/adminhtml
directory.
2. Storefront: frontend
The entry point for the Storefront
area is index.php
or pub/index.php
. To define your storefront appearance, you can find the template and layout files in this area.
3. Basic: base
You can use Basic as a replacement for files which are absent in adminhtml
and frontend
areas.
4. Cron: crontab
The crontab
area will always be loaded by the \Magento\Framework\App\Cron
class in cron.php
5. Web API REST
To entry the Web API REST (webapi_rest) area, you can find its entry point which is index.php
or pub/index.php
. This area has a front controller which can understand the way to do URL lookups for REST-based URLs.
6. Web API SOAP: webapi_soap
The entry point for the Web API SOAP area is index.php
or pub/index.php
.
In addition, it’s essential to diffirentiate all these types of Magento 2 areas. It’s not only for you to understand correctly each type of areas but also helpful to identify some files from Basic (base) that can be used in admnhtml and frontend. Learning each type of areas to address the differences between them is what you can do next. But remember one thing they have in common is their structure.
How areas and modules working together?
Areas vs modules
The resources that are visible and accessible in an area and the area’s behavior will be defined by Modules. Several areas can be influenced by the same module. For example, parts of the RMA module will be represented in the adminhtml
and the frontend area.
If your module works in different areas, make sure that it needs to have individual behavior and view components for each area.
Each of the areas will declare itself in a module. Besides, all the resources for an area will also be located in the same module.
Moreover, you also have the ability to enable or disable an area within a module. Once a module has been enabled, it would inject the routers of an area into the general routing process of application. On the contrary, of the module is disabled, the area’s routers will not be loaded. Consequently, an area’s resources and specific functionality will not be available.
Facts:
- Other areas of modules should not influence modules.
- When you disable an area, it will not lead to the modules related to that area is disabled.
- Areas will be registered in the file called Dependency Injection framework di.xml.
Example of frontend area
In this guide, we will show you how to create a frontend theme as frontend area.
Theme Folder structure
app/design/frontend/mageplaza/
├── ultimate/
│ ├── etc/
│ │ ├── view.xml
│ ├── web/
│ │ ├── images
│ │ │ ├── logo.svg
│ ├── registration.php
│ ├── theme.xml
│ ├── composer.json
Create a app/design/frontend/mageplaza/theme.xml
file like this:
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../lib/internal/Magento/Framework/Config/etc/theme.xsd">
<title>Mageplaza Ultimate</title>
<parent>Magento/blank</parent>
</theme>
Declare your theme
Now we have folder app/design/frontend/mageplaza/ultimate
, now create a file named theme.xml
that define basic information about theme such as: Name, parent theme (in case your theme inherits from an existing theme), preview image
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>Mageplaza Ultimate</title> <!-- your theme's name -->
<parent>Magento/blank</parent> <!-- the parent theme, in case your theme inherits from an existing theme -->
<media>
<preview_image>media/preview.jpg</preview_image> <!-- the path to your theme's preview image -->
</media>
</theme>
Create Register file
You can add the following content to registration.php
the theme to Magento 2
File: app/design/frontend/mageplaza/registration.php
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::THEME,
'frontend/mageplaza/ultimate',
__DIR__
);
You should change Mageplaza Ultimate to your vendor, theme name.
Wrap up
In this article, I have provided you with a comprehensive introduction to areas and modules in Magento 2 as well as how they work with each other.
I hope that the information above is helpful for you. Thanks for reading!
- How to create a simple Hello World module for Magento 2
- Magento 2 Block Template Ultimate Guides
- How to Create Module in Magento 2
- How to Create Controller in Magento 2
- How to create CRUD Models in Magento 2
- How to Create Magento 2 Block, Layout and Templates
- Configuration - System.xml
- How To Create Admin Menu In Magento 2
- Admin ACL
- Admin Grid