5

I'm trying to add a javascript file with a HTML template at the end of the checkout page but it doesn't seem to be working.

I tried to duplicate the way "Magento/SalesRule/view/frontend/web/template/payment/discount.html" is implemented.

And the result in code is this:

[module-folder]/view/frontend/web/js/javascript.js

define(
    [
        'jquery',
        'ko',
        'Magento_SalesRule/js/view/payment/discount'
    ],
    function ($, ko, Component) {
        'use strict';
        return Component.extend({
            defaults: {
                template: '[vendor]_[mymodule]/template'
            }
        });
    }
);

[module-folder]/view/frontend/web/template/template.html

<div class="js-template-test">
     <span>content</span>
</div>

[module-folder]/view/frontend/layout/checkout_index_index.xml

<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="steps" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="billing-step" xsi:type="array">
                                            <item name="children" xsi:type="array">
                                                <item name="payment" xsi:type="array">
                                                    <item name="children" xsi:type="array">
                                                        <item name="afterMethods" xsi:type="array">
                                                            <item name="children" xsi:type="array">
                                                                <item name="discount" xsi:type="array">
                                                                    <item name="children" xsi:type="array">
                                                                        <item name="templatetest" xsi:type="array">
                                                                            <item name="component" xsi:type="string">[vendor]_[mymodule]/js/javascript</item>
                                                                        </item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

The .js file is actually implemented (I tested this with an alert, and it's visible in the network tab of the element inspector) but the html template doesn't show up.

Also, I cleared my cache, generation folder, and the statics.

2

You should follow following step, Then you can able to add html block under discount block of checkout page.

Here VendorName="SR" and ModuleName ="StackExchange"

Follow step: SR/StackExchange/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="steps" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="billing-step" xsi:type="array">
                                            <item name="component" xsi:type="string">uiComponent</item>
                                            <item name="children" xsi:type="array">
                                                <item name="payment" xsi:type="array">
                                                    <item name="children" xsi:type="array">
                                                        <item name="afterMethods" xsi:type="array">
                                                            <item name="children" xsi:type="array">
                                                                <item name="stackexchange" xsi:type="array">
                                                                    <item name="component" xsi:type="string">SR_StackExchange/js/stackexchange</item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

SR/StackExchange/view/frontend/web/js/stackexchange.js


define(
    [
        'jquery',
        'ko',
        'Magento_SalesRule/js/view/payment/discount'
    ],
    function ($, ko, Component) {
        'use strict';
        return Component.extend({
            defaults: {
                template: 'SR_StackExchange/stackexchange'
            }
        });
    }
);

SR/StackExchange/view/frontend/web/template/stackexchange.html


<h1>Stack Exchange</h1>

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.