Reading list Switch to dark mode

    Sections in Magento 2

    Updated 15 March 2024

    Magento 2 has enhanced response time by implementing Sections, storing customer data in the browser’s local storage as key-value pairs. This post demonstrates creating custom sections within modules to utilize section data in template files.

    For this tutorial, I am using the Webkul_Section module. For creating our custom section we need to give an entry in etc/frontend/di.xml file.

    <config xmlns:xsi="" 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">Webkul\Section\CustomerData\CustomSection</item>

    You can see we have given an item name=”customsection” and it defines its data source as Webkul\Section\CustomerData\CustomSection.

    Now, we will create getSectionData() in Webkul\Section\CustomerData\CustomSection.php file. This function is responsible for setting data in different sections.

    namespace Webkul\Section\CustomerData;
    use Magento\Customer\CustomerData\SectionSourceInterface;
    class CustomSection implements SectionSourceInterface
         * {@inheritdoc}
        public function getSectionData()
            return [
                'msg' =>'Data from section',

    Now, to check everything is working fine till here, you can check the local storage of your browser. If you are using Chrome then you can see it under the Application tab as in the screenshot below.

    Searching for an experienced
    Magento 2 Company ?
    Find out More
    Magento section

    Now, we will fetch the message which we set in our custom section. For this, we call our template file customsection.phtml on the product view page.

    For that, create a file catalog_product_view.xml following the path app/code/Webkul/Section/view/frontend/layout with the below code:

    <?xml version="1.0"?>
    <page xmlns:xsi="" 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="Webkul_Section::customsection.phtml">

    Now create a template file with name “customsection.phtml” following the path app/code/Webkul/Section/view/frontend/templates with the below code:

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

    In template file, you can see we have bind the div.wk-customsection with the component section.

    Note: The style tag used in the template file is only for modifying the CSS for customsection data.
    You may either use/remove it according to your requirements.

    Now, we will create the Webkul/Section/frontend/web/js/section.js file.

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

    Now, refresh your cache and when you will visit any product page you can see the message set in section.

    In section.js file we have used Magento_Customer/js/customer-data as this js file is responsible for setting and getting section data. Section data gets updated when ajax call with post, put, delete requests are made.

    Advantages of using section

    When caching is enabled the whole page content is cached so this helps us to dynamically manage the components of page.

    For example, the complete page is cached, Now when the customer logs in only the components get updated with the value from the section as you can see customer name, cart, wish list are all managed by section.

    All section data is fetched in 1 single ajax call, hence the number of ajax requests are reduced to a huge number.

    You can also manage when to update the section data by using etc/frontend/sections.xml

    That’s all for this post. Happy Caching. 🙂

    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*


  • Max
    • Anupam Rastogi (Moderator)
  • Foysal
    • Ayaz Mittaqi (Moderator)
  • robert baum
    • Ayaz Mittaqi (Moderator)
  • Dimple Panchal
  • grll
    • Ayaz Mittaqi (Moderator)
  • Umer
  • Simeon Petrov
    • Ayaz Mittaqi (Moderator)
      • Simeon Petrov
        • Ayaz Mittaqi (Moderator)
  • Janusz
    • Ayaz Mittaqi (Moderator)
  • Web dev
    • Ayaz Mittaqi (Moderator)
      • Ocean Rollins
  • Thibault
  • BJ
  • snala
    • Ayaz Mittaqi (Moderator)
  • Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home