3

I'm trying to apply the authentication popup on a custom button in my module. I've implemented it by overriding it in my requirejs-config.

var config = {
    map: {
        '*': {
            'Magento_Customer/js/model/authentication-popup': 'Vendor_CustomPopup/js/model/authentication-popup-download'
        }
    }
};

and my modified JS looks like this:

define(
    [
        'jquery',
        'Magento_Ui/js/modal/modal'
    ],
    function ($, modal) {
        'use strict';

        return {
            modalWindow: null,

            // Create popUp window for provided element
            createPopUp: function (element) {
                this.modalWindow = element;
                var options = {
                    'type': 'popup',
                    'modalClass': 'popup-authentication',
                    'responsive': true,
                    'innerScroll': true,
                    'trigger': '.download-purchase', // only change needed
                    'buttons': []
                };
                //console.log(options);
                modal(options, $(this.modalWindow));
            },

            // Show login popup window
            showModal: function () {
                $(this.modalWindow).modal('openModal');
            }
        }
    }
);

The only change I need to apply is the trigger in the options, this works, but is there a better way of modifying this without overriding the whole function?

0

You can do it with a mixin and only update the function createPopUp.

Vendor/Module/view/frontend/requirejs-config.js

var config = {
    config: {
        mixins: {
            'Magento_Customer/js/view/authentication-popup': {
                'Vendor_Module/js/view/authentication-popup-mixin': true
            }
        }
    }
};

Vendor/Module/view/frontend/web/js/view/authentication-popup-mixin.js

define([
    'uiComponent',
    'jquery',
    'Magento_Ui/js/modal/modal'
], function (Component, $, modal) {
    'use strict';

    return function (Component) {
        return Component.extend({

            /**
             * @inheritDoc
             */
            createPopUp: function (element) {
                this.modalWindow = element;
                var options = {
                    'type': 'popup',
                    'modalClass': 'popup-authentication',
                    'responsive': true,
                    'innerScroll': true,
                    'trigger': '.download-purchase', // only change needed
                    'buttons': []
                };
                //console.log(options);
                modal(options, $(this.modalWindow));
            }
        });
    };
});

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.