I have created one module for the custom section. Here is the code.


  <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
   <type name="Magento\Customer\CustomerData\SectionPoolInterface">
        <argument name="sectionSourceMap" xsi:type="array">
            <item name="customsection" xsi:type="string">Demo\Section\CustomerData\CustomSection</item>


namespace Demo\Section\CustomerData;
use Magento\Customer\CustomerData\SectionSourceInterface;

class CustomSection implements SectionSourceInterface

protected $_checkoutSession;

public function __construct(\Magento\Checkout\Model\Session $checkoutSession)
    $this->_checkoutSession = $checkoutSession;


 * {@inheritdoc}
public function getSectionData()

  $total = $this->_checkoutSession->getQuote()->getSubtotal();
   return [
        'msg' =>'total is'.$total,

In the front side, I'm displaying this message on the product page.


<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <referenceContainer name="content">
        <block class="Magento\Framework\View\Element\Template"  name="custom_section" template="Demo_Section::customsection.phtml">


<div class="wk-customsection"data-bind="scope: 'section'">
  <p data-bind="text: customsection().msg"></p>
<script type="text/x-magento-init">
    "*": {
        "Magento_Ui/js/core/app": {
            "components": {
                "section": {
                    "component": "Demo_Section/js/section"


function (Component, customerData) {
'use strict';

return Component.extend({
    /** @inheritdoc */
    initialize: function () {
        this.customsection = customerData.get('customsection'); //pass your custom section name


      <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       <action name="checkout/cart/add">
         <section name="customsection"/>
       <action name="checkout/sidebar/removeItem">
        <section name="customsection"/>

Using this code I'm getting section message with the total in frontend while adding the item to cart or remove from cart. But Initially when someone open url for the first time when there is no item in the cart at that time section message is not displaying.

I know the section is only updated by post request but I need it initially when someone visits the page.

  • Have you found any solution? If yes, please share it Commented May 29, 2021 at 9:36

3 Answers 3


A section will only be loaded after a controller action is called.

For example you can display a Free Shipping Notification when a customers adds a product to their Shopping Cart.

If you want to force your section to always display use the reload function of the customerData on every page for your specific section. See the example below:

        customerData.reload(['free-shipping-notice']).done(function() {
            var dataCallback = customerData.get('free-shipping-notice');
            var data = dataCallback();

  • @mr-lewis Thanks for your help. How this fit in to my code. I have tried this customerData.reload(['customsection']).done(function() {this.customsection = customerData.get('customsection');}); but this binding not work Commented Dec 5, 2018 at 6:19
  • @mr-lewis: Can you please guide us more on this?
    – groy
    Commented May 24, 2020 at 13:10

This worked for me:

], function ($, customerData) {
    'use strict';

    var sections = ['cart'];//replace cart with your custom section name if you want to load your custom data
    customerData.reload(sections, true);

then include this js file at specific page as per your requirement.


Something that I encounter and belive it will be usefull for someone else. If you want to check if you have the data section you have to use customerData.getInitCustomerData() promise, to wait for the customer data to be initialized e.g.

customerData.getInitCustomerData().done(function () {

            customerData.reload(['custom-section']).done(function() {
                var dataCallback = customerData.get('delivery-section');
                var data = dataCallback();


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.