Hello Magento Friends,
In today’s blog, we will learn about how to add an image chooser in the Magento 2 widget.
Magento 2 offers a robust platform for creating custom widgets. Enhancing these widgets with image chooser functionality empowers store owners to visually enrich their content. This guide will walk you through the steps to integrate an image chooser into your Magento 2 widget.
Steps to Add Image Chooser in Magento 2 Widget:
Step 1: Create a widget.xml file in the path given below.
{{magento_root}}\app\code\Vendor\Extension\etc\widget.xml
Now include the below-mentioned code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<?xml version="1.0" encoding="UTF-8"?> <widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd"> <widget id="custom_widget" class="Vendor\Extension\Block\Widget\PageWidget"> <label>Custom Widget</label> <description>Widget Description</description> <parameters> <parameter name="title" xsi:type="text" visible="true" required="true"> <label translate="true">Title</label> </parameter> <!-- Image Uploader --> <parameter name="image" xsi:type="block" visible="true" required="false"> <label translate="true">Image Uploader</label> <block class="Vendor\Extension\Block\Adminhtml\Widget\ImageChooser"> <data> <item name="button" xsi:type="array"> <item name="open" xsi:type="string">Choose Image...</item> </item> </data> </block> </parameter> </parameters> </widget> </widgets> |
Step 2: Create PageWidget.php file in path given below.
{{magento_root}}\app\code\Vendor\Extension\Block\Widget\PageWidget.php
Then add the code as follows
|
1 2 3 4 5 6 7 8 9 10 11 |
<?php namespace Vendor\Extension\Block\Widget; use Magento\Framework\View\Element\Template; use Magento\Widget\Block\BlockInterface; class PageWidget extends Template implements BlockInterface { protected $_template = "Vendor_Extension::widget/page_widget.phtml"; } |
Step 3: Create page_widget.phtml file in path given below.
{{magento_root}}\app\code\Vendor\Extension\view\frontend\templates\widget\page_widget.phtml
Now add the code given below
|
1 2 3 4 5 6 |
<div class="maincontent"> <div class="title"> <span class="widget-title"><?php echo __("Widget Title : "); ?></span> <span class="widget-title-val"><?php echo $block->getData('title'); ?></span> </div> </div> |
Step 4: Create ImageChooser.php file in path given below.
{{magento_root}}\app\code\Vendor\Extension\Block\Adminhtml\Widget\ImageChooser.php
Then add the following code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<?php namespace Vendor\Extension\Block\Adminhtml\Widget; use Magento\Framework\Data\Form\Element\AbstractElement; class ImageChooser extends \Magento\Backend\Block\Template { /** * @var \Magento\Framework\Data\Form\Element\Factory */ protected $elementFactory; /** * @param \Magento\Backend\Block\Template\Context $context * @param \Magento\Framework\Data\Form\Element\Factory $elementFactory * @param array $data */ public function __construct( \Magento\Backend\Block\Template\Context $context, \Magento\Framework\Data\Form\Element\Factory $elementFactory, array $data = [] ) { $this->elementFactory = $elementFactory; parent::__construct($context, $data); } public function prepareElementHtml(AbstractElement $element) { $config = $this->_getData('config'); $sourceUrl = $this->getUrl('cms/wysiwyg_images/index', ['target_element_id' => $element->getId(), 'type' => 'file']); /** @var \Magento\Backend\Block\Widget\Button $chooser */ $chooser = $this->getLayout()->createBlock(\Magento\Backend\Block\Widget\Button::class) ->setType('button') ->setClass('btn-chooser') ->setLabel($config['button']['open']) ->setOnClick('MediabrowserUtility.openDialog(\'' . $sourceUrl . '\', 0, 0, "MediaBrowser", {})') ->setDisabled($element->getReadonly()); /** @var \Magento\Framework\Data\Form\Element\Text $input */ $input = $this->elementFactory->create("text", ['data' => $element->getData()]); $input->setId($element->getId()); $input->setForm($element->getForm()); $input->setClass("widget-option input-text admin__control-text"); if ($element->getRequired()) { $input->addClass('required-entry'); } $element->setData('after_element_html', $input->getElementHtml() . $chooser->toHtml() . "<script>require(['mage/adminhtml/browser']);</script>"); return $element; } } |
Step 5: Create a di.xml in path given below.
{{magento_root}}\app\code\Vendor\Extension\etc\di.xml
Then include the following code
|
1 2 3 4 5 6 7 |
<?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd"> <type name="Magento\Widget\Model\Widget"> <plugin name="image_uploader_solve" type="Vendor\Extension\Plugin\Widget" sortOrder="1"/> </type> </config> |
Step 6: Create a Widget.php in path given below.
{{magento_root}}\app\code\Vendor\Extension\Plugin\Widget.php
Then after, add the below piece of code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<?php namespace Vendor\Extension\Plugin; class Widget { /** * @var \Magento\Backend\Helper\Data */ protected $backendData; /** * Widget constructor. * * @param \Magento\Backend\Helper\Data $backendData */ public function __construct( \Magento\Backend\Helper\Data $backendData ) { $this->backendData = $backendData; } public function beforeGetWidgetDeclaration( \Magento\Widget\Model\Widget $subject, $type, $params = [], $asIs = true ) { foreach ($params as $name => $value) { if (preg_match('/(___directive\/)([a-zA-Z0-9,_-]+)/', $value, $matches)) { $directive = base64_decode(strtr($matches[2], '-_,', '+/=')); $params[$name] = str_replace(['{{media url="', '"}}'], ['', ''], $directive); } } return [$type, $params, $asIs]; } } |
Output:
Conclusion:
Adding an image chooser to a custom Magento 2 widget is a straightforward process that enhances the flexibility and functionality of your widgets. By following the steps outlined in this guide, you can create a more dynamic and user-friendly interface for your Magento 2 store.
Feel free to customize the widget further to meet your specific needs!
Happy Coding!
