Menu Close
    Searching for an experienced Magento 2 Development Company ?

    Display custom price fee on checkout cart and summary total in magento2

    To display Custom price fee on checkout/cart page or in summary cart you can follow following process :

    First add Custom price fee in your total, Please refer following blog:

    How to add custom price/fee in order total magento2

    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:

    How to display custom price fee in sales order view page

    . . .
    Discuss on Helpdesk

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    8 comments

  • tallenmusclegeeks
    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
      Have to define customfee in sales.xml and model file?
      • tallenmusclegeeks
        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
        also fetch function is as :

        public function fetch(MagentoQuoteModelQuote $quote, MagentoQuoteModelQuoteAddressTotal $total)
        {
        return [
        ‘code’ => ‘Customfee’,
        ‘title’ => ‘Custom Fee 1’,
        ‘value’ => 5
        ];
        }

        • Bulbul agarwal
          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
            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
            Changes are updated in blog.
          • tallenmusclegeeks
            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

  • Back to Top