2

I want to add custom text block in onepage checkout in #payment page. That block will use to remind the "discount code" to customer, it's like popup text.

Please check the sample image.

enter image description here

3

Try following way to use magento default popup modal:

app/code/SR/MagentoCommunity/view/frontend/layout/checkout_index_index.xml

<?xml version="1.0"?>
<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="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="beforeMethods" xsi:type="array">
                                                            <item name="children" xsi:type="array">
                                                                <item name="custom_block" xsi:type="array">
                                                                    <item name="component" xsi:type="string">SR_MagentoCommunity/js/view/custom-block</item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

app/code/SR/MagentoCommunity/view/frontend/web/js/view/custom-block.js

define([
    'jquery',
    'ko',
    'uiComponent',
    'Magento_Ui/js/modal/modal',
    'Magento_Checkout/js/view/payment',
    'mage/translate'
], function ($, ko, Component, modal, payment, $t) {
    'use strict';

    return Component.extend({
        defaults: {
            template: 'SR_MagentoCommunity/custom-block'
        },
        options: {
            popupModalContent: '#sr-discount-popup'
        },
        shouldShowMessage: ko.observable(false),
        initialize: function () {
            this._super();
            var self = this;
            var subscription = payment.prototype.isVisible.subscribe(function(value){
                if (value) {
                    var popupModalContent = self.options.popupModalContent;
                    var modalOption = {
                        type: 'popup',
                        responsive: true,
                        title: 'Test Title',
                        buttons: [{}],
                        closed: function () {
                            self.shouldShowMessage(false);
                        }
                    };
                    self.shouldShowMessage(true);
                    $(popupModalContent).modal(modalOption);
                    $(popupModalContent).trigger('openModal');
                    subscription.dispose();
                }
            });
            return this;
        },
        getMessage: function () {
            return $t("Don't forget to use discount code");
        }
    });
});

app/code/SR/MagentoCommunity/view/frontend/web/template/custom-block.html

<div id="sr-discount-popup" data-bind="visible:shouldShowMessage">
    <span data-bind="text: getMessage()"></span>
</div>
  • Thank you. @ Sohel – mohana Apr 10 at 8:56
  • Please let me know, how to add image instead of text. – mohana Apr 10 at 9:58
  • 1
    Pass image from php checkout config and added that image in html – Sohel Rana Apr 10 at 10:08
  • Yeah got it thank you – mohana Apr 10 at 10:42
  • @mohana do you manage that? – Sohel Rana Apr 10 at 10:48

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.