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.
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.
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.
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 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 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 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Inside modules, you can define CLI commands that you would use through Magento's CLI command.
Inside modules, you can define cron jobs at certain time spans and classes that perform tasks at the time specified for the cron job.
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.
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.
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 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.
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.