4

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?

  • Where is that code from? I could not locate in magento. – Purushotam Sangroula Jan 7 '18 at 19:07
  • 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. – Front_End_Dev Jan 7 '18 at 19:22
  • So you want to create custom popup? – Purushotam Sangroula Jan 8 '18 at 1:33
  • @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. – Front_End_Dev Jan 8 '18 at 1:36
  • 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? – Purushotam Sangroula Jan 8 '18 at 2:27
10

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

  • Popup shows even after you get logged in and click to login link. – Kapil Yadav Nov 20 '18 at 9:24
  • @kapilyadav Do you find a solution for it? – David Duong Sep 3 '19 at 14:21
  • Yes, actually after re-deploy static content, it worked. – Kapil Yadav Sep 5 '19 at 6:06
  • Works, like a charm – Jaisa Dec 13 '19 at 12:01

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.