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.

Était-ce utile?

La 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

Licencié sous: CC-BY-SA avec attribution
Non affilié à magento.stackexchange
scroll top