Magento2 RequireJS CustomerData is empty at page load, but populated once page finishes loading?

TL;DR code for this:

-- sidebar.phtml --

<script type="text/x-magento-init">
   {"#garageElement": {"Magento_Ui/js/core/app": <?php echo $block->getJsLayout(); ?>}}
</script>

<div data-bind="scope: 'garage'" id="garageElement">
    <span data-bind="text: garageData().customer_name"></span>
</div>

-- module's layout.xml --

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="sidebar.additional">
            <block class="Revival\Garage\Block\Garage" name="revival.garage.knockout.sidebar" template="Revival_Garage::sidebar.phtml" after="wishlist_sidebar">
                <arguments>
                    <argument name="jsLayout" xsi:type="array">
                        <item name="components" xsi:type="array">
                            <item name="garage" xsi:type="array">
                                <item name="component" xsi:type="string">Revival_Garage/js/view/garage</item>
                            </item>
                        </item>
                    </argument>
                </arguments>
            </block>
        </referenceBlock>
    </body>
</page>

-- garage.js --

define([
    'uiComponent',
    'Magento_Customer/js/customer-data'
], function(component, customerData){
    'use strict';
    return component.extend({
        initialize: function(){
            this._super();
            this.garageData = customerData.get("garage");
        }
    });
});

Nothing else had to be changed, code wise, it was all frontend stuff as the backend code always worked. Hope this post helps someone googling for this in the future.


For the people who come future, you can use subscribe function to wait for the object to load. So if anything changes in the object it will execute the function inside it.

        this.garage = customerData.get('garage');
        this.garage.subscribe(function () {
              console.log("--");
              console.log(garage.getCustomerName());
              console.log("--");
        }, this);

This will really help you to wait for cart information of the local storage.

Tags:

Frontend

Requirejs

Magento2

Section

Recent Posts