Magento Stack Exchange is a question and answer site for users of the Magento e-Commerce platform. It only takes a minute to sign up.
Sign up to join this community
I am trying to add custom text in beside shipping method section in Order Summary from Magento 2. But my data is not affecting.
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?
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
In order to answer your question, please answer these questions yourself:
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 :)
php bin/magento setup:upgrade, php bin/magento setup:static-content:deploy and php bin/magento cache:flush.