Display Custom Price fee on Checkout Cart and Summary Total in Magento 2
To display Custom price fee on checkout/cart page or in summary cart you can follow following process :
Now, create js file which allow to display the amount on checkout cart total, file path is:
app\code\Webkul\Test\view\frontend\web\js\view\checkout\cart\totals\customfee.js
define(
[
'Webkul_Test/js/view/checkout/summary/customfee'
],
function (Component) {
'use strict';
return Component.extend({
/**
* @override
* use to define amount is display setting
*/
isDisplayed: function () {
return true;
}
});
}
);
and define js file for checkout summary, create file at path:
app\code\Webkul\Test\view\frontend\web\js\view\checkout\summary\customfee.js
/*global alert*/
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: 'Webkul_Test/checkout/summary/customfee'
},
totals: quote.getTotals(),
isTaxDisplayedInGrandTotal: window.checkoutConfig.includeTaxInGrandTotal || false,
isDisplayed: function() {
return this.isFullMode();
},
getValue: function() {
var price = 0;
if (this.totals()) {
price = totals.getSegment('customfee').value;
}
return this.getFormattedPrice(price);
},
getBaseValue: function() {
var price = 0;
if (this.totals()) {
price = this.totals().base_customfee;
}
return priceUtils.formatPrice(price, quote.getBasePriceFormat());
}
});
}
);
Now, define template file to display it on page, file path:
app\code\Webkul\Test\view\frontend\web\template\checkout\summary\customfee.html
<!-- ko -->
<tr class="totals customfee excl">
<th class="mark" scope="row">
<span class="label" data-bind="text: title"></span>
<span class="value" data-bind="text: getValue()"></span>
</th>
<td class="amount">
<span class="price"
data-bind="text: getValue(), attr: {'data-th': title}"></span>
</td>
</tr>
<!-- /ko -->
Now, define template file for checkout cart total, file path is:
app\code\Webkul\Test\view\frontend\web\template\checkout\cart\totals\customfee.html
<!-- ko -->
<tr class="totals customfee excl">
<th class="mark" colspan="1" scope="row" data-bind="text: title"></th>
<td class="amount">
<span class="price" data-bind="text: getValue()"></span>
</td>
</tr>
<!-- /ko -->
And , now define these js files in xml file, on checkout_cart_index.xml.
File path is: app\code\Webkul\Test\view\frontend\layout\checkout_cart_index.xml
<?xml version="1.0"?>
<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.cart.totals">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="block-totals" xsi:type="array">
<item name="children" xsi:type="array">
<item name="customfee" xsi:type="array">
<item name="component" xsi:type="string">Webkul_Test/js/view/checkout/cart/totals/customfee</item>
<item name="sortOrder" xsi:type="string">20</item>
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">Webkul_Test/checkout/cart/totals/customfee</item>
<item name="title" xsi:type="string" translate="true">Custom Fee</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
Now, add file for checkout_index_index page, file path is:
app\code\Webkul\Test\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">
<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="customfee" xsi:type="array">
<item name="component" xsi:type="string">Webkul_Test/js/view/checkout/cart/totals/customfee</item>
<item name="sortOrder" xsi:type="string">20</item>
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">Webkul_Test/checkout/cart/totals/customfee</item>
<item name="title" xsi:type="string" translate="true">Custom Fee</item>
</item>
</item>
</item>
</item>
<item name="cart_items" xsi:type="array">
<item name="children" xsi:type="array">
<item name="details" xsi:type="array">
<item name="children" xsi:type="array">
<item name="subtotal" xsi:type="array">
<item name="component" xsi:type="string">Magento_Tax/js/view/checkout/summary/item/details/subtotal</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
Now, execute bin\magento setup:static-content:deploy command from ssh terminal.
And your custom fee amount will displayed on checkout cart total and checkout summary page.
Thank you. 🙂
To display custom price/fee amount in sales order view , then refer blog:
http://webkul.com/blog/display-custom-pricefee-sales-order-view-page/
I hope this blog will help you with Display Custom Price fee on Checkout Cart and Summary Total in Magento 2. You may also check our wide range of best Magento 2 Extensions.
Please reach out to our team via a support ticket if you have any queries.
Try this and if you have any queries then just comment below 🙂