Magento 2: How To Add New Widgets?

The static content of a web-site should be managed. Magento 2 can propose an effective tool for this purpose – it is CMS (Content Management System). Three elements form this tool, such as widgets, blocks and pages. Pages help us to regulate content of the whole page. Content of the page elements can be edited with the help of blocks. There is some similarity between static blocks and widgets, but the distinction also takes place. If parameters of a block must be changed, it can be done only by means of a special program.  Widgets make possible inserting different content into static pages or blocks. Parameters of widgets are configurable, and you can set them up using the admin panel.

Magento provides some widgets that can be used off the shelf. If you need to add some widget to a page or block, you should follow these steps:

·       go to the admin panel and then to the edit tab;

·       in WYSYWYG editor of the field “Content” click “Add Widget”;

·       choose from the pop-up menu the widget to insert and its configure parameters.

For instance, if the chosen widget is “Recently Viewed Items”, you can choose the items to display and one of the predetermined parameters. We mean a standard set of widgets, but sometimes a custom widget would be of use. The information can be displayed in different places with its help, furthermore many options are available. 

It would be a good example to consider some widget that makes possible adding a block with your name, gender, email address and telephone number. With its direct help a block with various contact data can be displayed.

A custom extension Atwix_Widget is used for adding a new widget. There are three needed files with a special content for a new Magento 2 extension to become initialized. They are etc/module.xml, registration.php and composer.json.

The new widget must have an additional XML configuration. To accomplish this, we need a file with a special content. In Magento we can find this file in [module_dir]/etc/widget.xml. Then we add it to our own extension.

The unique ID is characteristic for each widget (for example, “atwix_contact”). A block class is used for rendering the widget out. A block can be either empty or with logic. The latter can be accessed from its template.

The widget scope contains parameters with the following options:

·       parameter type;

·       sort order (shows a place of the parameter in the admin panel among others);

·       visibility (whether the field to be shown or hidden in the admin panel).

The first option, parameter type, depends on the way of presenting it in the admin panel. For example, for a text it would be a field for input, for a selecting option – a dropdown. A special input type according to your needs also can be created. One of such types is Magento\ Catalog\ Block\Adminhtml\Product\Widget\Chooser type. A unique label is characteristic for each parameter of a widget. Special built-in tools used for internationalization can be of use for translating.

A new widget must be displayed in a right format. For this purpose a template including HTML should be created by means of a special method – it’s called setTemplate(). This method is used inside the block class. But we need to mention that the template should be assigned to the widget using some specific way. Namely, it should pass the widget as a parameter named “template”. The latter includes some special content.

The next step is to make the extension enabled. For this purpose you can use the commands from Magento installation root directory.

Then you have to insert your widget called “Contact Details”. Do it on the opened CMS page or block. Save the changes and flush cache. That’s all, you’ve done it!

Comments (0):
Leave a comment:
*Your comment will be published after approval by site administrator.