Extending Magento 2 default JS components – Sample 1

Since Magento 2 is actually out for rather time right now as well as brand-new jobs based upon the system are actually swiftly moving toward, there is actually certainly that our experts, as developers, require to become thoroughly gotten ready for the problem.

In this post I will definitely show just how to cope with system’s default javascript components (widget circumstances). More specifically, a javascript part responsible for the web site main navigation performance. If you are actually curious, simply always keep analysis.

Introduction

Frontend aspect of the main navigation in Magento 2 is actually to some extent built along with javascript reasoning responsible for the various actions reaching coming from makeovers for mobile phones to float hold-up time for computer. In very most scenarios, default strategy is going to be adequate as well as are going to deal with primarily all needs, however often, in the event that when a task needs specific/custom strategy, one way or another our experts’ll locate our own selves in a scenario to tweak the default reasoning.

Let’s placed our own selves in a posture where our job needs specific alterations to the main navigation javascript component. First traits initially, we need to recognize some general file style as well as technologies associated with the method.

Magento 2 makes use of Require JS which is actually AMD or even asynchronous module loading machine as well as jQuery/jQuery UI library as a foundation for producing javascript components presently found on the device.

I will not go additionally in to requireJS however if you require to find out more concerning it, you can easily have a look at our blog post dealing with this subject matter in additional information. Also, I will firmly recommend going to requireJS web site to get strong principles of AMD as well as requireJS general consumption prior partnering with Magento 2.

Another crucial details is actually that jQuery UI widget factory is actually made use of to supply quick and easy extendible approaches, rather identical to aged model class strategy in Magento 1. If you are actually certainly not accustomed to jQuery UI gizmos, I firmly recommend going to learn jQuery web site along with widget factory instances to get accustomed to the idea.

Extending the nonpayments

Main file responsible for the performance of the navigation menu is actually menu js found under [project_root]/lib/web/ mage/ to name a few default js device components.

Now, if our experts wan’t to extend or even overwrite it, our experts’ll require to ensure our experts are actually complying with these actions.

Step 1

To correctly extend component of menu js along with our custom-made content, 1st step is actually to map our js file so the device tons it rather than the default file.
Magento makes use of requirejs-config. js files to properly map js components on the device. First point that issues is actually to recognize where to put requirejs-config. js It may be put on many amounts.

All requireJS setups are going to be actually combined as well as implemented in the complying with purchase:

• module level
• theme module level (parent theme)
• theme module level (present theme)
• theme level (parent theme)
• theme level (present theme)

Let’s find just how it deals with one actualexample Default file is actually menu js as well as our experts intend to change it along with our custom-made one. Pay focus that I are going to still pack default menu js file after that as an addiction.

We require to make our file that are going to change the menu js file Let’s call it menu- custom.js as well as area it under [current_theme]/web/ js/ directory

Step 2

Next, we need to make requirejs-config. js file as well as area it under [current_theme]/ origin directory That technique our experts may properly map our file to change the default one. See the example under:

 var config  =  {
    "map":   {
        "*":   {
            "menu":  "js/menu-custom"
        } 
.
} 
} ;

To be actually truly certain if the treatment was actually an effectiveness, ensure to sign in developer devices if the brand-new file is actually packed.

(*2 *)

Step 3

Now the enjoyable component! We wan’t to extend default capability as well as this is actually where jQuery widget factory enters into play. We are going to put the complying with code to our recently generated menu- custom.js file

Check the example under:

define([
    'jquery',
    'jquery/ui',
    'mage/menu'
],
    function($) {.
$.widget(' simplemagento.menu', $. magemenu,  {.
_ init:  function ()  {
                alert("I'm simplemagento");
            } ,
toggle:  function ()  {
                alert("I'm simplemagento");
            } 
    } );
    return $. simplemagento.menu;
    } );

What our experts can easily find coming from the above example is actually that our experts are actually utilizing need js to define our dependences. First one is actually jquery, 2nd is actually jquery/ui as well as the final one is actually mage/menu
This implies that our writing is going to certainly not be actually packed till those 3 are actually completely packed, considering that our reasoning swears by.

Our custom-made widget instance knowned as simplemagentomenu is actually extending default $. mage.menu as well as in this example for this tutorial I am actually extending 2 methods, _ init as well as button Toggle method supervises to toggle navigation on mobile phones as well as tablet computers while _ init method supervises for the part initialization.

Original button method example coming from default menu js

 toggle:  function ()  {
             if ($('html') hasClass(' nav-open'))  {.
$('html') removeClass(' nav-open');
setTimeout(function ()   ,  300);
            }   else  {.
$('html') addClass(' nav-before- open');
setTimeout(function ()  {.
$('html') addClass(' nav-open');
                } ,  42);
            } 
        } ,

Overriding the file

In some scenarios (although in pretty unusual ones) you will locate your personal in an opening to completely bypass the menu reasoning (make custom-made navigation). In that certain situation, our experts may administer step 1 as well as step 2 as well as make custom-made navigation reasoning in menu- custom.js file

And that’s it! We have actually properlyextended default menu jswidget instance Procedure may be related to any type of widget instance presently offered on the device.

Hopefully this write-up is going to aid somebody hoping to attain the exact same objective.

In situation you experience you require some added assistance, our experts can easily give you a detailed custom report based on our technical audit — do not hesitate to get in contact as well as find what our experts may do for you!

Happy coding.