Sign In Start Free Trial

Book Overview & Buying
Table Of Contents
Feedback & Rating

Magento 2 Theme Design

By : J Miguel, Richard Carter

2.7 (7)

Magento 2 Theme Design

2.7 (7)

By: J Miguel, 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.

Preface

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Free Chapter

1. Introduction to Magento 2

1. Introduction to Magento 2

What is Magento?

Showcase of Magento themes

Challenges of Magento 2 theme design

Why create a custom Magento 2 theme?

Installing Magento 2

Summary

2. Exploring Magento Themes

2. Exploring Magento Themes

Magento terminology

What makes a Magento theme?

Default Magento 2 themes

Blocks and pages in Magento

Magento theme inheritance

Custom Variables

Good practices in Magento theming

Summary

3. Magento 2 Theme Layout

3. Magento 2 Theme Layout

Magento 2 and Model-View-Controller architecture

Magento 2 Command-Line Interface

Magento 2 theme files

Magento 2 cache system

Magento 2 layout system

Creating your first Magento 2 theme

Creating a theme logo

Applying the theme

Magento 2 theme debug

Summary

4. Magento UI Library

4. Magento UI Library

Magento 2 UI

LESS and CSS preprocessing

LESS compilation in Magento 2

The Magento UI library

Testing the Magento UI library

Summary

5. Creating a Responsive Magento 2 Theme

5. Creating a Responsive Magento 2 Theme

The BookStore theme project

Managing dependencies with Composer

Building the BookStore theme

Developing Magento 2 templates

Summary

6. Magento 2 Styles Debugging

6. Magento 2 Styles Debugging

Increasing productivity by creating flow test styles

Debugging styles in Magento

Using the Grunt task runner to debug

Applying changes to Bookstore with Grunt

Summary

7. Magento UI Components

7. Magento UI Components

The Magento UI components

UI listing/grid component

UI listing/grid secondary components

Form component

UI components control definition file

Magento sample module form

Summary

8. Magento Layout Development

8. Magento Layout Development

The Magento page layout

Layout instructions and types

Layout customizations

Customizing templates

Summary

9. Magento 2 JavaScript

9. Magento 2 JavaScript

Magento 2 JavaScript structure

Initializing and locating JavaScript component

Magento jQuery widgets

Creating a jCarousel component for Promo module

Summary

10. Social Media in Magento 2

10. Social Media in Magento 2

Magento components

Development workflow

Developing the Sweet Tweet module

Summary

11. Theme Development Best Practices

11. Theme Development Best Practices

Why I should worry about it?

Best practices in Magento 2 development

Always use the Magento architecture

Strategies for customizing your themes

Seeking external resources to improve

Summary

12. Magento Theme Distribution

12. Magento Theme Distribution

The packaging process

Packaging your theme

Hosting your theme

Magento Marketplace

Summary

Customer Reviews

2.7 (7)

5 star

28.6%

4 star

14.3%

3 star

0

2 star

14.3%

1 star

42.9%

What this book covers

Chapter 1, Introduction to Magento 2, introduces you to the basic concepts of Magento 2, shows the Magento websites that are on the market, and guides you through building a local development environment Magento 2.

Chapter 2, Exploring Magento Themes, teaches you the structure of the themes in Magento 2, as well as the importance of the Luma and Blank themes.

Chapter 3, Magento 2 Theme Layout, shows you how to work with the Model-View-Controller architecture, the command-line interface, the layout system, and theme debuging.

Chapter 4, Magento UI Library, teaches you how to use the Magento UI library, LESS compilation, and CSS preprocessing.

Chapter 5, Creating a Responsive Magento 2 Theme, guides you to the development of a new theme for Magento 2.

Chapter 6, Magento 2 Styles Debugging, teaches you how to create a flow to test your styles, client-side debugging, server-side debugging, and the Grunt task runner.

Chapter 7, Magento UI Components, teaches you how to work with UI components: listing, grid, a form.

Chapter 8, Magento Layout Development, shows you the layout instructions, and the types, and techniques required to customize your template.

Chapter 9, Magento 2 JavaScript, teaches you how to work with JavaScript in Magento and jQuery widgets by developing a simple extension.

Chapter 10, Social Media in Magento 2, guides you through the development of a new extension that integrates Magento 2 with social media.

Chapter 11, Theme Development Best Practices, shows you the best practices of developing themes for Magento 2.

Chapter 12, Magento Theme Distribution, shows you an overview of the packaging process to sell and share your developed theme.

Search

Your notes and bookmarks