0

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:

enter image description here

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

0

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'                  
        }
    }
};
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.