Magento2 : How to add my custom template in order summary page after total

Question

I want to add my custom template on checkout page in order summary just after Total as shown in screenshot :

In this template .phtml file I want to add some conversion depend on payment gateway just to display only to customer.

How can I do that?

We cannot include the phtml because the checkout Page used Knockout html template. We should build the js to get the result. — Khoa TruongDinh, Nov 22 '17 at 05:11
@KhoaTruongDinh, please post how can I build js for my requirement. — Vinaya Maheshwari, Nov 22 '17 at 05:18
The problem is here: depend on payment gateway. So, when the client chooses the payment, the custom total will re-calculate? — Khoa TruongDinh, Nov 22 '17 at 05:28
As I said I just want to display the price which will be show on payment gateway to customer, payment gateway conversion is done in its module already, don't want to update cart total and anything else. — Vinaya Maheshwari, Nov 22 '17 at 05:31
@KhoaTruongDinh, Can you please suggest how can I use ajax in .html file ? — Vinaya Maheshwari, Nov 22 '17 at 06:08
Yes, we can do that. But, currently, I'm working on my tasks in my company. So, I will suggest you at night. — Khoa TruongDinh, Nov 22 '17 at 06:19

score 3 · Answer 1 · edited Apr 25 '19 at 12:25

If we take a look the Json config of xml layout on checkout page:

As we can see, we can add the custom content to itemsBefore area.

For example code:

app/code/Vendor/Checkout/view/frontend/layout/checkout_index_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.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="itemsBefore" xsi:type="array">
                                                    <item name="children" xsi:type="array">
                                                        <item name="testcustom" xsi:type="array">
                                                            <item name="component" xsi:type="string">Vendor_Checkout/js/view/summary/custom</item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

app/code/Vendor/Checkout/view/frontend/web/js/view/summary/custom.js

define(
    [
        'uiComponent'
    ],
    function (Component) {
        'use strict';
        return Component.extend({
            defaults: {
                template: 'Vendor_Checkout/summary/custom'
            }
        });
    }
);

app/code/Vendor/Checkout/view/frontend/web/template/summary/custom.html

<div>Test Test Here</div>

I do not try but I think we cannot. Try to use html and use Cms content. — Khoa TruongDinh, Nov 22 '17 at 04:32
I tried but not working, I need to load cart session here and some calculation, Please suggest How can I add .phtml below Total? — Vinaya Maheshwari, Nov 22 '17 at 04:35
I tried but not working? The message did not show? I'm pretty sure it will show. — Khoa TruongDinh, Nov 22 '17 at 04:40
I meant to say .html is working properly, but when I tried with .phtml it is not working. And I need to add .phtml file not html as I have to do some php calculation here. — Vinaya Maheshwari, Nov 22 '17 at 04:43
Yes. .phtml cannot work in this case. Magento uses Knockout template. So, you cannot use .phtml. — Khoa TruongDinh, Nov 22 '17 at 04:45
A good example for you: https://magento.stackexchange.com/a/93349/33057 — Khoa TruongDinh, Nov 22 '17 at 04:47
But this example for update cart total, I don't want to update total, I just want to take cart total from session and apply some conversion depend on payment gateway just to display to customer only. — Vinaya Maheshwari, Nov 22 '17 at 04:59
I think it's better to create a new question. I will take a look at it. Because your issue is more complicated now. — Khoa TruongDinh, Nov 22 '17 at 05:02
How do you get that "Json config of xml layout"? Is much easier to interpret this than the crazy magneto core xml files — 00-BBB, Oct 13 '21 at 10:45

Magento2 : How to add my custom template in order summary page after total

1 Answers1