#RealMagento: Installing Magento 2 Front – End Plugins – Rapid Read Tutorial

Third Party Plugins and Libraries for frontend, (not to be confused with Magento’s own plugins system) offer quick UI functionality solutions, however getting them off the ground on Magento 2 can be a little daunting at first. This article will show you how to add and initialize a third-party plugin/library intended for front-end development. We’ll be using remodal.js as an example, which we will use to turn our theme’s global search bar into a modal box. Now, onward to installing Magento 2 front-end plugins!

Note: this article is intended for Front End Dev’s who are new to the Magento 2 Platform

In a hurry? Go to TL;DR by clicking here.

1. Download and add plugin dependency files to project web folder:

Download and place your plugin’s CSS and JS files in the following directories:

ADD JS:
yourTheme / web / js / vendor/ plugin js files here

ADD CSS:
yourTheme / web / css / vendor / remodal / plugin css files here

HINT: here at Demac, we typically separate our third-party css/js files into a separate folder called as a means to prevent mixing-up in house project files and third party vendor files.

If using SASS/LESS don’t forget to import the plugin files to your main styles files for your theme.

Ie.

@import 'vendor/remodal/remodal';
@import 'vendor/remodal/remodal-default-theme';

2. Adding the Plugin Library to RequireJS

RequireJS is another important addition to the workflow of Magento 2. RequireJS’s purpose in the Magento 2 landscape is to autoload required modules. This works really well with how modularization works in general, and with the autoload system. It acts as way to make your theme’s JS globally available to all your modules. To do this you will need to locate or create the file which is located in the root of your theme’s directory.

var config = {
    "map": {
        "*": {
            "slick": "js/slick",
            "theme": "js/theme",
            "remodal": "js/remodal.min",
            "unveil": "js/jquery.unveil",
            "smartresize": "js/smartresize"
        }
    }
};

What the above code shows us, are the various JS files and libraries that we’ve added to the project including our remodal.js files. Take a look at the list of key/value pairs encased in the curly braces. For our plugin to work, it will need to follow this pattern. The left side of the colon is the module ID and the right side is the relative path to the JS files — also: there’s no need to include .JS extension.

Note: Magento2 in developer mode will automatically group / collaborate all requirejs-config.js files into pub/static/_requirejs folder. This folder will need to be refreshed for new requirejs-config.js configuration files to be picked up.

HINT: be sure to keep in mind what the module ID. As we’ll be using this later on.

We’re done here, now we need to track down the correct module folder where our module specific JS will reside.

3. Finding Your Plugin’s Module Folder / Creating Search specific JS:

We now have the remodal.js library defined. We’re ready to use it.

One of Magento 2’s most notable revisions is it’s folder structure. As you can see the file structure is comprised of various folders, that act as modules. Each module corresponds with a particular section of the site’s functionality. Since we’re adding a plugin to our theme’s search bar, we’ll need to find the appropriate module folder for Search which in this case is called Magento_Search.

If this folder already exists in your project’s theme, carry on to the next step, otherwise you will need to copy it over from the parent theme.

There’s a few things to bare in mind when copying over a module folder.

First, retrieving the correct module name. The format of the name can vary depending on where you retrieve it from. For instance, in this case Magento 2’s Blank Theme gives us the correct name (Magento_Search), but if you are unsure check Magento 2’s core module corresponding folder’s registration.php file.

HINT: you will find Magento 2’s core module folders in magento / vendor / magento / module folder should be here


\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Magento_Search',
    __DIR__
);

The dark text in between the apostrophes shows us the correct folder name that you should use.

Once you’ve created the module folder, you will need to include the following directory structure:
Magento_Search / web / js

4. Initializing the Module specific JS + Including it in your XML

Within the web/js directory is where you will initialize the plugin specific JS.
In this example we’ve called the file: search-modal.js


require(['jquery', 'remodal'], function($){
    $(function(){

        $('[data-remodal-id=modal]').remodal();
    });
});

There’s a few things to note here.

First, the formatting of this file is wrapped in RequireJS’s tags. On the first line we declare what JS dependencies our code will be relying on. Since we know that our plugin uses Jquery we’ll need to declare that as well as our plugin’s specific JS (remoda.jsl) using the module ID’s declared in the file.

Following along the same line you will see that we’ve passed a ‘$’ as a parameter. This allows us to claim it as an alias without the need of .noConflict, in this context $ = jQuery, as is common convention.

Next, between the RequireJS tags we place the code that instantiates our plugin and we are good to go.

We have now laid down most of the groundwork to get our plugin/library up and running. Our second last step is to include our new file (search-modal.js) into the head tag of our project.

Within the Magento_Search directory create a layout folder and an xml file, again if you’re unsure of what to call it refer to Magento 2’s core directory and navigate to the module-search folder. Most likely you will need to create an xml file called default.xml.
Call your new js file between NOTE: if after following these steps you find that your newly added JS is still not appearing, try clearing your cache. You can do this via your terminal via the magento directory and running “php bin/magento cache:flush” or better yet use the shorthand “php bin/magneto c:f”

In Summation aka – TL;DR


ecommerce, website design, demac media, magento 2, automated testing, magento ecommerce,magento 2 testing

  1. Download your plugin/library and place its CSS/JS files into their respective ‘yourtheme/web’ directories.
  2. Declare your JS via using the appropriate key/value pair syntax
  3. Locate/create module directory and place your module specific JS in the module’s ‘web’ directory.
  4. Call your newly created module JS via XML

That about completes our first Front-End Magento Rapid Read Tutorial, Hope this has helped, and see you on the interwebz