1

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 :
enter image description here

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

2

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

3
  • The first option is also returning undefined for me, but the second works perfectly ! Thank you. – Océane Mar 30 at 8:56
  • customerdata.get('customer')() returns undefined? Strange! It should return an object. Even if the customer is not logged in the object contains only a key "data_id". But if its logged in contains others keys like fullname and firstname, you can get value of these keys like that: customerData.get('customer')()['fullname']. If that key don't exist the customer is not logged in (useful if you need test it). – jefferson Mar 31 at 1:00
  • customerData.get('customer')() is returning an object but customerData.get('customer')()['fullname'] is undefined even is customer is logged in... With the subscribe function value is recover fine – Océane Mar 31 at 7:54
-1

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.

4
  • Unfortunatly I cannot do this because I am on product page, this will put all product page not cacheabled... – Océane Mar 30 at 7:16
  • As this block will be on the product page you should not use cacheable="false" on a block. If you do this the page will not be cacheable by varnish or the FPC. – Taschert Mar 30 at 12:09
  • Only visit_recorder this block going in cacheable="false" not whole product page. – Sweety Masmiya Mar 31 at 11:05
  • @SweetyMasmiya with cacheable="false" the whole page becomes non cacheable. Sad, but true. We should avoid it always when possible. – jefferson Jun 3 at 23:27

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.