How to override widget_recently_viewed.xml in Magento 2

Question

I'm facing an issue with overriding module-catalog/view/frontend/ui_component/widget_recently_viewed.xml

If I copy it to {theme_dir}/Magento_Catalog/ui_component/widget_recently_viewed.xml

My recently viewed widget gets messed up (the "price" segment of it to be specific).

So I presume I'm not doing this correctly...

What I'm trying to do is just change the sort order of special_price and regular_price

<item name="special_price" xsi:type="array">
    <item name="label" xsi:type="string" translate="true">Special Price</item>
    <item name="component" xsi:type="string">Magento_Catalog/js/product/list/columns/final-price</item>
    <item name="bodyTmpl" xsi:type="string">Magento_Catalog/product/price/special_price</item>
    <item name="sortOrder" xsi:type="number">1</item> --> change this to "2"
</item>
<item name="regular_price" xsi:type="array">
    <item name="label" xsi:type="string" translate="true">Regular Price</item>
    <item name="component" xsi:type="string">Magento_Catalog/js/product/list/columns/final-price</item>
    <item name="bodyTmpl" xsi:type="string">Magento_Catalog/product/price/regular_price</item>
    <item name="sortOrder" xsi:type="number">2</item> --> change this to "1"
</item>

What would be the correct way to override this file?

Answer 1

Seems that the component attribute in the <columns name="widget_columns"> and <column name="price"> tags were causing the issue.

After I removed them, the ui_component was successfully overriden.

So this is what I ended up doing in {theme_folder}/Magento_catalog/ui_component/widget_recently_viewed.xml

<?xml version="1.0" encoding="UTF-8"?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <columns name="widget_columns">
        <column name="price" sortOrder="3" displayArea="details-area">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="renders" xsi:type="array">
                        <item name="prices" xsi:type="array">
                            <item name="default" xsi:type="array">
                                <item name="component" xsi:type="string">Magento_Catalog/js/product/list/columns/pricetype-box</item>
                                <item name="bodyTmpl" xsi:type="string">Magento_Catalog/product/final_price</item>
                                <item name="children" xsi:type="array">
                                    <item name="special_price" xsi:type="array">
                                        <item name="label" xsi:type="string" translate="true">Special Price</item>
                                        <item name="component" xsi:type="string">Magento_Catalog/js/product/list/columns/final-price</item>
                                        <item name="bodyTmpl" xsi:type="string">Magento_Catalog/product/price/special_price</item>
                                        <item name="sortOrder" xsi:type="number">2</item>
                                    </item>
                                    <item name="regular_price" xsi:type="array">
                                        <item name="label" xsi:type="string" translate="true">Regular Price</item>
                                        <item name="component" xsi:type="string">Magento_Catalog/js/product/list/columns/final-price</item>
                                        <item name="bodyTmpl" xsi:type="string">Magento_Catalog/product/price/regular_price</item>
                                        <item name="sortOrder" xsi:type="number">1</item>
                                    </item>
                                    <item name="minimal_price" xsi:type="array">
                                        <item name="label" xsi:type="string" translate="true"/>
                                        <item name="component" xsi:type="string">Magento_Catalog/js/product/list/columns/final-price</item>
                                        <item name="bodyTmpl" xsi:type="string">Magento_Catalog/product/price/minimal_price</item>
                                        <item name="sortOrder" xsi:type="number">3</item>
                                    </item>
                                    <item name="minimal_regular_price" xsi:type="array">
                                        <item name="label" xsi:type="string" translate="true">Regular Price</item>
                                        <item name="component" xsi:type="string">Magento_Catalog/js/product/list/columns/final-price</item>
                                        <item name="bodyTmpl" xsi:type="string">Magento_Catalog/product/price/minimal_regular_price</item>
                                        <item name="sortOrder" xsi:type="number">4</item>
                                    </item>
                                    <item name="max_price" xsi:type="array">
                                        <item name="label" xsi:type="string" translate="true"/>
                                        <item name="component" xsi:type="string">Magento_Catalog/js/product/list/columns/final-price</item>
                                        <item name="bodyTmpl" xsi:type="string">Magento_Catalog/product/price/max_price</item>
                                        <item name="sortOrder" xsi:type="number">5</item>
                                    </item>
                                    <item name="max_regular_price" xsi:type="array">
                                        <item name="label" xsi:type="string" translate="true">Regular Price</item>
                                        <item name="component" xsi:type="string">Magento_Catalog/js/product/list/columns/final-price</item>
                                        <item name="bodyTmpl" xsi:type="string">Magento_Catalog/product/price/max_regular_price</item>
                                        <item name="sortOrder" xsi:type="number">6</item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </item>
            </argument>
            <settings>
                <label translate="true">Price</label>
            </settings>
        </column>
    </columns>
</listing>

Answer 2

I ran into the same issue when trying to override my vendor/magento/module-catalog/view/frontend/ui_component/widget_recently_viewed.xml. For some reason, it seems the UI-component can no longer find the msrp-price.js file needed to render a product's price after moving the file into your theme.

TO RESOLVE:

To fix this issue, I had to move the widget_recently_viewed.xml file from module-msrp (vendor/magento/module-msrp/view/frontend/ui_component/widget_recently_viewed.xml) into my theme: {theme_folder}/Magento_Msrp/ui_component/widget_recently_viewed.xml.

After adding that file into my theme, clearing pub/static/ and running php bin/magento cache:flush the recently viewed widget rendered without any errors.