Modifying authentication popup

Question

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?

Answer 1

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));
 }
 });
 };
});