Recover customer data on product page

Question

I am trying to recover customer data on product page as I cannot pass by php because of full page cache I want to do it in js.

I added an phtml block on my page in footer, catalog_product_view.xml

<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <referenceContainer name="footer-container">
        <block class="My\Module\Block\VisitRecorder" template="My_Module::visit_recorder.phtml" name="visit_recorder" after="-"/>
    </referenceContainer>
</page>

In this block I instanciate a widget managing the process

<div id="visit-recording">
    <?= $this->getBlockHtml('formkey');?>
</div>

<script>
    require(
    [
        'jquery',
        'visitRecorder',
        'domReady!'
    ], function ($, visitRecorder) {

        var url = window.location.href;
        var formKey = $("#visit-recording [name='form_key']").val();


        $('#visit-recording').visitRecorder({
            "url": url,
            "formKey": formKey,
        });
    });
</script>

In my requirejs-config.js I registered my widget :

var config = {
    map: {
        '*': {
            visitRecorder: 'My_Module/js/visitRecorder',
        }
    }
};

In widget I tried to recover customer data :

define(
    [
        'jquery',
        'Magento_Customer/js/customer-data',
        'domReady!'
    ],
    function (
        $, customerData
    ) {

        $.widget('namespace.visitRecorder', {

            options: {
                url : "",
                formKey : "",
            },

            _create: function () {
                var self = this;
                this._super();
            },

            /**
             * @private
             */
            _init: function () {
                this._super();

                var customer = customerData.get('customer');
                console.log(customer);
                console.log(customer().firstname);

            },

        });

    return $.namespace.visitRecorder;
});

In console I get :

I saw I core checkout magento the same method are used so I don't understand why this is not working.

Answer 1

You're getting the observable, this is why u see a function in console.log. Its a knockout JS Observable, so to you get the current value use the following syntax:

customerData.get('customer')()

You can also subscribe to it observable example:

customerData.get('customer').subscribe(function (newVal) {
     console.log(newVal);
});

This way your code works always with latest value, or do something when it changes. If you're using knockoutJS template you can easily keep your template up to date

Answer 2

You can set block cacheable="false"

<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <referenceContainer name="footer-container">
        <block class="My\Module\Block\VisitRecorder" template="My_Module::visit_recorder.phtml" name="visit_recorder" after="-" cacheable="false"/>
    </referenceContainer>
</page>

Hope it's useful for you.