0

I need to create a popup for coupon code in checkout page..

In discount.js:

 showPopup: function () {
            alert("popup");

            var couponcodepopup = {
                type: 'popup',
                responsive: true,
                innerScroll: true,
                buttons: false,
                title: "Naa",
                modalClass: "popup-center",
                clickableOverlay: true,
                heightStyle: "content"
            };
            modal(couponcodepopup, $('.payment-option-inner'));            
            $('.payment-option-inner').modal('openModal');
        },

In discount.html

 <div class="payment-option-title field choice" data-role="title" data-bind="click: showPopup()">
        <span class="action action-toggle" id="block-discount-heading" role="heading" aria-level="2">
            <!-- ko i18n: 'Apply Discount Code'--><!-- /ko -->
        </span>
    </div>
    <div class="payment-option-content" data-role="content">
        <!-- ko foreach: getRegion('messages') -->
        <!-- ko template: getTemplate() --><!-- /ko -->
        <!--/ko-->
        <form class="form form-discount" id="discount-form">
            <div class="payment-option-inner">
                <div class="field">
                    <label class="label" for="discount-code">
                        <span data-bind="i18n: 'Enter discount code'"></span>
                    </label>
                    <div class="control">
                        <input class="input-text"
                               type="text"
                               id="discount-code"
                               name="discount_code"
                               data-validate="{'required-entry':true}"
                               data-bind="value: couponCode, attr:{placeholder: $t('Enter discount code')} " />
                    </div>
                </div>
            </div>
            <div class="actions-toolbar">
                <div class="primary">
                    <!-- ko ifnot: isApplied() -->
                    <button class="action action-apply" type="submit" data-bind="'value': $t('Apply Discount'), click: apply">
                        <span><!-- ko i18n: 'Apply Discount'--><!-- /ko --></span>
                    </button>
                    <!-- /ko -->
                    <!-- ko if: isApplied() -->
                    <button class="action action-cancel" type="submit" data-bind="'value': $t('Cancel'), click: cancel">
                        <span><!-- ko i18n: 'Cancel coupon'--><!-- /ko --></span>
                    </button>
                    <!-- /ko -->
                    <div id="login-msg"></div>
                </div>
            </div>
        </form>
    </div>

I can get the popup without loading any content.. enter image description here

If any one knows ...Guide me..

Thanks.

0

Now it works only when the page is plunged.

showPopup: function () {
    $(document).ready(function($) {
        alert("popup");
        var couponcodepopup = {
            type: 'popup',
            responsive: true,
            innerScroll: true,
            buttons: false,
            title: "Naa",
            modalClass: "popup-center",
            clickableOverlay: true,
            heightStyle: "content",
            content: "nathing"
        };
        modal(couponcodepopup, $('.payment-option-inner'));
        $('.payment-option-inner').modal('openModal');
    }) ;
},
  • Still not getting... – Mano M Jun 4 '18 at 6:07
  • Content you define in JS, see my example – Evgeniy Kapelko Jun 4 '18 at 6:17

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.