Our previous chapter touched upon config providers and the window.checkoutConfig object; a mechanism by which we can push our server-side data to our storefront when a page loads. The section mechanism allows us to push data to a browser page upon any named HTTP POST request.

Let's take a quick look at the <MAGENTO_DIR>/module-review/etc/frontend/sections.xml file:

<action name="review/product/post">
  <section name="review"/>
</action>

The definition provided here is to be interpreted as: "any storefront HTTP POST review/product/post request is to trigger a review section load," where review section load means Magento triggering an additional AJAX request following the completion of an observed HTTP POST. The result of this section load action, in this case, is the refresh of section data, retrievable via customerData.get('review') , as we will soon see.

Now let's take a look at the <MAGENTO_DIR>/module-review/etc/frontend/di.xml file:

<type name="MagentoCustomerCustomerDataSectionPoolInterface">
  <arguments>
    <argument name="sectionSourceMap" xsi:type="array">
      <item name="review" xsi:type="string">MagentoReviewCustomerDataReview</item>
    </argument>
  </arguments>
</type>

We are essentially injecting new items under the sectionSourceMap argument of the MagentoCustomerCustomerDataSectionPoolInterface type. The implementation of a custom section, such as the MagentoReviewCustomerDataReview, must implement the MagentoCustomerCustomerDataSectionSourceInterface . The underlying getSectionData method returns an array of key-value mappings, such as:

return [
    'nickname' => '',
    'title' => '', 
    'detail' => ''
]

These, in turn, become available to the uiComponent, as observed in the partial <MAGENTO_DIR>/module-review/view/frontend/web/js/view/review.js file:

define([
  'uiComponent',
  'Magento_Customer/js/customer-data',
  'Magento_Customer/js/view/customer'
], function (Component, customerData) {
  'use strict';

  return Component.extend({
    initialize: function () {
      this.review = customerData.get('review') ...
    },

    nickname: function () {
      return this.review().nickname ...
    }
  });
});

The get method of the customerData object can be used to fetch the sectionSourceMap data, such as customerData.get('review'). This data is refreshed every time an HTTP POST is made to the review/product/post route. This is because following any HTTP POST review/product/post, Magento will trigger an HTTP GET customer/section/load/?sections=review&update_section_id=true&_=1533836467415, which in turn updates customerData accordingly.