How is the checkout authentication modal dialog implemented?

jquery-ui-widget

authentication-popup

dialog

popup

customer-authentication

proceed-to-checkout

modal

dmitry_fedyuk (Dmitry Fedyuk) 2016-03-11 15:08:25 UTC #1

\

The «Go to Checkout» button in a Knocnkout template:

github.com

magento/magento2/blob/487f5f45/app/code/Magento/Checkout/view/frontend/web/template/minicart/content.html#L52-L58


<button
        id="top-cart-btn-checkout"
        type="button"
        class="action primary checkout"
        data-bind="attr: {title: $t('Go to Checkout')}">
    <!-- ko i18n: 'Go to Checkout' --><!-- /ko -->
</button>

Its DOM identifier:

github.com

magento/magento2/blob/487f5f45/app/code/Magento/Checkout/view/frontend/web/js/view/minicart.js#L45-L46


"button": {
    "checkout": "#top-cart-btn-checkout",

Creating the authenticationPopup UI component:

github.com

magento/magento2/blob/487f5f45/app/code/Magento/Customer/view/frontend/layout/default.xml#L24-L41


<referenceContainer name="content">
    <block class="Magento\Customer\Block\Account\AuthenticationPopup" name="authentication-popup" as="authentication-popup" template="account/authentication-popup.phtml">
        <arguments>
            <argument name="jsLayout" xsi:type="array">
                <item name="components" xsi:type="array">
                    <item name="authenticationPopup" xsi:type="array">
                        <item name="component" xsi:type="string">Magento_Customer/js/view/authentication-popup</item>
                        <item name="children" xsi:type="array">
                            <item name="messages" xsi:type="array">
                                <item name="component" xsi:type="string">Magento_Ui/js/view/messages</item>
                                <item name="displayArea" xsi:type="string">messages</item>
                            </item>
                        </item>
                    </item>
                </item>
            </argument>
        </arguments>
    </block>

Its template:

github.com

magento/magento2/blob/487f5f45/app/code/Magento/Customer/view/frontend/web/js/view/authentication-popup.js#L30-L30


template: 'Magento_Customer/authentication-popup'

Triggering the components’ initialization:

github.com

magento/magento2/blob/487f5f45/app/code/Magento/Customer/view/frontend/web/template/authentication-popup.html#L9-L9


data-bind="afterRender: setModalElement, blockLoader: isLoading"

github.com

magento/magento2/blob/487f5f45/app/code/Magento/Customer/view/frontend/web/js/view/authentication-popup.js#L14-L14


'Magento_Customer/js/model/authentication-popup',

github.com

magento/magento2/blob/487f5f45/app/code/Magento/Customer/view/frontend/web/js/view/authentication-popup.js#L20-L20


function($, ko, Component, loginAction, customerData, authenticationPopup, $t, url, alert) {

github.com

magento/magento2/blob/487f5f45/app/code/Magento/Customer/view/frontend/web/js/view/authentication-popup.js#L42-L47


/** Init popup login window */
setModalElement: function (element) {
    if (authenticationPopup.modalWindow == null) {
        authenticationPopup.createPopUp(element);
    }
},

Creating a popup (it is invisible yet):

github.com

magento/magento2/blob/487f5f45/app/code/Magento/Customer/view/frontend/web/js/model/authentication-popup.js#L17-L29


/** Create popUp window for provided element */
createPopUp: function(element) {
    this.modalWindow = element;
    var options = {
        'type': 'popup',
        'modalClass': 'popup-authentication',
        'responsive': true,
        'innerScroll': true,
        'trigger': '.proceed-to-checkout',
        'buttons': []
    };
    modal(options, $(this.modalWindow));
},

Assigning a handler to the «Go to Checkout» button’s click event:

github.com

magento/magento2/blob/487f5f45/app/code/Magento/Checkout/view/frontend/web/js/sidebar.js#L9-L9


'Magento_Customer/js/model/authentication-popup',

github.com

magento/magento2/blob/487f5f45/app/code/Magento/Checkout/view/frontend/web/js/sidebar.js#L16-L16


], function ($, authenticationPopup, customerData, alert, confirm) {

github.com

magento/magento2/blob/487f5f45/app/code/Magento/Checkout/view/frontend/web/js/sidebar.js#L52-L66


events['click ' + this.options.button.checkout] = $.proxy(function () {
    var cart = customerData.get('cart'),
        customer = customerData.get('customer');


    if (!customer().firstname && !cart().isGuestCheckoutAllowed) {
        if (this.options.url.isRedirectRequired) {
            location.href = this.options.url.loginUrl;
        } else {
            authenticationPopup.showModal();
        }


        return false;
    }
    location.href = this.options.url.checkout;
}, this);

github.com

magento/magento2/blob/487f5f45/app/code/Magento/Customer/view/frontend/web/js/model/authentication-popup.js#L31-L34


/** Show login popup window */
showModal: function() {
    $(this.modalWindow).modal('openModal');
}

The standard Magento 2 widget for the modal dialogs:

github.com

magento/magento2/blob/487f5f45/app/code/Magento/Customer/view/frontend/web/js/model/authentication-popup.js#L10-L10


'Magento_Ui/js/modal/modal'

github.com

magento/magento2/blob/487f5f45/app/code/Magento/Ui/view/base/web/js/modal/modal.js#L40-L43


/**
 * Modal Window Widget
 */
$.widget('mage.modal', {

github.com

magento/magento2/blob/487f5f45/app/code/Magento/Ui/view/base/web/js/modal/modal.js#L215-L234


/**
 * Open modal.
 * * @return {Element} - current element.
 */
openModal: function () {
    this.options.isOpen = true;
    this.focussedElement = document.activeElement;
    this._createOverlay();
    this._setActive();
    this._setKeyListener();
    this.modal.one(this.options.transitionEvent, _.bind(this._trigger, this, 'opened'));
    this.modal.one(this.options.transitionEvent, _.bind(this._setFocus, this, 'end', 'opened'));
    this.modal.addClass(this.options.modalVisibleClass);


    if (!this.options.transitionEvent) {
        this._trigger('opened');
    }


    return this.element;
},

The «Create an Account» button:

github.com

magento/magento2/blob/487f5f45/app/code/Magento/Customer/view/frontend/web/template/authentication-popup.html#L26-L32


<div class="actions-toolbar">
    <div class="primary">
        <a class="action action-register primary" data-bind="attr: {href: registerUrl}">
            <span data-bind="i18n: 'Create an Account'"></span>
        </a>
    </div>
</div>

It is just a link to the registration page:

github.com

magento/magento2/blob/487f5f45/app/code/Magento/Checkout/view/frontend/web/js/view/authentication.js#L24-L24


registerUrl: checkoutConfig.registerUrl,

github.com

magento/magento2/blob/487f5f45/app/code/Magento/Checkout/Model/DefaultConfigProvider.php#L266-L266


$output['registerUrl'] = $this->getRegisterUrl();

github.com

magento/magento2/blob/487f5f45/app/code/Magento/Checkout/Model/DefaultConfigProvider.php#L422-L431


/**
 * Retrieve customer registration URL
 *
 * @return string
 * @codeCoverageIgnore
 */
public function getRegisterUrl()
{
    return $this->customerUrlManager->getRegisterUrl();
}

github.com

magento/magento2/blob/487f5f45/app/code/Magento/Customer/Model/Url.php#L163-L171


/**
 * Retrieve customer register form url
 *
 * @return string
 */
public function getRegisterUrl()
{
    return $this->urlBuilder->getUrl('customer/account/create');
}

The «Sign In» button:

github.com

magento/magento2/blob/487f5f45/app/code/Magento/Customer/view/frontend/web/template/authentication-popup.html#L85-L87


<button type="submit" class="action action-login secondary" name="send" id="send2">
    <span data-bind="i18n: 'Sign In'"></span>
</button>

It is a part of an authentication form:

github.com

magento/magento2/blob/487f5f45/app/code/Magento/Customer/view/frontend/web/template/authentication-popup.html#L51-L54


<form class="form form-login"
      method="post"
      data-bind="submit:login"
      id="login-form">

Handling the form submission (on the «Sign In» button click):

github.com

magento/magento2/blob/487f5f45/app/code/Magento/Customer/view/frontend/web/js/view/authentication-popup.js#L66-L80


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

github.com

magento/magento2/blob/487f5f45/app/code/Magento/Customer/view/frontend/web/js/view/authentication-popup.js#L12-L12


'Magento_Customer/js/action/login',

github.com

magento/magento2/blob/487f5f45/app/code/Magento/Customer/view/frontend/web/js/view/authentication-popup.js#L20-L20


function($, ko, Component, loginAction, customerData, authenticationPopup, $t, url, alert) {

github.com

magento/magento2/blob/487f5f45/app/code/Magento/Customer/view/frontend/web/js/action/login.js#L16-L22


action = function(loginData, redirectUrl, isGlobal, messageContainer) {
    messageContainer = messageContainer || globalMessageList;
    return storage.post(
        'customer/ajax/login',
        JSON.stringify(loginData),
        isGlobal
    ).done(function (response) {

github.com

magento/magento2/blob/487f5f45/app/code/Magento/Customer/view/frontend/web/js/action/login.js#L23-L38


if (response.errors) {
    messageContainer.addErrorMessage(response);
    callbacks.forEach(function(callback) {
        callback(loginData);
    });
} else {
    callbacks.forEach(function(callback) {
        callback(loginData);
    });
    customerData.invalidate(['customer']);
    if (redirectUrl) {
        window.location.href = redirectUrl;
    } else {
        location.reload();
    }
}

How to use the popup UI modal in frontend with own content?

How is the mage.modal UI widget's animation implemented?

How is the «Add Related Products» modal window rendered?

dmitry_fedyuk (Dmitry Fedyuk) 2016-04-21 08:41:59 UTC #2

See also:

How is the mage.modal UI widget’s animation implemented?

jignesh_sensussoft (Jignesh Sensussoft) 2017-09-19 13:07:39 UTC #3

Sir This Code base not modal dialog box open
but,Checkout page redirect page and checkout page above part login id and password filed view
It is a not a proper solution
Please give me a right Solution

dmitry_fedyuk (Dmitry Fedyuk) 2017-09-19 13:13:16 UTC #4

Learn how to pay for the «right solution» here, «sir»: Magento 2 monthly support service

jignesh_sensussoft (Jignesh Sensussoft) 2017-09-19 13:16:55 UTC #5

Sorry Sir I want to open only modal dialog box
i dont learn any paypal services
please give me propar solution in dialog box

Alex_Skrashuk (Alex Skrashuk) 2017-11-17 08:39:52 UTC #6

Amazing guide! Really great thanks!

likemusic (Valerij Ivashchenko) 2018-01-06 04:22:28 UTC #7

Authentication popup shown only when guest checkout disabled.
Admin panel > Stores > Configuration > Sales > Checkout > Checkout options > Allow Guest Checkout > No.