How to integrate Magento 2 Third Party plugins & Libraries for Front-end?

August 16th, 2017| By

When it’s all about eCommerce development, Magento rule the game. All store owners want to create some unique design for their store, but to create an unique design, front-end developers may have to integrate or use third party plugins & libraries. When it comes to Magento, integrating third party plugins and libraries for the first time is very complex, so here we’ll help you by showing how to install third party plugins and libraries.  

Now let’s start!

First download and add plugin dependency files to project web folder.

You need to download and place your plugin’s CSS and JS files in the directories as shown below:

Add JS:
{Root current Theme folder} / web / js / vendor / espl-knockout / plugin js files
Add CSS:
{Root current Theme folder} / web / css / vendor / espl-knockout / plugin css files

Note:

Here you need to separate js and css files, so that we can identify the project files and third-party vendor files.

If the vendor files contain the SASS/LESS files, then you need to import the plug-in files directly to your main styles files for your theme.

Example.

@import 'vendor/ espl-knockout / my-knockout.js ;
@import 'vendor/ espl-knockout / espl-knockout-default-theme';

Adding the plugin JS library to RequireJS

Using RequireJs, we can automatically load all the required js files in Magento 2 and it also make our created js file globally available to all the modules , and it will work well with  the auto-load system of Magento 2. To make it work, you need to create a file located in your current theme’s root directory.

Created RequireJS file will look somewhat like this

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

Note:

If Magento 2 is in developer mode, then all the files will automatically group or collaborate all requirejs-config.js files into the pub/static/_requirejs. Therefore, you need to refresh this folder for the new requirejs-config.js configuration files to be picked up.

Finding your plugin’s module folder & creating search specific JS

You created espl-knockout.js library, so now you can use it. However, there are some notices for you in order to use it well:

  • Retrieve the correct module name because the format of the name can vary depending on where you retrieve it from.
  • You will see Magento 2’s core module folders in magento vendor / magento / module folder here.
\Magento\Framework\Component\ComponentRegistrar::register(
    		\Magento\Framework\Component\ComponentRegistrar::MODULE,
    		'Magento_Search',
    	__DIR__
);
  • And when creating the module folder, you need to add the Magento_Search / web / js directory structure.

Initializing the module specific JS

To use the created js, first you need to initialize it.

For example below, we name the file search-model.js

require(['jquery', 'espl-knockout.js'], function($){
    $(function(){
 
        $('[data-remodal-id=modal]').remodal();
    });
});

Here you can see, we initialize espl-knockout.js.

Conclusion:

Now you know how to integrate third party plugins and libraries in Magento 2. However, this tutorial is bit difficult to implement, so if you can’t do it well, then you may ask for help. Hopefully this tutorial is helpful for you.

Do you plan to develop a mobile application for your eCommerce business or your startup?

Our eCommerce mobile application development company will be ready to roll out your plan into reality. We develop iOS application development and android application development. Feel free to bring us your idea and get a free quote.