How to create Magento 2 widget

In this article we’ll learn how to create widgets for Magento 2. Widget allows nicer way to edit/add content inside CMS blocks or page. Through the simple module we’ll show how we can create simple widget.

I guess you know how to create a module, but let me quickly show you step by step.

So, here is the list of files we’ll create:

  • app/code/Cookiecode/WidgetBlock/Block/Widget/CustomWidget.php
  • app/code/Cookiecode/WidgetBlock/etc/module.xml
  • app/code/Cookiecode/WidgetBlock/etc/widget.xml
  • app/code/Cookiecode/WidgetBlock/Model/Config/Source/WidgetWidth.php
  • app/code/Cookiecode/WidgetBlock/view/adminhtml/web/images/widget_block.png
  • app/code/Cookiecode/WidgetBlock/view/frontend/templates/widget/custom_widget.phtml
  • app/code/Cookiecode/WidgetBlock/registration.php

The name of our module is “WidgetBlock”. So, let’s start as usual with “registration.php” and “module.xml”.

registration.php

etc/module.xml

 

Next, we’ll create “etc/widget.xml” and add our widget fields. Let’s see structure:

The structure of this file is very readable, but we’ll explain some parts of above code.

Tag “widget” contains block class “Cookiecode\WidgetBlock\Block\Widget\CustomWidget” this class is decelerate within “Block/Widget/CustomWidget.php”. The class instructs our widget which template to use.

Attribute “placeholder_image” called the image which is visible when you add widget to content. See the image

Widget placeholder image

More less structure of parameters/fields is very similar to store configuration xml.

For example, we can add custom options inside select or multi-select parameters:

Code above called source model with custom options. We’ll see this model after. However inside widget we can define custom options easier. Let me show you how:

This way we can define option easier, however, if we get some option value from database in this case we’d need to use source model way to show it.

Next we’ll show how we can define source model WidgetWidth.php.

Next snippet of code shows how to define a block for the widget. We’ll define construct which inherits parent construct of magneto default block interface, and we’ll set our template here. Let’s see how it looks.

Next, we’ll see what contain our widget template “custom_widget.phtml”.

Here you can see how to pick up the value form widget parameters. It’s very simple “$this->getData(‘cc_content’)”.

What is our result? Let me show you how it looks inside Magneto Admin. When you try to add our widget called “Cookiecode – Demo Block widget” you’ll see this:

Cookiecode - Demo Block widget

Regarding our example we’ll create page called “Cookiecode demo page” and add the widget into the content. After saving the changes, we can see our widget on the frontend.

custom-widget-frontendHope this helps, throughout this article we’ve learned how to create simple widget and use it in Magento. Inside widget we can implement great deal of functionality, but it will be explained in some of the future articles.

Here you can download this quick module.

https://github.com/mtunukovic/Cookiecode_WidgetBlock

Enjoy!

 

8 thoughts on “How to create Magento 2 widget”

  1. Hi,

    Suppose i want the widget to be like the category list widget BUT not showing the name but the pic from the category?

    What should i do?

    1. Hi Ed,

      that scenario should be pretty easy. You need load category collection within your template and show image of category if it exists. I will try to write article on similar theme, following months.

  2. xsi:type=”textarea” that you’re using for cc_content is invalid XML. How should I solve it if I want a textarea (or even better: a WYSIWYG)? Any idea?

  3. Since we declare the template in the Block, how can we dynamically let the user choose which template should be used, without losing the access to $this?

    Like, something like:
    $this->setTemplate($this->getData(‘template’));

    When having a select with the name “template” where its values are the paths to the desired template.

  4. And yes, nine times through ten, somebody on a business enterprise network is
    trying to sell something Harmon Discount Coupon Choices begin our organizing voyage great wolf
    lodge discount coupons So the following thing I’m going
    to inform you discount contact lenses coupon What each and every
    know – and stay to surmise – will be the race
    of your suspects coupon codes

  5. Hi. thnaks for this tutorial.
    However, on Magento 2.1, the new widget didn’t appear on the choice list…(i ‘ve downloaded the master from git)…any idea ?

    thanks

Leave a Reply to Marko Tunuković Cancel reply

Your email address will not be published. Required fields are marked *