I'm trying to show custom product attribute in checkout order summary section.
I have achieved this by override vendor/magento/module-checkout/view/frontend/web/js/view/summary/item/details.js
and vendor/magento/module-checkout/view/frontend/web/template/summary/item/details.html files in my custom module and also created plugin
for getconfig() method to store custom attribute in totalsData.
My question is:
1] If i override vendor/magento/module-checkout/view/frontend/web/js/view/summary/item/details.js file using
app/code/Test/Checkoutsummary/view/frontend/requirejs-config.js file then custom attribute shows in order summary but product thumbnail image not showing and in console js error shows as below:
app/code/Test/Checkoutsummary/view/frontend/requirejs-config.js
var config = {
map: {
"*": {
'Magento_Checkout/js/view/summary/item/details': 'Test_Checkoutsummary/js/view/summary/item/details'
}
}
};
2] If i override vendor/magento/module-checkout/view/frontend/web/js/view/summary/item/details.js file using
app/code/Test/Checkoutsummary/view/frontend/layout/checkout_index_index.xml layout file instead of requirejs-config.js file then custom attribute shows as well as all section looks proper and
also no error found in console.
app/code/Test/Checkoutsummary/view/frontend/layout/checkout_index_index.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="checkout.root">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="checkout" xsi:type="array">
<item name="children" xsi:type="array">
<item name="sidebar" xsi:type="array">
<item name="children" xsi:type="array">
<item name="summary" xsi:type="array">
<item name="children" xsi:type="array">
<item name="cart_items" xsi:type="array">
<item name="children" xsi:type="array">
<item name="details" xsi:type="array">
<item name="component"
xsi:type="string">Test_Checkoutsummary/js/view/summary/item/details</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
So i'm not figure out why it shows console error when override summary/item/details.js file
using requirejs-config.js file.
Having anybody faced this type of issue? Any help should be appreciated. Thanks
1 Answer 1
I have found issue. I'm trying to override vendor/magento/module-checkout/view/frontend/web/js/view/summary/item/details.js
file using requirejs-config.js file.
Here because of requirejs mapping, all files which have
Magento_Checkout/js/view/summary/item/details path replaced with Test_Checkoutsummary/js/view/summary/item/details
path and if we look into our custom module's view/frontend/web/js/view/summary/item path then there is only details.js
file exist but another files like thumbnail.js,message.js,subtotal.js not there so in console it shows 404 not found error.
For resolve this problem we have to add thumbnail.js,message.js,subtotal.js file's path in requirejs-config.js mapping like following:-
var config = {
map: {
"*": {
'Magento_Checkout/js/view/summary/item/details': 'Marvel_Checkoutsummary/js/view/summary/item/details',
'Magento_Checkout/js/view/summary/item/details/thumbnail': 'Magento_Checkout/js/view/summary/item/details/thumbnail',
'Magento_Checkout/js/view/summary/item/details/message': 'Magento_Checkout/js/view/summary/item/details/message',
'Magento_Checkout/js/view/summary/item/details/subtotal': 'Magento_Checkout/js/view/summary/item/details/subtotal'
}
}
};
Explore related questions
See similar questions with these tags.