Creating Custom Magento 2 Widgets

WhatIs defines a widget as a graphical user interface (GUI) element that provides the user with a unique way of interacting with an application or the operating system. In Magneto 2, widgets are small blocks that have definite functions on your website.

Customizable widgets make life easier. Magneto 2 developers have made it possible for store administrators to add features and interactive interfaces in the front-end without any overt programming knowledge - although you will still need to know your way around Magneto to be able to do that.

Magneto 2 comes with a wide array of widgets, but necessity may demand you tweak their functionality, or create your own with an increased selection of customized options. Creating your own widgets is a great way of extending the functionality of built-in widgets.

Creating a widget in Magneto 2 is not complex. It is similar to using a simple module to build an optimized front-end extension. The emphasis of this article is how to create a custom widget on magneto - and it has been detailed in the simplest way.

Types of widgets offered by Magneto 2

Magneto 2 is the newest version of the Magneto platform. It supports different types of widgets including a tag cloud, categories, calendar, navigation menu, recent posts, search, and much more. The functionality of the store and user-experience can be improved by a store administrator using the widgets. Those using Magneto 2 for eCommerce purposes will find the widgets mentioned below invaluable.

1. Orders and Returns

This widget provides quick access to orders and returns for online shoppers. A user that wants to review an order or a returned product will only be required to fill the necessary parts of the form, such as billing the last date, Order ID, Find Order by, and so on.

2. Recently Compared Products

Many eCommerce websites have this widget. It displays products you recently viewed in a catalog page’s sidebar. Depending on the theme, you may see them in your store. The number of products listed in a single block can be configured - and this is crucial.

4. Catalog Product List

Almost every eCommerce website has the “featured product” section which falls under the catalog product list. Promotional products are mostly placed on the home page with a brief detail on price and an option to add to wishlist or cart.

Creating an Extension

You can’t possibly buy a car without having a place to park it, and so it is with widgets. The first step to creating a widget is to make provision for where you will put it. A vendor folder app\code will come in handy with the vendor folder having a module folder. Two files need to be contained in the module folder: etc\module.xml and registration.php.

You should already have an idea of why the files need to be present as this article will not cover their in-depth code. If you need a guide on creating a custom module, you can have a look at this tutorial. The <sequence> tag in etc\logWidget is a command that instructs Magneto to load Magneto_CatalogWidget before the extension.

Widget Layout

Once the extension has been created, you can go ahead with building the widget. To create the widget layout, you must create etc\widget.xml. Build a <widget> inside a <widget> tag which should contain parameters for the widget configuration. Your widget ID should be the same as the name the widget will bear. You can use any name, but, for this tutorial, we will call it classyllama_products_list.

The class block will be created to control how the widget functions. By creating the class, the functionalities of Magneto\CatalogWidget\Block\Product\Productslist block will be extended. Optionally, you can include the placeholder_image which gives a pleasurable view to the WYSIWYG.

The widget should have a list of all the parameters that will be needed for the WYSIWYG editor. The name of each of the parameters should be logical, since you will need to reference it in the widget block. When extending a Magneto block, the names you use should tally with the ones in the core product. The term ‘type’ refers to the type of input to be used in the backend during the widget configuration. The option’s visibility in the form during configuration is controlled by ‘visible’. There is a <label> tag within each parameter tag, and its function is to set the option’s label. Parameters that have the <depends> tag will only pop up when the specified parameter in the depends tag has a value that is modeled on this tag. The <value> tag sets the default value for a particular parameter. The last parameter is ‘select’ which needs a source_model that is clearly defined, like products_sort_order and products_sort_by, or an <option> tag.

Create a Block

The next step after understanding the widget.xml file is to create a ProductsList.php file which should be found at Block\Product\ProductList.php. Since this is merely an extension of \magneto\CatalogWidget\Block\Product\ProductsList.php there is no need to rewrite existing methods. ‘createCollection()’, however, has to be rewritten with the addition of two new functions using setOrder(). There are two parameters contained in this function: a string that stipulates the sorting order (whether it should be ascending or descending) and a string containing a list of what you want to sort.

Create the models

The creation of the widget’s blog and layout gives room for the models to be created. Models are simply files assigned as source_model for the layout’s widget parameters. The purpose of this file is to return a collection of options. You need to create two files for this: Model\SortOrder.php and Model\SortBy.php. The two separate files have toOptionArray() as their only method. Its function is to return a list of possible options for the widget parameter. There is a value for each of the options which are visible to the user when viewing the options.

Flushing the cache and saving the widget can be done either through a command line, using php bin/magneto cache:flush and php bin/magneto cache:clean or from admin.

Running Test

Once the custom widget has been created, your job is over - except for one task. You need to test the widget to make sure it works as required. To add the widget to the homepage, navigate through the backend to the WYSIWYG until you get to the homepage, and add the custom widget. If all goes well, your widget should show up on your homepage.

This is obviously not a fully customized Magneto 2 widget, but will be highly instrumental as a learning aid. If you are new to Magneto 2 and need to have a full glimpse of what it’s all about, the best place to begin is the Magneto 2 documentation. Alan Kent’s blog is awash with resourceful contents which should be able to guide you through the length and breadth of Magneto.

It is safe to view custom widgets as part of a bigger picture. This is because your Magneto 2 projects can be kicked up a notch with the help of custom widgets. It helps you to add different items to your homepage. The developer is allowed to explore their creativity. You can also find great jobs on creating custom widgets on Freelancer.com – this could help you put all you have learned into practical.

Improving experience with awesome designs are client gains, but there are also subtle gains available to the admin. The obvious one is the amount of time it can save the admin – which is, probably, everyone’s target.

Have you tried your hand at creating a custom widget with Magneto 2? Share your experience with us in the comment box below, and don’t forget to share this post with your friends if you found it helpful.