Book Image

Magento 2 Development Quick Start Guide

By : Branko Ajzele
Book Image

Magento 2 Development Quick Start Guide

By: Branko Ajzele

Overview of this book

Magento is an open-source, enterprise-level e-commerce platform with unlimited scope for customization. This makes it a great choice not only for vendors but for developers as well. This book guides you through Magento development, teaching you how to develop modules that extend or change its functionality, leading to more ?exible and profitable Magento stores. You start with a structural overview of the key Magento development components. You will learn where things such as plugins, events, models, controllers, layouts, and UI components ft into the development landscape. You will go through examples of using these components to extend Magento. As you progress, you will be building a diverse series of small but practical Magento modules. By the end of this book, you will not only have a solid foundation in the Magento development architecture; but you will also have practical experience in developing modules to customize and extend Magento stores.
Table of Contents (11 chapters)

Modules

The top-level Magento structure is rather simple. When we strip away (seemingly) non-relevant files such as licenses, sample files, and changelogs, what remains looks much like the following:

app/ 
code/
design/
etc/
config.php
env.php
bin/
composer.json
composer.lock
dev/
generated/
index.php
lib/
phpserver/
pub/
static/
adminhtml/
frontend/
setup/
update/
var/
cache/
log/
page_cache/
view_preprocessed/
pub/
static/
adminhtml/
frontend/
vendor/
composer/
magento/
symfony/

The app/code/<VendorName>/<ModuleName> directory, <MAGELICIOUS_DIR> for short, is where our custom code will reside.

When developer mode is enabled, we can manually clean the cache, compilation, and static files via the rm -rf var/cache/* && rm -rf var/page_cache/* && rm -rf var/view_preprocessed/* && rm -rf generated/* && rm -rf pub/static/* command. Under limited use cases, this can provide a faster development workflow.

The vendor/magento directory, <MAGENTO_DIR> for short, is where Magento source code resides, as per the following partial listing:

vendor/
magento/
composer/
framework/
language-de_de/
language-en_us/
magento-composer-installer/
magento2-base/
module-catalog/
module-checkout/
theme-adminhtml-backend/
theme-frontend-blank/
theme-frontend-luma/

The individual module directory is where things get interesting. Let's take a quick look at the structure of one of the simpler Magento modules, <MAGENTO_DIR>/module-contact:

Block/
Controller/
etc/
Helper/
i18n/
Model/
Test/
view/
composer.json
LICENSE.txt
LICENSE_AFL.txt
README.md
registration.php

This is by no means the final structure of the individual module. There are other directories the module can define, as we will see as we move forward throughout this book.

Creating the minimal module

Let's create the most minimal module there is in Magento. Our module will be called Core and it will belong to the Magelicious vendor. The formula for determining the directory of custom modules is app/code/<VendorName>/<ModuleName>, or in our case <MAGELICIOUS_DIR>/Core.

We start off by creating the <MAGELICIOUS_DIR>/Core/registration.php file with the following content:

\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Magelicious_Core',
__DIR__
);

The registration.php file is essentially the entry point of our module. The register method of the Magento\Framework\Component\ComponentRegistrar class provides the ability to statically register components, whereas a component can be more than just a module, as defined via the following constants:

  • Magento\Framework\Component\ComponentRegistrar::MODULE
  • Magento\Framework\Component\ComponentRegistrar::LIBRARY
  • Magento\Framework\Component\ComponentRegistrar::THEME
  • Magento\Framework\Component\ComponentRegistrar::LANGUAGE

Next, we will create the <MAGELICIOUS_DIR>/Core/etc/module.xml file with the following content:

<config>
<module name="Magelicious_Core" setup_version="1.0.0">
<sequence>
<module name="Magento_Store"/>
<module name="Magento_Backend"/>
<module name="Magento_Config"/>
</sequence>
</module>
</config>

The name and setup_version attributes of a module element are considered required. The sequence, on the other hand, is optional. We use it to define any potential dependencies around other Magento modules.

Finally, we add composer.json with the following content:

{
"name": "magelicious/module-core",
"description": "The core module",
"require": {
"php": "^7.0.0"
},
"type": "magento2-module",
"version": "1.0.0",
"license": [
"OSL-3.0",
"AFL-3.0"
],
"autoload": {
"files": [
"registration.php"
],
"psr-4": {
"Magelicious\\Core\\": ""
}
}
}

Magento supports the following composer.json types:

  • magento2-module for modules
  • magento2-theme for themes
  • magento2-language for language packages
  • magento2-component for general extensions that do not fit any of the other types

Though composer.json is not required for our custom module to be seen by Magento, it is recommended to add it to any component we are building.

You can trigger module installation by running the php bin/magento module:enable Magelicious_Core command, like so:

$ php bin/magento module:enable Magelicious_Core
The following modules have been enabled:
- Magelicious_Core

To make sure that the enabled modules are properly registered, run 'setup:upgrade'.
Cache cleared successfully.
Generated classes cleared successfully. Please run the 'setup:di:compile' command to generate classes.
Info: Some modules might require static view files to be cleared. To do this, run 'module:enable' with the --clear-static-content option to clear them.

You can run the php bin/magento setup:upgrade command to trigger any install and/or update scripts that need to be triggered:

Cache cleared successfully
File system cleanup:
generated/code/Composer
generated/code/Magento
generated/code/Symfony
Updating modules:
Schema creation/updates:
Module 'Magento_Store':
...
Module 'Magento_CmsUrlRewrite':
Module 'Magelicious_Core':
Module 'Magento_ConfigurableImportExport':
...
Nothing to import.

This finishes our module installation.

Creating the <VendorName>/Core module is often a good practice when working on a project with lots of custom <VendorName> modules. Used carefully, the Core module can provide common bits that are shared across several other modules. The tab element of the system.xml file, which is used to provide a sidebar menu presence under Magento's admin Stores | Settings | Configuration, is a nice example. Similarly, we can use it to provide top-level access resources for other modules to use.

To confirm our module was installed correctly, perform the following:

  • Check the <PROJECT_DIR>/app/etc/config.php file for the 'Magelicious_Core' => 1 entry
  • Check the setup_module table for the Magelicious_Core 1.0.0 1.0.0 entry

At the moment, our module does absolutely nothing, aside from just sitting there. However, these few simple steps are the basis for us moving forward with Magento development, because the majority of things in Magento are done via a module, alongside other types of components, which we have already mentioned.