Magento 2 jQuery Plugins

Below, we’ve gathered some useful Magento 2 jQuery plugins (widgets). Since the Magento 2 platform utilizes a jQuery library for implementing client functionality, it is possible to enhance current ecommerce opportunities with the help of various Magento 2  jQuery widgets. The most reliable solutions are described below.

Magento 2 JavaScript Guide

Magento 2 jQuery Plugins: Accordion Widget

This Magento 2 jQuery plugin is based upon the Magento Tabs widget which is described in this post as well. If you are wondering what accordions do, they break content into several sections, so the usage of space can be reduced.

The source of the accordion Magento 2 jQuery plugin is here:

For further information about the accordion widget, check the official Magento 2 Dev Doc: Accordion Widget.

Magento 2 jQuery Plugins: Alert Widget

With the Magento 2 alert jQuery widget, you get a modal pop-up window which contains a confirmation button.  The window can be implemented within both admin side and storefront. The alert plugin is often used to extend the Magento modal widget.

The source of the alert Magento 2 jQuery plugin is here:

For further information about the alert jQuery widget, check the official Magento 2 Dev Doc: Alert Widget.

Magento 2 jQuery Plugins: Calendar Widget

If you’ve heard about jQuery Datepicker Widget, you should be familiar with the calendar Magento 2 jQuery plugin, since it is its customized version that provides the ability to select data via an in-line or a pop-up calendar. Besides, it offers the following opportunities:

• The calendar Magento 2 jQuery plugin merges the global configuration with several other options.
• It also provides the ability to consider server time zone offsets and convert date and time formats.

As a result, you have to deal with simplified calendar initialization while working with the calendar Magento 2 jQuery plugin.

The source of the calendar Magento 2 jQuery plugin is here:

For further information about the calendar jQuery widget, check the official Magento 2 Dev Doc: Calendar Widget.

Magento 2 jQuery Plugins: Collapsible Widget

The collapsible Magento 2 jQuery plugin is necessary to convert a header/content pair into an accordion to collapse or expand the content on a header click. The widget is initialized for each title/content pair. At the same time the aforementioned accordion jQuery plugin can be initialized for a set of such pairs. If you need to bind several collapsible widget instances, utilize the collateral option.

Once the Magento 2 jQuery widget is expanded, you can update the content via Ajax. As for the collapsed/expanded state, it can be saved into a local storage. Alternatively, it can be saved into cookies, if the local storage is not supported by your browser.

The source of the collapsible Magento 2 jQuery plugin is here:

For further information about the collapsible jQuery widget, check the official Magento 2 Dev Doc: Collapsible Widget.

Magento 2 jQuery Plugins: Confirmation Widget

Being an extension of the Magento 2 modal plugin, the jQuery confirmation widget for Magento 2 is used to implement a modal pop-up window which contains cancel and confirmation buttons within both admin and storefront.

The source of the confirmation Magento 2 jQuery plugin is here:

For further information about the confirmation jQuery widget, check the official Magento 2 Dev Doc: Confirmation Widget.

Magento 2 jQuery Plugins: DropdownDialog Widget

If the standard jQuery UI Dialog widget is not enough for your Magento 2 projects, try this dropdownDialog jQuery plugin, since it is its customized version which can trigger event for opening; provide delay while automatically closing the dropdown on mouse out; and close the dropdown after clicking outside its area.

The source of the dropdownDialog Magento 2 jQuery plugin is here:

For further information about the dropdownDialog jQuery widget, check the official Magento 2 Dev Doc: DropdownDialog Widget.

Magento 2 jQuery Plugins: List Widget

With the aid of the list jQuery plugin for Magento 2, you can easily move items between content sections  via links and buttons.

The source of the list Magento 2 jQuery plugin is here:

For further information about the list jQuery widget, check the official Magento 2 Dev Doc: List Widget.

Magento 2 jQuery Plugins: Loader Widget

If you are looking for a Magento 2 jQuery plugin that blocks page content, pay attention to the loader widget. It is able to block  all content as well as its certain part. As for intended use, the loader widget blocks content during an Ajax request. Additionally, you can initialize the plugin for non-Ajax tasks.

The source of the loader Magento 2 jQuery plugin is here:

For further information about the loader jQuery widget, check the official Magento 2 Dev Doc: Loader Widget.

Magento 2 jQuery Plugins: Menu Widget

With the Magento 2 jQuery menu widget, you get a customized version of the jQuery UI Menu widget. Unlike the default solution, the plugin can expand all menu tree layers past the second layer; declare a responsive menu; and set a hover delay.

The source of the menu Magento 2 jQuery plugin is here:

For further information about the menu jQuery widget, check the official Magento 2 Dev Doc: Menu Widget.

Magento 2 jQuery Plugins: Modal Widget

A solution that provides the ability to run a secondary window on top of the main one is the Magento 2 jQuery modal widget. With the overlay and modal content, the plugin can be configured as a popup or a slide. As a developer, you can easily control the stack of modal widgets as well as set up special buttons for your action bar.

The source of the modal Magento 2 jQuery plugin is here:

For further information about the menu jQuery widget, check the official Magento 2 Dev Doc: Modal Widget.

Magento 2 jQuery Plugins: Navigation Widget

Another customized UI Menu widget is the navigation Magento 2 jQuery plugin. The default functionality is improved with the ability to expand all menu tree layers past the second one. Besides, it is possible to set a limit for the list items quantity. And there is a method designed to handle the menu’s responsive layout.

The source of the navigation Magento 2 jQuery plugin is here:

For further information about the navigation jQuery widget, check the official Magento 2 Dev Doc: Navigation Widget.

Magento 2 jQuery Plugins: Prompt Widget

Another modal popup window can be implemented with the help of the prompt Magento 2 jQuery plugin. Unlike other similar solutions, it offers an input field in addition to a cancel and a confirmation buttons. The popup is available for both admin and client sides.

The source of the prompt Magento 2 jQuery plugin is here:

For further information about the prompt jQuery widget, check the official Magento 2 Dev Doc: Prompt Widget.

Magento 2 jQuery Plugins: QuickSearch Widget

If you have a certain field and need to populate a list of suggested search terms for it, the quickSearch Magento 2 jQuery widget is a solution that will come in handy.

The source of the quickSearch Magento 2 jQuery plugin is here:

For further information about the prompt jQuery widget, check the official Magento 2 Dev Doc: QuickSearch Widget.

Magento 2 jQuery Plugins: Tabs Widget

The tabs jQuery widget is another useful tool designed to implement single content area within several panels. Each panel is associated with an appropriate header from a list. The plugin utilizes the collapsible widget.

The source of the tabs Magento 2 jQuery plugin is here:

For further information about the tabs jQuery widget, check the official Magento 2 Dev Doc: Tabs Widget.

__________

It was our list of Magento 2 jQuery plugins. Which of them do you use in your Magento 2 projects? Please share your experience with us and other readers in comments.