Three jQuery Widgets That Will Speed Up Your Magento Development

With its focus on customization and extensibility, Magento 2 offers a powerful suite of tools for frontend developers to create user experiences that are perfectly catered to the needs of their clients. The increasing complexity of eCommerce websites is always being balanced against a growing expectation among consumers for simple and intuitive presentation of content. […]

By Yun Liu

With its focus on customization and extensibility, Magento 2 offers a powerful suite of tools for frontend developers to create user experiences that are perfectly catered to the needs of their clients. The increasing complexity of eCommerce websites is always being balanced against a growing expectation among consumers for simple and intuitive presentation of content. When UI designers pull out all the stops to meet these needs, the frontend developer is often faced with a laundry list of specialized functionality.

Fortunately, Magento provides a shortcut to solving many UX challenges in the form of jQuery widgets. Magento’s official documentation includes a library of 15 commonly used content presentation tools that can be adopted and customized by the frontend developer with relative ease. In this article, we’ll look at examples for implementing three of them: Tabs, a popup dialogue and an accordion list.

Example 1: Tabs

This widget will create tabbed content to save space on the frontend. To begin, we’ll build a basic markup structure for the content:

tab1 content
tab2 content
tab3 content

Now, there are two possible methods of initiating the widget. One method is to add a JSON attribute string in the containing element:

...

The other method is to include a <script> tag above the closing </body> tag in your template. This method is preferred if you want to extend the options of the widget:

...

This is all it takes to enable tabbed content. Now it just needs to be styled. Optionally, you can use Magento’s LESS mixin to simplify this as well. Just add some class names to the markup:

tab1 content
tab2 content
tab3 content

…and then include rules for .lib-data-tabs() in your LESS file. For example:

.tabs-wrapper {		
	.lib-data-tabs();
	border-bottom: 0;
        margin-left: 0;
        margin-right: 0;
        text-align: center;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        margin-bottom: 0;
}

For example, we used Magento’s jQuery Tab widget to break a “Featured Products” section into three tabbed carousels:

A full list of the options available for the Tabs widget can be found here.

Example 2: Dropdown Dialog

A dropdown dialog is useful for displaying content in an element that becomes active on tap or hover. A good example of this is in the mini-cart. In fact, we can see the Dropdown Dialog widget in action in the mini-cart template file (vendor/magento/module-checkout/view/frontend/templates/cart/minicart.phtml):

getChildHtml('minicart.addons') ?>

By simply following this markup, we can create a dropdown dialog element of our own:


This widget has a set of options that can be used to customize its look and functionality. For example, we can use “appendTo” to specify the parent of the dropdown element, or we can set “closeOnMouseLeave” to make the dropdown close when the user is no longer hovering over the element.

We can also add buttons using the “buttons” option. In this example, we’ve a close button in the dropdown window so that it can be closed by clicking on the “X”:

For this case, we’ll initiate the widget using the the <script> element, since defining a function for the button object would be difficult or impossible using the JSON object in the “data-mage-init” attribute.



As you can see, we’ve used the widget options to define the dropdown dialog’s parent and trigger elements, closing functionality and class toggles, as well as defining a function for the “close” button. With a little styling, we’ll get a dropdown that looks like this:

Example 3: Accordion

The accordion widget is an extension of the tabs widget, and is useful for FAQ and feature sections. The markup structure is nearly identical to the tabs widget, except for the contents of the “data-mage-init” attribute:

Title 1
Content 1
Title 2
Content 2
Title 3
Content 3

Alternatively, you can initialize the accordion widget using the <script> element, which will make it easier for you to use the available options:


These options will allow you to specify which accordion tab (if any) is open by default and whether multiple accordion tabs can be open at the same time. With some styling, we can create a result like this:

Conclusion

Magento’s included jQuery widgets are a great way to save time and reduce the complexity of frontend development. We highly recommend that you take a few minutes to review all the available widgets—you may find that you’ve been doing unnecessary work with other integrations to solve simple problems like modal popups and galleries.

Front End Developer