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.


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();

| improve this answer | |
  • @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 – chirag dodia Dec 5 '18 at 6:19
  • @mr-lewis: Can you please guide us more on this? – groy May 24 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.

| improve this answer | |

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.