Dtjytyk

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?

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