Extend checkout order summary section in Magento 2
-
02-01-2021 - |
문제
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:
- Do you have any virtual products in this quote?
- 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 :)