1

How we can add custom HTML before order total in cart page with Knockout JS same as the screenshot below.

Screenshot:

enter image description here

1

1. Create checkout_cart_index.xml at

app/code/Vendor/Module/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="fee" xsi:type="array">
                                    <item name="component" xsi:type="string">Vendor_Module/js/view/checkout/cart/totals/fee</item>
                                    <item name="sortOrder" xsi:type="string">20</item>
                                    <item name="config" xsi:type="array">
                                        <item name="template" xsi:type="string">Vendor_Module/checkout/cart/totals/fee</item>
                                    </item>
                                </item>

                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

2. Now create fee.html at

app/code/Vendor/Module/view/frontend/web/template/checkout/cart/totals/fee.html

<!-- ko -->
<div>Here You can do your html</div>
<!-- /ko -->

3. Create fee.js at (Here You can create functions for html)

app/code/Vendor/Module/view/frontend/web/js/view/checkout/cart/totals/fee.js

define(
    [
        'Vendor_Module/js/view/checkout/summary/fee'
    ],
    function (Component) {
        'use strict';

        return Component.extend({
            //Create function
        });
    }
);

I added custom total at this place you can prefer my module for more details: https://github.com/mageprince/magento2-extrafee

0

You can add your custom html content in this file:

/app/code/design/your_package/your_theme/Magento_Checkout/templates/cart/totals.phtml

<div id="cart-totals" class="cart-totals" data-bind="scope:'block-totals'">
    <div class="custom-html">Custom Html Before Totals</div>
    <!-- ko template: getTemplate() --><!-- /ko -->
    <script type="text/x-magento-init">
            {
                "#cart-totals": {
                    "Magento_Ui/js/core/app": <?php /* @escapeNotVerified */ echo $block->getJsLayout();?>
                }
            }
    </script>
</div>

I hope it will work for you.

enter image description here

  • I am creating a module. I don't want to override phtml file. Please suggest me the other solution. – Vishwas Soni Dec 6 '17 at 10:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.