1

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.

Improve this question

2 Answers 2

Reset to default
3

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

Improve this answer
0

Thanks it was useful. Great coding.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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