Book Image

Magento 2 Development Cookbook

Book Image

Magento 2 Development Cookbook

Overview of this book

With the challenges of growing an online business, Magento 2 is an open source e-commerce platform with innumerable functionalities that gives you the freedom to make on-the-fly decisions. It allows you to customize multiple levels of security permissions and enhance the look and feel of your website, and thus gives you a personalized experience in promoting your business.

Related Content you might be interested in

Current Title:

Small book image
Magento 2 Development Cookbook
Dec, 2015 | 304 pages
No titles found
Table of Contents (18 chapters)
Magento 2 Development Cookbook
Magento 2 Development Cookbook
Credits
Credits
About the Author
About the Author
About the Reviewers
About the Reviewers
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
Upgrading from Magento 1
Upgrading from Magento 1
Introduction
Creating a Magento 1 website with sample data
Creating a Magento 2 website
Preparing an upgrade from Magento 1
Upgrading the database
Using an IDE
Writing clean code with PHP MD and PHP CS
2
Working with Products
Working with Products
Introduction
Configuring the catalog defaults
Working with attribute sets
Working with product types
Adding social media buttons
Embedding an HTML object
Changing the URL of a product page
3
Theming
Theming
Introduction
Exploring the default Magento 2 themes
Creating a Magento 2 theme
Customizing the HTML output
Adding extra files to the theme
Working with LESS
Changing a page title
Working with translations
Adding widgets to the layout
Customizing email templates
4
Creating a Module
Creating a Module
Introduction
Creating the module files
Creating a controller
Adding layout updates
Adding a translation file
Adding a block of new products
Adding an interceptor
Adding a console command
5
Databases and Modules
Databases and Modules
Introduction
Creating an install and upgrade script
Creating a flat table with models
Working with Magento collections
Programmatically adding product attributes
Repairing the database
6
Magento Backend
Magento Backend
Introduction
Registering a backend controller
Extending the menu
Adding an ACL
Adding configuration parameters
Creating a grid of a database table
Working with backend components
Adding customer attributes
Working with source models
7
Event Handlers and Cronjobs
Event Handlers and Cronjobs
Introduction
Understanding event types
Creating your own event
Adding an event observer
Introducing cronjobs
Creating and testing a new cronjob
8
Creating a Shipping Module
Creating a Shipping Module
Introduction
Initializing module configurations
Writing an adapter model
Extending the shipping method features
Adding the module in the frontend
9
Creating a Product Slider Widget
Creating a Product Slider Widget
Introduction
Creating an empty module
Creating a widget configuration file
Creating the block and template files
Creating a custom configuration parameter
Finalizing the theming
10
Performance Optimization
Performance Optimization
Introduction
Benchmarking a website
Optimizing the frontend of the website
Optimizing the database and MySQL configurations
Optimizing the Apache web server
Finding performance leaks in Magento
Configuring OPcache, Redis, and Memcached
Optimizing the PHP configurations
11
Debugging and Unit Testing
Debugging and Unit Testing
Introduction
Logging into Magento 2
Getting started with Xdebug
Running automated tests from Magento
Creating a Magento test case
Index
Index

Working with LESS

In Magento 1, the CSS of a Magento theme was stored in one big CSS file (the styles.css) but in Magento 2, it is completely different. The big CSS file has been replaced by a collection of LESS files.

LESS is a language that is used to generate CSS. CSS is very static. You can't use functions, variables, nesting, and so on but with LESS, you can.

Magento has a LESS pre-processor that generates a CSS file from the LESS files in the theme.

Getting ready

Open your favorite IDE and navigate to the theme folder of the Packt/cookbook theme that we have created in the previous recipes.

Access to a command line is also useful to work with Grunt.

How to do it…

The following steps describe how we can change the layout, such as how Magento 2 does it:

  1. Copy the file app/design/frontend/Magento/blank/web/css/source/_theme.less to the folder app/design/frontend/Packt/cookbook/web/css/source/_theme.less.

    Note

    If you installed Magento 2 using composer, you have to copy the _theme.less file from the...

Previous Section
End of Section 7
Next Section