Magento 2 – How to Introduce a New Type for Widget Parameter

magento2widget

I am working on an extension which offers custom widgets that include wysiwyg editor and image fields:

<widget id="masonry_category" class="MyCompany\Module\Block\Widget\Category" is_email_compatible="true">
<label translate="true">Masonry: Category</label>
<description translate="true">Category Image with Link</description>
<parameters>
    ...
    <parameter name="featured_image" xsi:type="image" visible="true" required="false">
        <label translate="true">Category Image</label>
    </parameter>
</parameters>

However, as far as I can see, we are not allowed to use these types:

Element 'parameter', attribute
'{http://www.w3.org/2001/XMLSchema-instance}type': The QName value
'image' of the xsi:type attribute does not resolve to a type
definition.

I see some rules for widgets in Magento_Widget:etc/widget.xsd, but I am not sure how would I go about extending this. Unfortunately, the official documentation didn't help me to figure this out.

BTW, one very weird thing about this: I don't see these errors on my local environment (with development mode turned ON + PHP mode for displaying all errors). And my types (editor and image) are working fine. I run into trouble as soon as I deploy the code to our staging environment, which doesn't make sense to me.

Best Answer

Found the solution and wrote a blog post http://mageclass.com/quick-tip-how-to-use-image-wyswyg-or-any-other-non-standard-field-in-magento2-widget/. I am not sure if it's in line with the best practices, the only requirement I had was not to touch the core.

Related Solutions

Magento – Magento2: How to override widget template

you can extend the widget in your module.

To do that your module has to depend on the module where the original widget is defined (see sequence in the module.xml).

Then you create a widget.xml in your etc dir.

The key is, not to use the widget.xsd (there are many fields required that you do not need for extending) but the widget_file.xsd.

Here is an example to add a template to the static block widget:

<?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_file.xsd">
    <widget id="cms_static_block">
        <parameters>
            <parameter name="template" xsi:type="select">
                <options>
                    <option name="option_id" value="Your_Module::view/form.phtml">
                        <label translate="true">Your Template</label>
                    </option>
                </options>
            </parameter>
        </parameters>
    </widget>
</widgets>

Here is another example with a container config, to allow the template for specific containers:

<?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_file.xsd">
    <widget id="products_list">
        <parameters>
            <parameter name="template" xsi:type="select">
                <options>
                    <option name="slider" value="Vendor_Module::product/widget/content/slider.phtml">
                        <label translate="true">Products Slider Template</label>
                    </option>
                </options>
            </parameter>
        </parameters>
        <containers>
            <container name="content">
                <template name="slider" value="slider" />
            </container>
            <container name="content.top">
                <template name="slider" value="slider" />
            </container>
            <container name="content.bottom">
                <template name="slider" value="slider" />
            </container>
        </containers>
    </widget>
</widgets>

Magento – Magento2 – how to configure a widget calendar

I created calendar.js in new mymodule:

   require([
            "jquery",
            "mage/calendar"
    ], function($){
   $("#period_date_start").calendar({
      dateFormat: "M/d/yy",
      showsTime: true,
      timeFormat: "HH:mm:ss",
      sideBySide: true,
      closeText: "Done",
      selectOtherMonths: true,
      onClose: function( selectedDate ) {
        $( "#period_date_end" ).datepicker( "option", "minDate", selectedDate );
      }
   });

    $("#period_date_end").calendar({
      dateFormat: "M/d/yy",
      showsTime: true,
      timeFormat: "HH:mm:ss",
      sideBySide: true,
      closeText: "Done",
      selectOtherMonths: true, 
      onClose: function( selectedDate ) {
        $( "#period_date_start" ).datepicker( "option", "maxDate", selectedDate );
      }
   });

});

Related Topic

Magento – Magento 2, new widget with image chooser parameter, does not save picture