How to override widget_recently_viewed.xml in Magento 2
-
17-12-2020 - |
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?
La solution
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>
Autres conseils
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.