The «Go to Checkout » button in a Knocnkout template:
Its DOM identifier:
Creating the authenticationPopup UI component :
Its template:
Triggering the components’ initialization:
function($, ko, Component, loginAction, customerData, authenticationPopup, $t, url, alert) {
Creating a popup (it is invisible yet):
/** 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:
], function ($, authenticationPopup, customerData, alert, confirm) {
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);
The standard Magento 2 widget for the modal dialogs:
/**
* 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:
It is just a link to the registration page:
The «Sign In » button:
It is a part of an authentication form:
Handling the form submission (on the «Sign In » button click):
/** 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);
}
}
function($, ko, Component, loginAction, customerData, authenticationPopup, $t, url, alert) {
action = function(loginData, redirectUrl, isGlobal, messageContainer) {
messageContainer = messageContainer || globalMessageList;
return storage.post(
'customer/ajax/login',
JSON.stringify(loginData),
isGlobal
).done(function (response) {
Sir This Code base not modal dialog box open
Learn how to pay for the «right solution» here, «sir»: Magento 2 monthly support service
Sorry Sir I want to open only modal dialog box
Amazing guide! Really great thanks!
likemusic
January 6, 2018, 4:22am
7
Authentication popup shown only when guest checkout disabled.
\
