0

I wanted to show a message on checkout page (above the 'complete checkout' button) only if customer is on certain store views (id_id or id_en). Here what I have done so far. Please help me to find what I am doing wrong.

app/code/Sample/Chmodule/view/frontend/layout/checkout_index_index.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" 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="testmsg" xsi:type="array">
                                    <item name="component" xsi:type="string">Sample_Chmodule/js/view/test-message</item>
                                    <item name="displayArea" xsi:type="string">testmsg</item>
                                    <item name="config" xsi:type="array">
                                        <item name="template" xsi:type="string">Sample_Chmodule/test-message</item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

vendor/magento/module-checkout/view/frontend/web/template/onepage.html is overridden in my module (Sample_Chmodule) and added below content

    <div class="test-message">
        <p>
            <!-- ko foreach: getRegion('testmsg') -->
            <!-- ko template: getTemplate() --><!-- /ko -->
            <!--/ko-->
        </p>
    </div>

app/code/Sample/Chmodule/view/frontend/web/js/view/test-message

define([
    'Magento_Checkout/js/view/payment/default'
], function (Component) {
    'use strict';

    return Component.extend({
        /**
         * @return {*}
         */
        showSampleText: function(){
            if(window.checkoutConfig.storeCode == "id_en" || window.checkoutConfig.storeCode == "id_id"){
                return true;
            }
        }
    });
});

app/code/Sample/Chmodule/view/frontend/web/template/test-message.html

<!-- ko if: showSampleText() -->
    <!-- ko i18n: "Sample text which I need to show just above the checkout button." -->
    <!-- /ko -->
<!-- /ko -->

Once I follow all of above steps, I could see below content on inspect element. But the knockout component configured in xml (testmsg) is not showing

<div class="test-message">
        <p>
            <!-- ko foreach: getRegion('testmsg') -->
            <!-- ko template: getTemplate() --><!-- /ko -->
            <!--/ko-->
        </p>
    </div>

and when I run window.checkoutConfig.storeCode on console, it shows the correct storecode (id_en, id_id etc)

Your advise on this is highly appreciated.

1 Answer 1

0

This was due to a mistake when adding dependencies in component js file. The type of Component as 'Magento_Checkout/js/view/payment/default' was wrong and I corrected it to 'uiComponent' then started to work fine. Find the correct js file content below. Writting up it here as this might help someone else in the future

define([
    'uiComponent'
], function (Component) {
    'use strict';

    return Component.extend({
        /**
         * @return {*}
         */
        showDokuNotice: function(){
            if(window.checkoutConfig.storeCode == "id_en" || window.checkoutConfig.storeCode == "id_id"){
                return true;
            }
        }
    });
});

Your Answer

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

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