Book Image

Magento 2 Theme Design - Second Edition

By : Richard Carter
Book Image

Magento 2 Theme Design - Second Edition

By: Richard Carter

Overview of 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.
Table of Contents (18 chapters)
Magento 2 Theme Design - Second Edition
Credits
About the Author
About the Reviewer
www.PacktPub.com
Preface

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