Display Custom Price fee on Checkout Cart

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

Searching for an experienced
Magento 2 Company ? Find out More

/*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 🙂

Bulbul

6 Badges

5 Apr, 2024
Updated by - Kuldeep Singh
22 Feb, 2024
Updated by - Gaurav Singh Nagar Koti

8 comments

tallenmusclegeeks 8 years ago

on the cart page i can see the Custom Fee text but getting a js error as follows :

customfee.js:25 Uncaught TypeError: Cannot read property ‘value’ of null

on line price = totals.getSegment(‘customfee’).value; of file checkoutcarttotalscustomfee.html

Can you please reply ?

Bulbul agarwal 8 years ago
Have to define customfee in sales.xml and model file?

- tallenmusclegeeks 8 years ago
  yes i have following in my sales.xml :
  
  and in Model :
  
  public function collect(
  MagentoQuoteModelQuote $quote,
  MagentoQuoteApiDataShippingAssignmentInterface $shippingAssignment,
  MagentoQuoteModelQuoteAddressTotal $total
  ) {
  parent::collect($quote, $shippingAssignment, $total);
  
  $exist_amount = 0; //$quote->getCustomfee();
  $customfee = 5; //enter amount which you want to set
  $balance = $customfee – $exist_amount;//final amount
  
  $total->setTotalAmount(‘customfee’, $balance);
  $total->setBaseTotalAmount(‘customfee’, $balance);
  
  $total->setCustomfee($balance);
  $total->setBaseCustomfee($balance);
  
  $total->setGrandTotal($total->getGrandTotal() + $balance);
  $total->setBaseGrandTotal($total->getBaseGrandTotal() + $balance);
  
  return $this;
  }
  
  i have used the same name as in your example only the namespace and module name is changed.
  
- tallenmusclegeeks 8 years ago
  also fetch function is as :
  
  public function fetch(MagentoQuoteModelQuote $quote, MagentoQuoteModelQuoteAddressTotal $total)
  {
  return [
  ‘code’ => ‘Customfee’,
  ‘title’ => ‘Custom Fee 1’,
  ‘value’ => 5
  ];
  }
  
  - Bulbul agarwal 8 years ago
    You have to define calculate function first, because here we get data from the totals, so in calculate function data sets to the totals.
    
    and as per your last reply, in fetch function code name should be same as you used in your js file, which is “customfee”
    
    - tallenmusclegeeks 8 years ago
      Apparently it was just due to C instead of c in the fetch method, thanks a lot Bulbul. I owe you for this.
      
      but pls change the entry in your post to small c as well.
    - Bulbul agarwal 8 years ago
      Changes are updated in blog.
    - tallenmusclegeeks 8 years ago
      Also on your next tutorial i.e : custom price/fee amount in sales
      
      You need to change <referenceContainer to <referenceBlock in sales_order_view.xml

Display Custom Price fee on Checkout Cart and Summary Total in Magento 2

Leave a Comment Cancel Reply

8 comments