4
votes

I'm adding a featured products widget to the home page of a site using Magento 2's built-in Catalog Products List widget. What I'm hoping to do is to to extend the widget's layout file found in vendor/magento/module-catolog/widget/etc/widget.xml so that I can add another template option when adding this widget in a cms block with the WYSIWIG editor.

Right now, I have a theme located in app/design/frontend/Vendor/theme, and I tried putting my own widget.xml file at app/design/frontend/Vendor/theme/Magento_CatalogWidget/widget.xml, but it seems that this fails to override the original widget.xml file.

Here's my code:

<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.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">
        <label translate="true">Catalog Products List</label>
        <description translate="true">List of Products</description>
        <parameters>
            <parameter name="template" xsi:type="select" required="true" visible="true">
                <label translate="true">Template</label>
                <options>
                    <option name="default" value="product/widget/content/grid.phtml" selected="true">
                        <label translate="true">Products Grid Template</label>
                    </option>
                    <option name="default" value="product/widget/content/alternate-grid.phtml" selected="true">
                        <label translate="true">Alternate Products Grid Template</label>
                    </option>
                </options>
            </parameter>
        </parameters>
    </widget>
</widgets>

I'm trying to add an option within the template parameter so that I can select an "Alternate Products Grid Template" when inserting the widget.

Here's the original .xml file from magento-catalog-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.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">
        <label translate="true">Catalog Products List</label>
        <description translate="true">List of Products</description>
        <parameters>
            <parameter name="title" xsi:type="text" required="false" visible="true">
                <label translate="true">Title</label>
            </parameter>
            <parameter name="show_pager" xsi:type="select" visible="true"
                       source_model="Magento\Config\Model\Config\Source\Yesno">
                <label translate="true">Display Page Control</label>
            </parameter>
            <parameter name="products_per_page" xsi:type="text" required="true" visible="true">
                <label translate="true">Number of Products per Page</label>
                <depends>
                    <parameter name="show_pager" value="1" />
                </depends>
                <value>5</value>
            </parameter>
            <parameter name="products_count" xsi:type="text" required="true" visible="true">
                <label translate="true">Number of Products to Display</label>
                <value>10</value>
            </parameter>
            <parameter name="template" xsi:type="select" required="true" visible="true">
                <label translate="true">Template</label>
                <options>
                    <option name="default" value="product/widget/content/grid.phtml" selected="true">
                        <label translate="true">Products Grid Template</label>
                    </option>
                </options>
            </parameter>
            <parameter name="cache_lifetime" xsi:type="text" visible="true">
                <label translate="true">Cache Lifetime (Seconds)</label>
                <description translate="true">86400 by default, if not set. To refresh instantly, clear the Blocks HTML Output cache.</description>
            </parameter>
            <parameter name="condition" xsi:type="conditions" visible="true" required="true" sort_order="10"
                       class="Magento\CatalogWidget\Block\Product\Widget\Conditions">
                <label translate="true">Conditions</label>
            </parameter>
        </parameters>
        <containers>
            <container name="content">
                <template name="grid" value="default" />
            </container>
            <container name="content.top">
                <template name="grid" value="default" />
            </container>
            <container name="content.bottom">
                <template name="grid" value="default" />
            </container>
        </containers>
    </widget>
</widgets>

I know that this will work if I successfully extend the file since I already tried editing the original file and saw my new option when adding the widget in the admin. Obviously that's not best practice, and I would like the widget.xml file to be extended only within my custom theme.

Note that my templates are placed within app/design/frontend/Vendor/theme/Magento_CatalogWidget/templates/product/widget/content, where I have both grid.phtml and alternate-grid.phtml. I did not place alternate-grid.phtml within the magento_catalog_widget directory, yet I was able to access it when changing the original widget.xml file in that directory (outside of my theme). That's why I'm fairly confident that this problem is a matter of overwriting the layout file for the widget.

If anyone can answer this, I think it could be very helpful to other developers as well since this would allow a developer to customize the options within any Magento built-in widget without interfering with the base framework.

2

2 Answers

2
votes

I know it's a bit late but I just figured out how to do this and maybe it will help someone.

File app/design/frontend/Vendor/theme/etc/widget.xml should look like this:

<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
     xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.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">
    <label translate="true">Catalog Products List</label>
    <description translate="true">List of Products</description>
    <parameters>
        <parameter name="template" xsi:type="select" required="true" visible="true">
            <label translate="true">Template</label>
            <options>
                <option name="default" value="product/widget/content/grid.phtml">
                    <label translate="true">Products Grid Template</label>
                </option>
                <option name="alternate_grid" value="product/widget/content/alternate-grid.phtml">
                    <label translate="true">Alternate Grid Template</label>
                </option>
            </options>
        </parameter>
    </parameters>
    <containers>
        <container name="content">
            <template name="grid" value="default"/>
            <template name="alternate_grid" value="alternate_grid"/>
        </container>
        <container name="content.top">
            <template name="grid" value="default"/>
            <template name="alternate_grid" value="alternate_grid"/>
        </container>
        <container name="content.bottom">
            <template name="grid" value="default"/>
            <template name="alternate_grid" value="alternate_grid"/>
        </container>
    </containers>
</widget>

Template file should be in app/design/frontend/Vendor/theme/Magento_CatalogWidget/templates/product/widget/content/alternate-grid.phtml

And don't forget to clear cache after creating/editing module.xml

1
votes

You need create app/design/frontend/Vendor/theme/etc/widget.xml

<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
 * Copyright © 2013-2017 Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.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">
        <label translate="true">Catalog Products List</label>
        <description translate="true">List of Products</description>
        <parameters>
            <parameter name="template" xsi:type="select" required="true" visible="true">
                <label translate="true">Template</label>
                <option name="list" value="product/widget/content/alternate-grid.phtml">
                    <label translate="true">Alternate Products Grid Template</label>
                </option>
            </parameter>
        </parameters>
    </widget>
</widgets>