magento 2.3.2 checkout order summery grand total after custom text add

magento.stackexchange https://magento.stackexchange.com/questions/298080

Question

I am trying to add custom text after grand total section in Order Summary

like 

<tr class="custom-text">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</p>
</tr>

enter image description here

but how can achieve this?

Note: which one correct way.. using module or vendor file override?
Any help would be appreciated.

Thanks.

Was it helpful?

Solution

You can create and Custom Module or can use your custom theme to implement your requirement.

I assume your using a custom module and I also assume your Custom Module Name is Company_CheckoutCustomtext

You can follow the steps as described below.

step 1)

Create checkout_index_index.xml under YOUR-MAGENTO-ROOT/app/code/Company/CheckoutCustomtext/view/frontend/layout

File : *app/code/Company/CheckoutCustomtext/view/frontend/layout/checkout_index_index.xml*

<?xml version="1.0"?>
<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<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="component" xsi:type="string">Magento_Checkout/js/view/summary</item>
                                                <item name="displayArea" xsi:type="string">summary</item>
                                                <item name="config" xsi:type="array">
                                                    <item name="template" xsi:type="string">Magento_Checkout/summary</item>
                                                </item>
                                                <item name="children" xsi:type="array">                                                 
                                                    <item name="itemsBefore" xsi:type="array">
                                                        <item name="component" xsi:type="string">uiComponent</item>
                                                        <item name="children" xsi:type="array">
                                                            <!-- merge your components here -->
                                                            <item name="checkout-mycustomtext" xsi:type="array">
                                                                    <item name="component" xsi:type="string">Company_CheckoutCustomtext/js/view/checkout-mycustomtext</item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

Step 2)

Create the js Component file checkout-mycustomtext.js under YOUR-MAGENTO-ROOT/app/code/Company/CheckoutCustomtext/view/frontend/web/js/view/

File : /app/code/Company/CheckoutCustomtext/view/frontend/web/js/view/checkout-mycustomtext.js

/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */ 
define([
    'jquery',
    'ko',
    'uiComponent',
    'Magento_Checkout/js/model/quote',
    'Magento_Checkout/js/checkout-data',
    'Magento_Customer/js/customer-data',
    'mage/translate'],
function($, ko, Component, quote, checkoutData, customerData, $t){
     return Component.extend({
          defaults: {
            template: 'Company_CheckoutCustomtext/sales/checkout/mycustomtext'
        },
        getCustomText: function (){         
            var customText = $t('Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged');
            return customText;
        }
     });
});

Step 3)

Now create your custom js component's template file mycustomtext.html under YOUR-MAGENTO-ROOT/app/code/Company/CheckoutCustomtext/view/frontend/web/template/sales/checkout/

File : /app/code/Company/CheckoutCustomtext/view/frontend/web/template/sales/checkout/mycustomtext.html

<p data-bind="text: getCustomText()" style="font-weight:bold;"></p>

step 4)

Now run the command below 

sudo php bin/magento setup:upgrade
sudo php bin/magento setup:di:compile
sudo php bin/magento setup:static-content:deploy

Demo :

enter image description here

Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top