Magento – Magento 2: Customer data from JS component

frontendjavascriptmagento2uicomponent

I need to get customer status in JS component – authenticated or anonymous. Could I get it using Magento_Customer/js/customer-data and how?

define([
    'Magento_Customer/js/customer-data'
], function (customerData) {
    let isAnon = customerData.???
});

Best Answer

Yes, use customerData.get(property) where property is what you want to get. Example:

customerData.get('customer')

Related Solutions

Fix Magento JavaScript Component Initialization Before PHTML Script – Magento 2

You can try to use RequireJs mixins in order to hook the core function.

var config = {
    'config':{
        'mixins': {
            'Magento_Customer/js/customer-data': {
                'Vendor_Module/hook.js':true
            }
        }
    }
};

Alan Storm described it here : http://alanstorm.com/the-curious-case-of-magento-2-mixins/

You can try to use shim option with requirejs as explain here :

Requirejs shim option not working

Magento2 – Fix Can’t Get Customer Data on Frontend

You're missing the scope, try this:

<div data-bind="scope: 'customer'">
    <h2>test2:
        <span data-bind="text: customer().firstname">
    </h2>
</div>

A complete example using the scope example-scope taken from this answer.

Template

<script type="text/x-magento-init">
{
    "*": {
        "Magento_Ui/js/core/app": {
            "components": {
                "example-scope": {
                    "component": "Magento_Cms/js/knockout-example",
                    "exampleMessage": "<?= __('Hello Magento Stack Exchange!') ?>"
                }
            }
        }
    }
}
</script>

<div data-bind="scope: 'example-scope'">
    <h2 data-bind="text: message"></h2>
    <!-- ko template: getTemplate() --><!-- /ko -->
</div>

Component

define(['ko', 'uiComponent'], function(ko, Component) {
    'use strict';

    return Component.extend({
        defaults: {
            exampleMessage: 'Hello?',
            template: 'Magento_Cms/test'
        },

        initialize: function() {
            this._super();
            console.log(this.exampleMessage);
            this.message = ko.observable(this.exampleMessage);
        }
    });
});