Extend checkout order summary section in Magento 2

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

Question

I am trying to add custom text in beside shipping method section in Order Summary from Magento 2. But my data is not affecting.

enter image description here

For this, I have added custom text in root\vendor\magento\module-checkout\view\frontend\web\template\summary\shipping.html file. But it's not effecting.

<span class="title">Custom Text</span>

Could you please suggest me which file I need to extend to add custom text?

Was it helpful?

Solution

File path should be below

vendor/magento/module-tax/view/frontend/web/template/checkout/summary/shipping.‌​html file

Add your custom <span class="title">Custom Text</span> text like below example

<!-- ko if: isExcludingDisplayed() -->
    <tr class="totals shipping excl">
        <th class="mark" scope="row">
            <span class="title">Custom Text</span>
            <span class="label" data-bind="i18n: title"></span>
            <span class="value" data-bind="text: getShippingMethodTitle()"></span>
        </th>
        <td class="amount">
            <!-- ko if: isCalculated() -->
            <span class="price"
                  data-bind="text: getValue(), attr: {'data-th': title}"></span>
            <!-- /ko -->
            <!-- ko ifnot: isCalculated() -->
            <span class="not-calculated"
                  data-bind="text: getValue(), attr: {'data-th': title}"></span>
            <!-- /ko -->
        </td>
    </tr>
<!-- /ko -->

Run below commands 

php bin/magento setup:upgrade 
php bin/magento setup:static-content:deploy

OTHER TIPS

In order to answer your question, please answer these questions yourself:

  1. Do you have any virtual products in this quote?
  2. Do you check if the shipping.html able to generate as your expectation (try to put some text in the beginning or at the end of file, then do inspection)

So, let take a look into

vendor\magento\module-checkout\view\frontend\web\template\summary\shipping.html

<!-- ko if: quoteIsVirtual == 0 -->
    <tr class="totals shipping excl">
        <th class="mark" scope="row">
            <span class="label" data-bind="i18n: title"></span>
            <span class="value" data-bind="text: getShippingMethodTitle()"></span>
        </th>
        <td class="amount">
            <!-- ko if: isCalculated() -->
            <span class="price"
                  data-bind="text: getValue(), attr: {'data-th': title}"></span>
            <!-- /ko -->
            <!-- ko ifnot: isCalculated() -->
            <span class="not-calculated"
                  data-bind="text: getValue(), attr: {'data-th': title}"></span>
            <!-- /ko -->
        </td>
    </tr>
<!-- /ko -->

As you can see above, obviously if the quote is virtual, it cannot show the shipping section.

My recommend is create a new jsComponent in order summary, then added it below the shipping section.

Something like

app/code/Vendor/Module/view/frontend/web/layout/checkout_index_index.xml

<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column"
      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">
                                <!--Cart Side bar on checkout index -->
                                <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="totals" xsi:type="array">
                                                    <item name="children" xsi:type="array">
                                                        <item name="mycustomstuff" xsi:type="array">
                                                            <item name="component"  xsi:type="string">Stackoverflow_Toan/js/view/checkout/sumarry/mycustomstuff</item>
                                                            <item name="sortOrder" xsi:type="string">30</item>
                                                            <item name="config" xsi:type="array">
                                                                <item name="title" xsi:type="string" translate="true">My Custom Stuff</item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                                <!--End-->
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

Now, it's time to add some JS

app/code/Vendor/Module/view/frontend/web/js/view/checkout/summary/mycustomstuff.js

define(
    [
        'Magento_Checkout/js/view/summary/abstract-total',
        'Magento_Checkout/js/model/quote',
        'Magento_Catalog/js/price-utils',
        'Magento_Checkout/js/model/totals'
    ],
    function (Component, quote, priceUtils, totals) {
        "use strict";
        return Component.extend({
            defaults: {
                isFullTaxSummaryDisplayed: window.checkoutConfig.isFullTaxSummaryDisplayed || false,
                template: 'Stackoverflow_Toan/checkout/summary/mycustomstuff'
            },
            totals: quote.getTotals(),
            isTaxDisplayedInGrandTotal: window.checkoutConfig.includeTaxInGrandTotal || false,
            isDisplayed: function() {
                return this.isFullMode();
            },
            getValue: function() {
                return 'oh-hello';
            }
        });
    }
);

app/code/Vendor/Module/view/frontend/web/js/view/checkout/cart/totals/mycustomstuff.js

define(
    [
        'Stackoverflow_Toan/js/view/checkout/summary/mycustomstuff'
    ],
    function (Component) {
        'use strict';

        return Component.extend({

            /**
             * @override
             */
            isDisplayed: function () {
                return true;
            }
        });
    }
);

Your knockout templates...

app/code/Vendor/Module/view/frontend/web/template/checkout/summary/mycustomstuff.html

<tr class="totals customstuff excl">
    <th class="mark" scope="row">
        <span class="label" data-bind="text: title"></span>
    </th>
    <td class="hello">
        <span class="oh-hello" data-bind="text: getValue(), attr: {'data-th': title}"></span>
    </td>
</tr>

app/code/Vendor/Module/view/frontend/web/template/checkout/cart/totals/mycustomstuff.html

<tr class="totals customstuff excl">
    <th class="mark" colspan="1" scope="row" data-bind="text: title"></th>
    <td class="hello">
        <span class="oh-hello" data-bind="text: getValue()"></span>
    </td>
</tr>

NOTE: This is just a draft version, use at your own risk. Hope it helps :)

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