6

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?

9
  • Where is that code from? I could not locate in magento.
    – P S
    Jan 7, 2018 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. Jan 7, 2018 at 19:22
  • So you want to create custom popup?
    – P S
    Jan 8, 2018 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. Jan 8, 2018 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?
    – P S
    Jan 8, 2018 at 2:27

1 Answer 1

13

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.