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 is to create Magento 2 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.
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 which 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).
We'll need to add a block which 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.
Got a developer question you'd like to put to the team? Contact us.