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.
Table of Contents (13 chapters)
12
Index

Adding extra files to the theme


In the previous recipe, we learned how we can make structural changes to the HTML output. However an HTML output is not a completed website. With JavaScript and CSS, we can theme the HTML output.

Getting ready

We will learn how we can add CSS and JavaScript files to our theme. This is a common case when integrating an external JavaScript plugin. To do this, we have to work in the theme folder that we created in the recipe Creating a Magento 2 theme earlier in this chapter.

How to do it…

The following steps describe how we can add extra files to a theme:

  1. Open the frontend and open the HTML source of a page, and have a look at the <head> section. We see that the included JS and CSS files are located in the pub/static map.

  2. If we want to add an extra CSS file we have to configure that in the layout XML files. Open or create the file app/design/frontend/Packt/cookbook/Magento_Theme/layout/default_head_blocks.xml.

  3. In that file add the following content:

    <?xml version...