Magento 2: How to add second template file to Catalog Product List widget

Question

I am trying to add a second widget template option to the backend of Magento 2 so that when I choose the Catalog Product List widget I will get the choice of two templates.

I have created my second template and called it grid2.phtml. When I insert my widget code, I can change template="Magento_CatalogWidget::product/widget/content/grid.phtml to template="Magento_CatalogWidget::product/widget/content/grid2.phtml and the template changes fine on the frontend with no problems.

I am, however, having trouble adding "grid 2" as a template option on the template drop-down of creating a Catalog Product List widget page. I have tried adding this as an option in the widget.xml file (path below) in the following way

/vendor/magento/module-catalog-widget/etc/widget.xml

<parameter name="template" xsi:type="select" required="true" visible="true">
    <label translate="true">Template</label>
    <options>
        <option name="default" value="Magento_CatalogWidget::product/widget/content/grid.phtml" selected="true">
            <label translate="true">Products Grid Template</label>
        </option>
        <option name="grid2" value="Magento_CatalogWidget::product/widget/content/grid2.phtml" selected="true">
            <label translate="true">Grid 2</label>
        </option>
    </options>
</parameter>

But got an error on the frontend. Is there are a way of adding this second template as an option in the dropdown when creating a new widget? Thank you!

Answer 1

In your widget.xml file there are two sections. The first sets out the location of the template files like so:

<parameter name="template" xsi:type="select" required="true" visible="true">
    <label translate="true">Template</label>
    <options>
        <option name="default" value="Gem_CMS::product/widget/content/grid.phtml" selected="true">
            <label translate="true">Products Grid Template</label>
        </option>
        <option name="account" value="Gem_CMS::product/widget/content/grid_account.phtml" selected="false">
            <label translate="true">Products Grid Account</label>
        </option>
        <option name="homepage" value="Gem_CMS::product/widget/content/grid_home.phtml" selected="false">
            <label translate="true">Products Grid Homepage</label>
        </option>
        <option name="email_marketing" value="Gem_CMS::product/widget/content/email_marketing.phtml" selected="false">
            <label translate="true">Products Grid Email Marketing</label>
        </option>
    </options>
</parameter>

The second section defines where the template can be used (the options that display in the dropdown in admin).

<containers>
    <container name="content">
        <template name="grid" value="default" />
        <template name="grid-account" value="account" />
        <template name="grid-home" value="homepage" />
        <template name="email-marketing" value="email_marketing" />
    </container>
    <container name="content.top">
        <template name="grid" value="default" />
        <template name="grid-home" value="homepage" />
    </container>
    <container name="content.bottom">
        <template name="grid" value="default" />
        <template name="grid-account" value="account" />
        <template name="grid-home" value="homepage" />
    </container>
</containers>

The 'value' in this section needs to match the 'option name' of your template from the first section.