0

I am using magento2.4.1.

I want to remove login popup from proceed to checkout button on minicart and want to add login URL, So if guest user click on proceed to checkout from minicart it redirect customer to login page for login before checkout step.

How can I do this in my custom theme?

1
  • there is no such feature in default magento .are you using any plugin ? then you will have to override that plugin May 29 at 7:55
1

The popup that appears when the mini-cart "Proceed to Checkout" button is clicked and guest checkout is disabled is handled by:

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

One way to achieve the goal here is to override the showModal method.

This can be done by creating a theme-level override, i.e.

app/design/frontend/[your theme]/luma/Magento_Customer/web/js/model/authentication-popup.js

define([
    'jquery',
    'Magento_Ui/js/modal/modal',
    'mage/url'
], function ($, modal, url) {
    'use strict';

    return {
        modalWindow: null,

        /**
         * 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',
                'buttons': []
            };

            this.modalWindow = element;
            modal(options, $(this.modalWindow));
        },

        /** Redirect to login page instead of showing modal */
        showModal: function () {
            const loginUrl = url.build('customer/account/login');
            const refererUrl = btoa(url.build('checkout/cart'));
            window.location.href = loginUrl + '/referer/' + refererUrl;
            return;
        }
    };
});

This replaces the showModal behavior with a redirect to the login page followed by a redirect to the checkout page after login.

This code could be added to an extension-level override or mixin, but since it only handles this pop-up, that seems like overkill.

As far as I can tell, this modal is only shown for not-logged-in customers when guest checkout is disabled. These conditions are determined in:

vendor/magento/module-checkout/view/frontend/web/js/sidebar.js

This file includes Magento_Customer/js/customer-data as customerData. In the _initContent method, it defines a variable that loads the customerData customer object:

. . .
var cart = customerData.get('cart'),
    customer = customerData.get('customer'),
    element = $(this.options.button.checkout);
. . .

This is later tested to see if this object has a firstName property (and if the related cart object shows that guest checkout is allowed):

. . .
if (!customer().firstname && cart().isGuestCheckoutAllowed === false) {
. . .

The assumption here is that that customer().firstname will be falsey if the customer is not logged in.

The following is probably out of scope here, but worth mentioning:

sidebar.js uses customerData.get('customer'), which will return data from browser local storage as-is. It returns a knockout observable object, hence customer().firstname instead of customer.firstname.

These objects require special consideration when used in contexts where a value might be updated after your code is run because:

  1. Some other process has updated the initial value asynchronously.
  2. Your code happens to run before the initial values are set in the first place.

The following example shows code running only after customerData's customer object is updated:

require(['Magento_Customer/js/customer-data'], function(customerData) {
    let customer = customerData.get('customer');
    customer.subscribe(function () {
        console.log("customer object's firstName property is now set to:" + customer().firstName);
    });
    customerData.reload(['customer']);
});
3
  • your code is working for me, Can you tell me how to check customer is login or not in this file? May 31 at 10:42
  • I added some additional info about checking whether the customer is logged in.
    – jiheison
    May 31 at 18:13
  • Thanks @jiheison for your efforts to solve this issue Jun 1 at 4:38

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.