Download code from GitHub
"Computers themselves, and software yet to be developed, will revolutionize the way we learn" - Steve Jobs.
The Internet is an important sector of many businesses, both large and small, in the modern world. It's now rare for a company to not have at least a basic web presence, and increasingly unlikely that a company's products are not sold online. Magento is a powerful e-commerce system, used by international organizations such as Nike, Nestlé, Gant, and Fun4Kids.
This is what we will see in this chapter:
Take a look at what Magento 2 is and what it can do
Discover the differences between Magento 1.x and Magento 2.x
See the default themes that come installed with Magento 2.x
Look at a showcase of custom Magento themes from real websites
Find out the particular challenges in customizing Magento themes
Install and configure Magento 2 ready for theming
As you will come to see, Magento is quite a large e-commerce system and this book will guide you through customizing its quirks and eccentricities.
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.
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
skindirectory 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
pubdirectory contains all the CSS and PHTML files precompiled.The
composer.jsonfile manages the project dependencies.
Tip
For further information about the Magento 2 directory structure, please access http://devdocs.magento.com/guides/v2.0/extension-dev-guide/module-file-structure.html .
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.
There is a plethora of e-commerce websites that make use of Magento, and some of them truly demonstrate how flexible Magento can be when it comes to theming. Here is a selection of live Magento stores that really push the platform beyond the typical Magento themes you've already seen.
Venroy is a menswear department store in Australia. Their Magento 2 store (https://www.venroy.com.au) follows the basic Magento 2 design principles and RWD design:
The store's homepage was built in a different way compared to the Luma default theme available in Magento 2. The primary navigation of the Venroy website, for example, is displayed in the top-center of the screen and it makes it highly visible to customers.
When interacted with, the store's category view expands to display more specific sub-categories:
The product detail view is also heavily customized, with information on the product, delivery, and size guides all provided with their own separate blocks:
Alcatel Onetouch (http://www.alcatelonetouch.us/) is an international mobile technology brand that adopts Magento 2 to sell its products:
As you can see, the homepage is quite heavily customized, with the featured products displayed on the homepage.
The product detail page, which is part of the Magento store, is similarly styled in an appealing way, with plenty of screen space given to information such as the product reviews, details, technical specifications, and manual:
Cultcha Kids (https://www.cultchakids.com.au/) is a toy store, and is therefore, focused on a younger audience, with specific and famous brands:
The product detail page is fully customized to the store's purposes and audience, as you can see in the following screenshot:
Magento 2 is a comprehensive and, at times, complex system, and this is reflected in some of the challenges that designers come across when creating themes for Magento 2:
Complexity: As Magento 2 is a large system, it can initially be infuriating to create themes with, though after some time you should become more familiar with Magento's inner workings
Breadth of knowledge: Magento 2 theming involves tackling a mixture of XML (for layout files), CSS (for style), (X)HTML, and snippets of PHP (for the templates)
There are a number of reasons why you may want to create or customize a Magento 2 theme:
The first and most obvious reason to customize your Magento 2 theme is that this can help you to distinguish your store from your competitors.
Customizing your Magento 2 theme can also allow you to better integrate extensions from Magento Connect into your store, with additional features.
If you have an existing website and wish to add e-commerce by integrating Magento 2 around the existing system, theming Magento 2 can make sure that there is visually seamless integration between the two systems.
Theming Magento 2 can also be useful in order to customize your store to reflect the different expectations of your customers from around the world. For example, customers in some countries may expect components of your store to appear in one location on their screen, so you could theme Magento 2 to reflect this if your customers are primarily from that country.
Before we get started with customizing the look and feel of our Magento store, you will need to install Magento 2.
There are great options in the market to help us create the local development environment to work with Magento 2:
XAMPP (https://www.apachefriends.org/)
MAMP (https://www.mamp.info/en/)
Vagrant (https://www.vagrantup.com/)
You can feel free to choose your option to use as a solution. In this book, will be suggesting using of XAMPP.
XAMPP is a complete web development environment. In its install package you can find Apache, MySQL, PHP, and Perl: everything that you want to develop your solutions.
You may be able to guess the meaning of XAMPP, but the X before the AMPP means cross or cross-platform. So, we have: Cross-platform, Apache, Maria DB, PHP, and Perl.
The goal of XAMPP is to build an easy-to-install distribution for developers to get into the world of Apache. XAMPP is a project of Apache Friends, a non-profit project to promote Apache Web Server.
But why are we working with this software? Let's find out:
Apache (http://httpd.apache.org/) has been the most popular web server on the Internet since April 1995, providing secure, efficient, and extensible HTTP services in sync with the current HTTP standards.
MariaDB (https://mariadb.org/), strives to be the logical choice for database professionals looking for a robust, scalable, and reliable SQL server.
PHP (http://php.net/) is a popular general-purpose scripting language that is especially suited to web development and, most importantly, it is the main language of Magento.
Perl (https://www.perl.org/) is a highly capable, feature-rich programming language with over 27 years of development.
So far so good, but how about doing some action?
First of all, let's access the XAMPP website at its URL, https://www.apachefriends.org :
XAMPP has three distinct versions for different operating systems (OSes): Windows, Linux, and OS X. Choose your preferred version to download and start the installation process.
XAMPP for Windows has three different kinds of installation files:
Installer: Classic Windows installation
Zip: Compressed files to install manually
7zip: Compressed files to install manually
The Installer (.exe) is the most popular process to install. Please download it and execute to start the installation process:
The following are the installation steps of XAMPP:
You can skip FileZilla Ftp Server, Mercury Mail Server, and Tomcat for our installation purposes, but feel free to consult Apache Friends Support Forum for further information: https://community.apachefriends.org .
In XAMPP, we have the option to use Bitnami (https://bitnami.com/xampp), but for learning purposes, we will install Magento in the classic way.
Complete the installation by pressing the Finish button:
In order to start XAMPP for Windows, you can execute
xampp-control.exeand start the Apache Web Server.To test if everything is working, type
http://localhostin your favorite web browser. You should see the XAMPP start page:
XAMPP for Linux has two main versions of the installation file:
32-bit version
64-bit version
Choose the file according to your architecture and follow these steps:
Change the permissions to the installer:
chmod 755 xampp-linux-*-installer.runRun the installer:
sudo ./xampp-linux-*-installer.run
XAMPP is now installed in the /opt/lampp directory.
To start XAMPP, execute this command in the terminal:
sudo /opt/lampp/lampp start
To test if everything is working, type http://localhost in your favorite web browser and you should see the XAMPP start page:
To install XAMPP for OS X you simply follow these steps:
Download the
DMG-Imagefile.Open the image file to start the installation process.
The steps are pretty much the same as Windows installation, refer to the section XAMPP for Windows installation.
To test if everything is working, type
http://localhostin your favorite web browser. You should see the XAMPP start page:
The XAMPP htdocs directory is the docroot folder of your server. Everything that you save in the htdocs folder, you can access via the browser. For example, if you save index.php inside htdocs, you can access this script by entering this URL: http://localhost/index.php. If you save your file in the packt directory, you can access it by going to http://localhost/packt/index.php. Piece of cake!
First of all, we need to create a user on the Magento website (http://www.magento.com). To download Magento 2 Community Edition, click on My Account, and after clicking the button labeled Register, fill in the form and confirm your registration.
Once registered, you will be able to download Magento 2. Access the Products menu, Open Source/CE, and finally View Available Downloads (https://www.magentocommerce.com/download):
On this page, we have three important options:
Full Release (ZIP with no sample data): The download of the last and stable Magento version
Full Release with Sample Data (ZIP with sample data): This is important for creating example products for our store for testing
Download with Composer: This is the dependency management installation tool
Please choose Full Release with Sample Data to download. Extract the compressed files in the XAMPP htdocs directory and rename the new directory packt.
Note
Remember to start the Apache and MySQL services on the XAMPP panel before the installation of Magento 2.
Before we start our Magento installation, we'll need to create a new MySQL database instance to store the Magento data. phpMyAdmin is a MySQL web app to manage your database:
Please access
http://localhost/phpmyadmin/.Click on the Databases menu and the Create database option and create a database called
packt, as shown in the following screenshot:
Access the following URL,
http://localhost/packt/setup, to start the Magento installation.
By this point, you can see this installation page on your browser:
Let's start Magento installation by following these steps:
Readiness Check: Check the environment for the correct PHP version, PHP extensions, file permissions, and compatibility.
Add a Database: Fill in the database form with your connection information. By default, you can follow the suggestions. Take a look at the following screenshot:
Web Configuration: Your Store Address and Magento Admin Address.
Customize Your Store: Time zone, currency, and language information:
Create Admin Account: Enter your personal login information and set the admin address to
admin_packt.
After following these steps, you have Magento 2 running! You can access your new site by going to
http://localhost/packt
:
And you can access the admin area by going to
http://localhost/packt/admin_packt
:
Tip
For further information about Magento installation, please go to http://devdocs.magento.com/guides/v2.0/install-gde/bk-install-guide.html
You've now seen what Magento can do, and the changes and improvements in this newer version of Magento 2. Perhaps more importantly, we've installed Magento 2 too, so it's ready to starting theming! The remainder of this book covers customizing your Magento 2 theme, from the basics, such as changing your store's logos and color schemes, to e-mail templates, and more.
