Magento – Add custom template to existing widget (product_list)

magento2templatewidget

I would like to make use of a product list widget but I need to use it with my own template file.

I want to create a widget via content -> widgets. This is different from utilizing a widget from a CMS page or block.

enter image description here

But there is only the default "Products Grid Template".
So I found this post: Magento2: How to override widget template

But the solution explained does not work.

I am using magento 2.2.3. I created a custom module…

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="module.xsd">
<module name="Vendor_Module" setup_version="0.0.1">
    <sequence>
        <module name="Magento_CatalogWidget" />
    </sequence>
</module>

…with a widget.xml in the module's etc/ folder:

<?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" class="Magento\CatalogWidget\Block\Product\ProductsList" is_email_compatible="true" placeholder_image="Magento_CatalogWidget::images/products_list.png" ttl="86400">
    <parameters>
        <parameter name="template" xsi:type="select" required="true" visible="true">
            <label translate="true">Bestseller</label>
            <options>
                <option name="bestseller" value="Vendor_Module::widget/bestseller.phtml">
                    <label translate="true">Bestseller</label>
                </option>
            </options>
        </parameter>
    </parameters>
</widget>

And put my template file in 

app/code/Vendor/Module/view/frontend/widget/bestseller.phtml

Cleared all caches but the template won't show up as an option in the widget's admin interface.

Any idea what could be wrong here?

Thank you

EDIT:

This template thing does not make any sense. I tried to dig into this by looking at other modules.

I took the mageplaza blog extension for instance. It comes with a similar widget:

<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd">
<widget id="mageplaza_blog_posts" class="Mageplaza\Blog\Block\Widget\Posts">
    <label translate="true">Mageplaza Blog</label>
    <description>Mageplaza Blog Widget </description>
    <parameters>
        <parameter name="title" xsi:type="text" required="false" visible="true">
            <label translate="true">Title</label>
        </parameter>
        <parameter name="post_count" xsi:type="text" required="true" visible="true">
            <label translate="true">Numbers of Posts Display</label>
            <value>5</value>
        </parameter>
        <parameter name="show_type" xsi:type="select" required="false" visible="true"
                   source_model="Mageplaza\Blog\Model\Config\Source\WidgetShowType">
            <label translate="true">Show Type</label>
        </parameter>
        <parameter name="category_id" xsi:type="text" required="true" visible="true">
            <label translate="true">Category ID</label>
            <depends>
                <parameter name="show_type" value="category" />
            </depends>
            <value>2</value>
        </parameter>
        <parameter name="template" xsi:type="select" required="true" visible="true">
            <label translate="true">Template</label>
            <options>
                <option name="posts" value="Mageplaza_Blog::widget/posts.phtml" selected="true">
                    <label translate="true">Default Posts Template</label>
                </option>

                <option name="posts2" value="Mageplaza_Blog::widget/posts2.phtml">
                    <label translate="true">Default Posts Template2</label>
                </option>
            </options>
        </parameter>
    </parameters>
    <containers>
        <container name="content">
            <template name="posts" value="posts" />
        </container>
    </containers>
</widget>

Now when I expand the widget.xml inside the module:

<options>
<option name="posts" value="Mageplaza_Blog::widget/posts.phtml" selected="true">
    <label translate="true">Default Posts Template</label>
</option>

<option name="posts2" value="Mageplaza_Blog::widget/posts2.phtml">
    <label translate="true">Default Posts Template2</label>
</option>

This does not have ANY effect whatsoever. There is no way to select the second template. It sticks to "Default Posts Template".

Best Answer

Each answer has a point but I want to add one warning:

When trying to make this work, I was matching the <option> name with the <template> name. Instead, make sure matching to match the <option> name with the <template> value. Otherwise, it won't work:

<?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="template-one" value="Company_Module::product/widget/content/template-one.phtml">
                        <label>Template one</label>
                    </option>
                    <option name="template-two" value="Company_Module::product/widget/content/template-two.phtml">
                        <label>Template two</label>
                    </option>
                </options>
            </parameter>
        </parameters>
        <containers>
            <container name="content">
                <template name="template_one" value="template-one" />
                <template name="template_two" value="template-two" />
            </container>
        </containers>
    </widget>
</widgets>

If you still have issues with displaying new templates, here's the method where the magic happens: \Magento\Widget\Model\Widget\Instance::getWidgetSupportedTemplatesByContainer(). You can figure out what's going wrong by adding some debug code there.

Related Topic