Call default Magento 2 authentication popup from a custom module

Question

I would like to call the existing authentication modal popup built into Magento 2 from a custom module. It must already be in the body somewhere since it can readily be called by clicking the checkout button when not logged in (guest checkout is disabled).

enter image description here

I found this javascript code in my source,

**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
/*jshint browser:true jquery:true*/
/*global alert*/
define(
 [
 'jquery',
 'ko',
 'Magento_Ui/js/form/form',
 'Magento_Customer/js/action/login',
 'Magento_Customer/js/customer-data',
 'Magento_Customer/js/model/authentication-popup',
 'mage/translate',
 'mage/url',
 'Magento_Ui/js/modal/alert',
 'mage/validation'
 ],
 function(,ドル ko, Component, loginAction, customerData, authenticationPopup, $t, url, alert) {
 'use strict';
 return Component.extend({
 registerUrl: window.authenticationPopup.customerRegisterUrl,
 forgotPasswordUrl: window.authenticationPopup.customerForgotPasswordUrl,
 autocomplete: window.checkout.autocomplete,
 modalWindow: null,
 isLoading: ko.observable(false),
 defaults: {
 template: 'Magento_Customer/authentication-popup'
 },
 initialize: function() {
 var self = this;
 this._super();
 url.setBaseUrl(window.authenticationPopup.baseUrl);
 loginAction.registerLoginCallback(function() {
 self.isLoading(false);
 });
 },
 /** Init popup login window */
 setModalElement: function (element) {
 if (authenticationPopup.modalWindow == null) {
 authenticationPopup.createPopUp(element);
 }
 },
 /** Is login form enabled for current customer */
 isActive: function() {
 var customer = customerData.get('customer');
 return customer() == false;
 },
 /** Show login popup window */
 showModal: function() {
 if (this.modalWindow) {
 $(this.modalWindow).modal('openModal');
 } else {
 alert({
 content: $t('Guest checkout is disabled.')
 });
 }
 },
 /** Provide login action */
 login: function(loginForm) {
 var loginData = {},
 formDataArray = $(loginForm).serializeArray();
 formDataArray.forEach(function (entry) {
 loginData[entry.name] = entry.value;
 });
 if($(loginForm).validation()
 && $(loginForm).validation('isValid')
 ) {
 this.isLoading(true);
 loginAction(loginData, null, false);
 }
 }
 });
 }
);

Then tried to call it from a link in my custom.phml file:

<p><a onClick="openLoginPopup()" href="javascript:void(0);">Log in</a> or <a onClick="openLoginPopup()" href="javascript:void(0);">create an account</a> for additional features.</p>

This just gave me an error that top wasn't defined. How can I call this popup from a custom module?

• Purushotam Sangroula: Where is that code from? I could not locate in magento.
• Front_End_Dev: it's in the right click "view source" code on my product view page(blank theme). I was hoping to just find whatever called the popup and replicate it.
• Purushotam Sangroula: So you want to create custom popup?
• Front_End_Dev: @Anime, not a custom popup, I want to call the popup that's already there. I just want to do it from a new button.
• Purushotam Sangroula: Okay, I would really like to help you but I could not find the kind of popup you have shown in the pic. Would you tell me which page and when you want to modify. I tried activating blank theme and my checkout page is differnt than yours. How many checkout steps do you have?

Answer 1

This is a tricky solution if you want to reuse Magento authentication popup.

1. In your custom.phtml, define class name to trigger popup (E.g. trigger-auth-popup)

   <p>
    <a class="trigger-auth-popup" href="javascript:void(0);">Log in</a> or <a class="trigger-auth-popup" href="javascript:void(0);">create an account</a> for additional features. 
   </p>
   

2. Override

   vendor/magento/module-customer/view/frontend/web/js/model/authentication-popup.js
   

   by copying it to your custom theme

   app/design/frontend/<Vendor>/<theme>/Magento_Customer/web/js/model/authentication-popup.js
   

   and change the trigger element like this

   /**
    * Create popUp window for provided element
    *
    * @param {HTMLElement} element
    */
   createPopUp: function (element) {
    var options = {
    'type': 'popup',
    'modalClass': 'popup-authentication',
    'focus': '[name=username]',
    'responsive': true,
    'innerScroll': true,
    'trigger': '.proceed-to-checkout, .trigger-auth-popup', // Add your custom class name to this property
    'buttons': []
    };
    this.modalWindow = element;
    modal(options, $(this.modalWindow));
   },
   

3. Re-deploy static content and check it out :)

• Kapil Yadav: Popup shows even after you get logged in and click to login link.
• David Duong: @kapilyadav Do you find a solution for it?
• Kapil Yadav: Yes, actually after re-deploy static content, it worked.
• Jaisa: Works, like a charm