Magento 2 Theme Design - Second Edition

4 (4 reviews total)
By Fernando J Miguel , Richard Carter
  • Instant online access to over 7,500+ books and videos
  • Constantly updated with 100+ new titles each month
  • Breadth and depth in over 1,000+ technologies
  1. Introduction to Magento 2

About this book

Magento is the e-commerce software and platform trusted by the world’s leading brands. Using Magento’s powerful theming engine, you can control the look, content, and functionality, and easily launch a flexible e-commerce website. However, because of its powerful features, developing Magento themes is easier said than done.

This book aims to leverage the enhancements to theme designing in Magento 2 to the fullest. It will show you how to gear up the performance of your e-commerce website.

We begin by introducing Magento 2 and its features along with implementing a local development Magento environment. We then move on to discuss the concepts of the Magento theme structure such as templates, inheritance, customization, and override.

Further on, we explore the Magento UI Library, which is a new feature available in Magento 2.0. We will create a new Magento 2.0 theme named MyCake Store using Magento Bootstrap from Maven E-commerce and also create print strategies for the Magento 2.0 theme. We will also create and customize a new theme proposal for the Magento admin panel. At the end, we will integrate Magento 2.0 to Twitter and integrate it with social bookmarking and finally deploy our new Magento 2.0 theme.

Publication date:
October 2016
Publisher
Packt
Pages
288
ISBN
9781785888229

 

Chapter 1. Introduction to Magento 2

"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.

 

What is Magento?


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.

Magento 2's features

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.

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 information

  • registration.php: Registers your theme in the system

  • theme.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.

 

Showcase of Magento themes


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

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

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

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:

 

Challenges of Magento 2 theme design


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)

 

Why create a custom Magento 2 theme?


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.

 

Installing Magento 2


Before we get started with customizing the look and feel of our Magento store, you will need to install Magento 2.

XAMPP PHP development environment

There are great options in the market to help us create the local development environment to work with Magento 2:

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?

XAMPP installation

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 installation

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:

  1. 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 .

  2. 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.

  3. Complete the installation by pressing the Finish button:

  4. In order to start XAMPP for Windows, you can execute xampp-control.exe and start the Apache Web Server.

  5. To test if everything is working, type http://localhost in your favorite web browser. You should see the XAMPP start page:

XAMPP for Linux installation

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:

  1. Change the permissions to the installer:

    chmod 755 xampp-linux-*-installer.run
    

  2. Run 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:

XAMPP for OS X installation

To install XAMPP for OS X you simply follow these steps:

  1. Download the DMG-Image file.

  2. Open the image file to start the installation process.

  3. The steps are pretty much the same as Windows installation, refer to the section XAMPP for Windows installation.

  4. To test if everything is working, type http://localhost in 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!

Downloading Magento 2

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:

  1. Please access http://localhost/phpmyadmin/.

  2. Click on the Databases menu and the Create database option and create a database called packt, as shown in the following screenshot:

  3. 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:

  1. Readiness Check: Check the environment for the correct PHP version, PHP extensions, file permissions, and compatibility.

  2. 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:

  3. Web Configuration: Your Store Address and Magento Admin Address.

  4. Customize Your Store: Time zone, currency, and language information:

  5. 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

 

Summary


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.

About the Authors

  • Fernando J Miguel

    Fernando J. Miguel is a Certified Professional Scrum Master by the Scrum Alliance, with experience in Analysis and Web Application Development since 2003. He has been working with Project Development with Design Patterns, MVC, Object Oriented Programming and Agile. Fernando also has experience with Content Management Systems (CMS), Wordpress, Joomla, Magento 2, PHP, Java, Node.js, Android, SQL, NoSQL, Cloud Computing. Fernando has a bachelor degree at Information Systems (Centro Universitário Módulo - Brazil), specialization in Project Management / PMI-PMBOK (Universidade Cruzeiro do Sul - Brazil), specialization in Informatics on Health (Universidade Federal de São Paulo - Brazil) and currently he is pursuing a master's degree in Electronic Engineering Computer - Informatics at Instituto de Tecnologia e Aeronáutica (ITA), one of the best technology institute in Brazil. Dedication To my grandmother Mildes and my mother Edneia, wherever they are, I'm sure they are very happy with my work. To my beloved wife Elizabete for the countless hours of patience with my work. Love you.

    Browse publications by this author
  • Richard Carter

    Richard Carter is a seasoned front-end web developer who has worked with Magento since 2008. He lives in Newcastle upon Tyne in the North East of England.

    He is the founder of the e-commerce agency Peacock Carter, an e-commerce and web design agency based in the North East of England, and has worked for clients including the Scottish Government, City & Guilds, NHS, and the University of Edinburgh.

    Richard is the author of four books on Magento, including Magento Responsive Theme Design, and has written three further books on e-commerce and content management systems.

    Browse publications by this author

Latest Reviews

(4 reviews total)
一般吧,没有期望中的那么好,感觉跟Magento的官方说明差不多!
I'm about 100 pages through the book, but I'm not really learning anything from it. The explanations don't really make any sense to me, although Magento is supposed to be a difficult framework to learn.
Good book, nice quality on the printing too

Recommended For You

Book Title
Unlock this full book FREE 10 day trial
Start Free Trial