0

I want to add a custom block Below Order Total using a knockout template but unable to render it on the checkout cart page.

Here I have done so far.

1) checkout_cart_index.xml at

app/code/Ishaq/CheckoutTotal/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">Ishaq_CheckoutTotal/converted_rate</item>
                                    <item name="sortOrder" xsi:type="string">20</item>
                                    <item name="config" xsi:type="array">
                                        <item name="template" xsi:type="string">Ishaq_CheckoutTotal/converted_rate</item>
                                    </item>
                                </item>

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

2) converted_rate.html at

app/code/Ishaq/CheckoutTotal/view/frontend/web/template/converted_rate.html

<!-- ko -->
<div>My Converted rate goes here</div>
<!-- /ko -->

3) converted_rate.js at

app/code/Ishaq/CheckoutTotal/view/frontend/web/js/converted_rate.js

define(
    [
        'Ishaq_CheckoutTotal/js/converted_rate'
    ],
    function (Component) {
        'use strict';

        return Component.extend({
            
        });
    }
);
Improve this question

1 Answer 1

Reset to default
1

1. If you want it without using a knockout you can use this

app/code/Ishaq/CheckoutTotal/view/frontend/layout/checkout_cart_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>
        <referenceContainer name="checkout.cart.totals.container">
            <block class="Magento\Framework\View\Element\Template" name="checkout.cart.custom.block" after="-" template="Ishaq_CheckoutTotal::custom-block.phtml" />
        </referenceContainer>
    </body>
</page>

app/code/Ishaq/CheckoutTotal/view/frontend/templates/custom-block.phtml

<div>My Converted rate goes here</div>

OR

2. If you want use knockout you can do this

app/code/Ishaq/CheckoutTotal/view/frontend/layout/checkout_cart_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>
        <referenceContainer name="checkout.cart.totals.container">
            <block class="Magento\Framework\View\Element\Template" name="checkout.cart.custom.block" after="-" template="Ishaq_CheckoutTotal::custom-block.phtml">
                <arguments>
                    <argument name="jsLayout" xsi:type="array">
                        <item name="components" xsi:type="array">
                            <item name="ordersummary" xsi:type="array">
                                <item name="component" xsi:type="string">Ishaq_CheckoutTotal/js/custom-block-order-summary</item>
                            </item>
                        </item>
                    </argument>
                </arguments>
            </block>
        </referenceContainer>
    </body>
</page>

app/code/Ishaq/CheckoutTotal/view/frontend/templates/custom-block.phtml

<div id="order-summary-block" data-bind="scope:'ordersummary'">
  <!-- ko template: getTemplate() --><!-- /ko -->
</div>
<script type="text/x-magento-init">
{
    "#order-summary-block": {
        "Magento_Ui/js/core/app": {
           "components": {
                "ordersummary": {
                    "component": "Ishaq_CheckoutTotal/js/custom-block-order-summary",
                    "config": {
                        "data1": "some data",
                        "data2": "some other data"
                    }
                }
            }
        }
    }
}
</script>

app/code/Ishaq/CheckoutTotal/view/frontend/web/js/custom-block-order-summary.js

define([
'ko',
'uiComponent',
'mage/url',
'mage/storage',
],function (ko, Component, urlBuilder,storage) 
{
    'use strict';
    return Component.extend({
        defaults: {template: 'Ishaq_CheckoutTotal/custom-block-order-summary',},
        initialize: function(config) {
            this._super();
            var data1 = config.data1;
            var data2 = config.data2;
        },
    });
});

app/code/Ishaq/CheckoutTotal/view/frontend/web/template/custom-block-order-summary.html

<!-- ko -->
<div>My Converted rate goes here</div>
<!-- /ko -->
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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