9

How do I check if customer is logged in or not in knockout template?

my template

<!-- ko if: customer().firstname -->

<!-- /ko -->

my js

 define(
    [
        'ko',
        'jquery',
        'Magento_Ui/js/form/element/abstract',
        'mage/url',
        'Magento_Customer/js/customer-data',
        'mage/translate'
    ],
    function (Component,storage,ko,jquery,Abstract, url, customerData, $t) {
        'use strict';

        return Component.extend({
            message: function() {
            loggedMessage : $t('Welcome, %1!')
            },
            htmlLoggedMessage: ko.observable(),
            isLoggedIn: ko.observable(),
            customer: ko.observable({}),
            initialize: function() {
                this._super();
                if(this.isCustomerLogged != 0) {
                    this.isLoggedIn(true);
                }
                this.checkCustomerLocalStorage();
            },
            /**
             * Check customer localstorage
             */
            checkCustomerLocalStorage: function () {
                var self = this;
                var time = setInterval(function () {
                    self.customer = customerData.get('customer');
                    if (localStorage["mage-cache-storage"] != '{}') {
                        clearInterval(time);
                    }
                    if (self.customer().fullname) {
                        var name = self.customer().fullname;
                        var message = self.message.loggedMessage.replace('%1', name);
                        self.htmlLoggedMessage(message);
                    }
                }, 1000);
            }
        });
    }
);

I followed this link but its still entering in to if condition:

How to check if customer is logged in or not in magento 2?

2

4 Answers 4

14

You need to pass dependency of customer object, 'Magento_Customer/js/model/customer',

define(
[
    'ko',
    'jquery',   
    'Magento_Customer/js/model/customer',
    'mage/translate'
],
function (ko,jquery, customer,$t) {
    'use strict';
    return Component.extend({        
        isCustomerLoggedIn: customer.isLoggedIn, /*return  boolean true/false */
        initialize: function() {
            this._super();
            /* check using below method */
            var isLoggedIn = this.isCustomerLoggedIn();
        }
    });
}

Now you can check it using customer.isLoggedIn() returns boolean value.

define(
[
    'ko',
    'jquery',
    'Magento_Ui/js/form/element/abstract',
    'mage/url',
    'Magento_Customer/js/customer-data',    
    'Magento_Customer/js/model/customer',
    'mage/translate'
],
function (Component,storage,ko,jquery,Abstract, url, customerData, customer,$t) {
    'use strict';

    return Component.extend({
        message: function() {
        loggedMessage : $t('Welcome, %1!')
        },
        htmlLoggedMessage: ko.observable(),
        isLoggedIn: ko.observable(),
        isCustomerLoggedIn: customer.isLoggedIn,
        customer: ko.observable({}),
        initialize: function() {
            this._super();
            if(this.isCustomerLoggedIn()) {
                this.isLoggedIn(true);
            }
            this.checkCustomerLocalStorage();
        },
        /**
         * Check customer localstorage
         */
        checkCustomerLocalStorage: function () {
            var self = this;
            var time = setInterval(function () {
                self.customer = customerData.get('customer');
                if (localStorage["mage-cache-storage"] != '{}') {
                    clearInterval(time);
                }
                if (self.customer().fullname) {
                    var name = self.customer().fullname;
                    var message = self.message.loggedMessage.replace('%1', name);
                    self.htmlLoggedMessage(message);
                }
            }, 1000);
        }
    });
}
5
  • Welcome @nagendra Glad to know you have useful. Nov 30, 2017 at 13:38
  • 4
    from what I can tell customer.isLoggedIn() only works on the checkout as it checks the window object in vendor/magento/module-customer/view/frontend/web/js/model/customer.js. Your function checkCustomerLocalStorage is what works on all other pages and it could be simplified to use something like customerData.get('customer').fullname
    – Holly
    Aug 2, 2018 at 17:40
  • Also, I don't see the need for the setInterval function and checking localStorage , can you remember why you used them? Thanks all the same, the answer was helpful :)
    – Holly
    Aug 2, 2018 at 17:42
  • This worked for me: customerData.get('customer')().fullname, note additional () parentheses to call get(), because it is a function Apr 26, 2019 at 8:28
  • @RakeshJesadiya, could you please have a look at my post on the similar issue? I'm not sure how to implement the solution given by you. Here is my post. magento.stackexchange.com/questions/358323/… Jul 28 at 5:23
1

It is quite simple, inside Magento_Customer/js/view/customer class there is a method firstname and we can use it to check if a customer is logged in or not.

<!-- ko if: customer().firstname  -->
    <?= __('Out') ?>
<!-- /ko -->
<!-- ko ifnot: customer().firstname  -->
    <?= __('In') ?>
<!-- /ko -->
<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Ui/js/core/app": {
                "components": {
                    "customer": {
                        "component": "Magento_Customer/js/view/customer"
                    }
                }
            }
        }
    }
</script>
1
  • For Magento2.4 at least, do not forget to add data-bind="scope: 'customer'" to the parent element where you perform the checks.
    – Victor F
    Apr 29 at 7:53
0

Here is another example(customer.isLoggedIn with ko.observable()):-

define([
    'ko',
    'jquery',
    'uiComponent',
    'Magento_Customer/js/model/customer',
], function (ko, $, Component, customer) {
    'use strict';

    var checkoutConfig = window.checkoutConfig,
        ConfigIsEnabled = checkoutConfig ? checkoutConfig.AppIsEnabled : {};

    return Component.extend({
        defaults: {
            template: 'Magento_CustomModule/checkout/app-agreements'
        },
        isVisible: ko.observable(),
        isCustomerLoggedIn: customer.isLoggedIn,

        initialize: function () {
            this._super();

            if (!this.isCustomerLoggedIn()) {
                this.isVisible(false);
            } else {
                this.isVisible(ConfigIsEnabled);
            }
        }
    });
});
-1

Just for some extra clarity:

ko.observable(window.isCustomerLoggedIn)

And

customer.isLoggedIn

Mentioned above will only work on checkout, cart, and knockout templates. for everything else you need to use:

    requirejs(['Magento_Customer/js/customer-data'], function (customerData) {
        var firstname = customerData.get('customer')().firstname;
        if (typeof (firstname) === "undefined") {
//Customer is not logged in
else{
// Customer is logged in
}
});

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.