Magento 2 is a popular e-commerce platform that has a variety of out-of-the-box features and high-security levels. With Magento 2, you're guaranteed to have an e-commerce platform that provides all the necessary functionalities you need and more for your business to flourish.
In this article, you'll learn the basics of Magento 2. You'll learn about the structure of Magento 2 including, modules, themes, and more, and a brief overview of each. This article is perfect for beginners who are interested to learn how Magento works.
System Requirements
To start working with the latest version of Magento 2, you'll need at least PHP 7.4 (at the time of writing this article). You'll also need Elasticsearch installed and running as a background service.
In addition, you need Composer installed. Composer is necessary to initiate the installation.
MySQL is also required for the database of Magento 2.
Once you have these elements installed, you can start installing Magento. There are a few steps before you can get Magento 2 installed and working, so I suggest you follow the official installation guide.
Directory Structure Overview
We'll go over the directory structure in Magento briefly. After you install Magento, this is how the directory structure should look like:
We'll briefly go over what each directory is:
- app: This directory is where you'll spend most of your time when programming in Magento 2. It should have three directories: code which is where your custom modules will go into; design which is where your custom themes will go into; and etc which holds the main configuration files for Magento's system and modules or settings.
- bin: This holds Magento's CLI tool. You'll use this tool to compile, generate static data, run cron jobs, and more.
- dev: This tool is more related to using tools like Grunt. Magento 2 supports Grunt out-of-the-box. Although you don't need to use it, using Grunt with Magento 2 speeds up your frontend development.
- generated: when creating modules in Magento 2, you'll frequently need to compile the code using the CLI tool. The generated classes and code are all placed inside the generated directory.
- lib: This includes a set of libraries that are related to Magento's system.
- node_modules: Only present if you run
npm install. You can use NPM packages for a variety of reasons, like when you are using Grunt with Magento. - phpserver: This directory includes the built-in PHP server.
- pub: This directory will include public media like images. It will also include the generated static files of both the admin and the store. When you open the website, all the pages and static files are used from this directory.
- setup: This directory is only necessary when first setting up Magento 2 and installing it.
- var: This directory includes cache files, logs, and more.
- vendor: All composer-installed libraries and packages, including Magento's code, will be present in this directory.
Areas
In Magento, there is the admin side which allows you to view all data necessary to the store like customers, sales, and more. It also allows you to change settings in the store. This side is protected by a password and should be only accessed by the managers of the store.
There's also the storefront, which is the store that the users see and buy items from.
These two sides are called "areas". The adminhtml area refers to the admin side, and the frontend area refers to the storefront. When creating modules and themes, you'll see that these area names are used to separate static files, themes, controllers, and more from each other.
Views
In both modules and themes, there are view files. These files are what shape each page, and they can be new in your module or theme or override existing files.
Layouts
Layouts are XML files. One thing you can do with them is creating page layout types. These layout types define different types of structures which can be used when creating pages. For example, by default Magento has the page layout type 2columns-left, which will show a sidebar at the left of the page. When creating page layouts later, if their type is 2columns-left they'll have a left sidebar.
The second type of layout XML files is page layouts which are specific for each page. Their name convention is ROUTENAME_CONTROLLER_ACTION.xml, where ROUTENAME is defined when you create a new module, CONTROLLER is the controller inside that module which is usually a directory, and ACTION is one of the action classes inside that controller directory.
Page layouts consist of containers and blocks. Containers are mainly just HTML element containers, whereas blocks are PHP classes that have templates representing them.
Templates
Templates are what the user will see when we add a block to a page's layout. By default, templates have a block variable inside the template of the class Magento\Framework\View\Element\Template, but you can create your own block as well. If you create your own block class, you can create functions or variables inside it that the template can use.
Static Files
You can add styling through CSS and Less files. If you use Less stylesheets, they'll be compiled when you deploy the static content of your store.
You can also add Javascript files. Magento 2 uses RequireJS to load these static files efficiently. So, your Javascript files should support it.
In Javascript, you can use Knockout. It's a Javascript library that allows you to create dynamic HTML templates.
Modules
In Magento 2, when you want to implement new functionality that's not present in the system, you want to modify or remove existing functionality or want to override how Magento 2 does something, you'll need to create a module for it.
Database Tables
You can do many things inside modules. You can create database tables on installation or update or add to existing database tables. You can also insert data into the database.
Models
You can create Models that represent database tables. These models can have repositories or factories that will allow you to easily read, insert, update or delete data.
Plugins
You can create Plugins that allow you to perform actions before, after, or around public functions of any class. You can also entirely override a class and change it to whatever fits your needs.
Settings
Inside every module, there's an etc directory. This directory holds mainly XML files that handle the settings and configurations of the module. For example, here is where you would define the route name to access the module.
Controllers
In modules, you can create Controllers. Controllers handle requests into the module. Usually, Controllers are directories inside the Controller directory of the module, and inside each Controller directory is a set of PHP classes. Each of these PHP classes is an action, meaning they're pages or endpoints for requests.
Blocks
You can create Blocks, which are added to and rendered in pages. Blocks allow you to create somewhat reusable components, each focusing on a certain functionality or information to be rendered.
View Files
Modules can include all the view files mentioned in the previous section for both the store and the admin side. You can create them specifically for your module or modify existing ones in other modules.
CLI Commands
Inside modules, you can define CLI commands that you would use through Magento's CLI command.
Cron Jobs
Inside modules, you can define cron jobs at certain time spans and classes that perform tasks at the time specified for the cron job.
Observers
Magento 2 allows you to trigger events at any necessary point in your code. It also allows you to listen to triggered events to perform certain actions. That's where observers come in. Observers listen to events triggered either by the same module or other modules.
Themes
Magento 2 uses themes to style your store. With themes, you can override the view files mentioned in previous sections that are created by modules. You can also add new ones to change up the style.
Themes mainly consist of view files, but they're encapsulated inside directories that represent modules.
Internationalization
Magento 2 supports multiple languages in your store. This means that you can localize strings in your templates, blocks, controllers, etc...
You can also change the static files in a theme, like stylesheets, based on the language of the store.
You can support different languages in both your theme or module. Translations are done through dictionaries that are CSV files. Magento also provides tools that make creating dictionaries easier.
UI Components
UI Components were introduced in later versions of Magento 2. They allow you to create layouts and pages, mainly on the admin side, using UI components that allow for the data to be dynamic and for the loading or saving of the data to be asynchronous.
By default, Magento provides a large set of UI components that you can use on any admin page at any given point. You can also create your own.
Conclusion
Through this brief overview, you can see a glimpse of what Magento 2's structure is like. It relies mainly on modules and themes, with necessary components, classes, functionalities, and more inside it.
By understanding how Magneto's structure is like, you're able to start creating with Magento 2 the functionalities and modifications you need for your store.