Below, you will find a post about the definition, installation, and structure of Magento 2 components. If you are new to the platform, the following information will help you get a deeper insight into Magento 2. If you do not understand the difference between modules and components or have no ideas about the Magento 2 component structure, then you’ve come to the right place.
While most newbies think that there is no difference between a module and a component and both are just synonyms, they are mistaken, because a module is just one of component types. Other components are gathered under themes and language packages.
While a module is entirely based on code that extends the behavior of the platform, a theme changes its look and feel and a language package is used for translating text in your Magento 2 app. All these components are available on Magento Connect.
Magento 2 Component File Structure
The following section describes the component structure of Magento 2. This aspect is vital, since Magento 2 relies on particular places inside the module file structure. Consequently, it is necessary to follow the predefined file structure, otherwise your module will never work as expected.
A component’s root directory is the top-level directory, which contains the code of the component. The recommended subdirectory for app to be used:
app/code– for modules
app/design/frontend– for storefront theme
app/design/adminhtml– for Magento Admin theme
app/i18n– for language packages
To set up this environment, clone the Magento 2 GitHub repository.
Please note that you get the vendordirectory structure after using the composer create-projectcommand or a compressed Magento 2 archive.
A typical theme file structure in Magento 2 looks as follows:
This file structure contains the following directories:
etc: view.xml with image configurations
i18n: translation dictionaries
media: a preview of a theme
web: static files
The web directory is optional. It contains the following subdirectories:
css/source with less configuration files and the theme.less file
css/source/lib with View files for overriding the UI library files
fonts with fonts
images with static images
Magento 2 Component File Structure: Language Package Structure
A typical language package structure in Magento 2 looks as follows:
Please note that the top-level directory is the only required directory here. Another strict requirement is the necessity to use lowercase for the directory name. It is also recommended to name the directory according to the ISO code.
Magento 2 Component Registration
As you might have guessed, Magento 2 components must be registered in the system. Use the Magento ComponentRegistrar class to achieve this goal. Add a registration.php file to each component’s root directory.
Magento 2 Component Registration: Modules
Register modules within the Magento 2 system as follows:
Use your component’s composer.json to specify your component’s dependency. Component can be dependent on other components or files from other components. It is also important to specify a load order. Do it in the component’s module.xml file with the aid of the <sequence> tag. Thus, you will ensure that all necessary files from other components are loaded on time.
If you are not familiar with the <sequence> tag, it is used for declaring components that must be loaded previously to your current component. You can use it with configuration files, setup classes, view files, etc.
It is also necessary to mention that <sequence> provides zero influence on the loading of regular or non-setup classes. As for Setup classes, they update or create database schema or data.
If a component’s logic is dependent on something from another component, add it to:
<sequence> in module.xml
Please note that the load order does not take any effect, if you’ve changed the component load order via the <sequence> tag, but did not regenerate the component list in the config.php file. Enable the component using the following command, to achieve this goal:
<component-list> – components with the <sequence> tag.
Avoid creating circular dependencies when using <sequence> in multiple components, otherwise Magento 2 will abort the installation.
Magento 2 Components: How To Create A Component
Creating a component requires to major steps to be performed:
Adding the module.xml file
Adding the composer.json file
Both procedures are described below.
First of all, you should add a module.xml file to the /etc folder to declare the component itself.
The official documentation provides the following example of the smallest working module.xml:
Magento 2 Components: How To Resolve Component Dependency Conflicts
All common component dependency conflicts in Magento 2 are divided into three groups: Conflicting dependencies; File system permissions issues, and problems related to the Component Dependency Check status (it never changes).
Let’s describe conflicting dependencies first. If you see the following message:
We found conflicting component dependencies
It means that Composer is not able to determine which components to update or install. Component dependency issues in Magento 2 can be resolved only if you are a technical specialist who knows how Composer works. The procedure requires editing the composer.json file.
As for file system permissions issues, they cause the following message: