Magento (http://www.magentocommerce.com) is a highly customizable e-commerce platform and content management system. Magento is one of the most widely used e-commerce systems to create online stores around the world by providing management of inventory, orders, customers, payments, and much more. Magento has a powerful scalable architecture that follows the best software development patterns on the market. Take a look at the following screenshot:
Magento is written in the PHP programming language using an object-orientated architecture, allowing features such as additional payment gateways, integration with social networks such as Twitter and Facebook, and customization for different product types to be easily added.
The default installation of Magento provides a huge number of e-commerce and related features, supports multiple stores being managed from the same control panel, and importantly for us—provides the ability for very heavily customized themes.
At the beginning, Magento was very criticized for being slow when loading its pages, which could be at least partially mitigated with the use of built-in caches. However, in Magento 2 we have a considerable evolution on system performance with the adoption of the LESS preprocessor, Full Page Caching, Indexers Optimization, and the adoption of new techniques and technologies, as you will see in the following chapters.
As with other e-commerce systems, Magento allows products to be added, edited, manipulated, and organized within categories. You are able to control your product's names, descriptions, prices, and upload multiple photographs for each product in your store. Magento also lets you create variations of products in your store, so you can have one product that is available in multiple colors (such as blue, red, and black) within Magento. In other e-commerce systems, you may have to add the blue, red, and black products as three separate products.
In addition to these standard e-commerce features, Magento also has the ability to perform the following:
- Manage both the sending of e-mail newsletters and the managing of subscribers to these lists
- Manage non-product pages through its content management system (CMS)
- Organize polls of your store's visitors
Additional features are available in Magento Enterprise Edition, but this book concentrates on Magento 2 Community Edition; everything in this book can be applied to all editions of Magento 2.
Differences between Magento 1 and Magento 2
There are some fairly major differences between Magento 1 and Magento 2. Magento 2 provides major updates on its previous version after some hard work to create the best solutions to old issues such as performance and security. The updates can be illustrated by the following list:
- Caching: There's a built-in Full Page Cache (FPC) on the Community Edition and Varnish support for improved performance.
- Extensions and Themes: Magento 2 is more organized and extensible now. The extensions and themes have your own files of code and layout.
- File structure: More organized directories and structures inside the Model View-Controller (MVC) proposal.
- Performance: Improved performance and scalability.
- Security: Enhancements in security with the adoption of good software development practices (design patterns) and SHA-256 password hashing included.
- User Experience (UX): Besides the frontend changes, the Magento 2 admin area is now more user-friendly with substantial positive changes such as the new admin area structure and management.
Magento 2, compared with Magento 1.9, shows some changes, but more than that, there is an improvement in the system's behavior and processes. The code is more organized; it separates the Magento framework's native extensions, providing a powerful environment for modularization and solution development:
The main changes in the structure of Magento 2 are as follows:
- The
skin directory does not exist anymore. All the files of a module or theme are stored in its specific scope. - The native modules and themes of Magento 2 installation are in the vendor directory.
- The
pub directory contains all the CSS and PHTML files precompiled. - The
composer.json file manages the project dependencies.
In Magento 1, the theme system works by rendering the layout files (PHTML) from the app/design/frontend/MyTheme directory and by rendering the CSS, JS, and Image files from the skin/frontend/MyTheme directory. However, in Magento 2, all the layout and CSS files are in the same directory, Theme.
The themes of Magento 2 are located in the app/design/frontend/<Vendor>/ directory. This location differs with built-in themes, such as the Luma theme, which is located in vendor/magento/theme-frontend-luma.
The different themes are stored in separate directories:
Each Vendor can have one or more themes attached to it, so you can develop different themes inside the same Vendor.
The theme structure of Magento 2 is illustrated as follows:
How Magento 2's theme structure works is quite simple to understand: each <Vendor>_<Module> corresponds a specific module or functionality of your theme. For example, Magento_Customer has specific CSS and HTML files to handle the customer module of the Magento vendor. Magento handles a significant number of modules. So, I strongly suggest you navigate to the vendor/magento/theme-frontend-luma folder to see the available modules for the default theme.
In the structure of Magento 2, we have three main files that manage the themes' behavior:
composer.json: Describes the dependencies and meta informationregistration.php: Registers your theme in the systemtheme.xml: Declares the theme in the system and is used by the Magento system to recognize the theme
All the theme files, inside the structure explained in the previous section, can be divided into Static View Files and Dynamic View Files. The Static View Files are not processed by the server (images, fonts, js) and the Dynamic View Files are processed by the server before delivering the content to the user (template and layout files).
Static files generally are published in the following folders:
- /pub/static/frontend/<Vendor>/<theme>/<language>
- <theme_dir>/media/
- <theme_dir>/web
Tip
For further information, please access the official Magento Theme structure documentation:
http://goo.gl/ov3IUJ
In
Chapter 2
, Exploring Magento Themes, you will see this structure in action by exploring the default themes of Magento 2. Now, let's take a look at a showcase of running Magento 2 solutions.
Free Chapter
