1

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?

9
  • Did you deploy static content? Mar 9, 2018 at 6:25
  • @SureshChikani Yes, so many times. But it's not affecting.
    – Bojjaiah
    Mar 9, 2018 at 6:26
  • Which command used for it? Mar 9, 2018 at 6:28
  • @SureshChikani php bin/magento setup:upgrade, php bin/magento setup:static-content:deploy and php bin/magento cache:flush.
    – Bojjaiah
    Mar 9, 2018 at 6:29
  • Open it to privet window. Mar 9, 2018 at 6:31

2 Answers 2

5

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
4

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/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 :)

Your Answer

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

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