Magento 2 Custom Widgets

As highlighted in my previous post, there are some scenarios where Magento 2’s CMS blocks just don’t quite fit the bill.

Magento 2 

As highlighted in my previous post, there are some scenarios where Magento 2’s CMS blocks just don’t quite fit the bill. The developer is limited in how to implement the content, the client is limited by their proficiency with HTML and there is potential for incorrect content to break pages and cause issues for users.

In the previous article, I highlight our approach to this problem at Develo and one of the solutions, amongst our other custom extension developments for eCommerce, is to create Magento 2 custom widgets. 


If you're using Hyvä themes then take a look at our Develo CMS Widgets module for Hyvä and create great looking CMS content easily with our free module

Hyvä CMS Widgets from Develo on Github


The Benefits of M2 Custom Widgets 

Magento 2 custom widgets give you more room to manoeuvre as a developer and provide a more intuitive way for clients to update content across areas of the site. In this blog, I'll show you how to build and implement this.

Basic M2 Module

The first thing you want to do is create a basic Magento 2 module. Instructions on how to do this can be found here and there's also a great online tool that helps you to create module boilerplate's to get things up and running quickly which can be found here. For this tutorial let’s say the vendor is Develo and the module name will be Widgets (Develo_Widgets).

Creating a Block to define the Widget

We'll need to add a block that will define the template for the given widget. Create a Develo/Widgets/MyNewWidget.php file with the following code:

Next, add a Develo/Widgets/etc/widget.xml file. This lets you define the fields you want available with your widget as below:

This is a great widget

The label defines the name of the Widget in the dropdown. When choosing the widget type, the parameters are the individual fields which you'll want the user to be able to update for that particular instance of the widget. In this case they are all of type “text”. (Note: There are other options available here, which I will go through in the next post, but we’ll keep it simple for now.)

The final step is to set up the template for your widget. Create a Develo/Widgets/view/frontend/templates/widget/my-new-widget.phtml (note that this must match the template defined in your block as above). This template has access to the data defined within the instance of the widget and can be implemented as follows:

getData('title'); 
$content = $block->getData('content'); 
$link = $block->getData('link'); ?> 
  

Once this is all set up, run bin/magento setup:upgrade and your widget should now be available.

Great! You're now ready to start implementing Magento 2 custom widgets on your projects to improve how your clients manage their content. The next blog post will build upon what we've created, showing you how to implement different Magento 2 custom widget input types such as dropdown's built from a model and an image uploader.

Note: We recently had a client who needed to implement widgets on a product description which, as of Magento 2.4 is disabled by default. So keep your eyes peeled for a future posts on how to enable this for specific fields.

If you enjoyed this article, read our other Learn articles to see more from our Magento developers or browse the site to see what else we do with Adobe Commerce, PunchOut Catalog and more.

Got a developer question you'd like to put to the team?


...
Ian

share:

Ready to start your next project?

See how we can help you accelerate your business