Reading list Switch to dark mode

    Sections in Magento 2

    Updated 12 January 2023

    In Magento 2, a lot work has been done in improving the response time and Sections are a part of it. Magento sets customer related data in local storage of browser in key value pair. Each key is known as section. In this post we will see How we can create custom section in our module and use the data in the section in our template file.

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

    <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">
            <arguments>
                <argument name="sectionSourceMap" xsi:type="array">
                    <item name="customsection" xsi:type="string">\Webkul\Section\CustomerData\CustomSection</item>
                </argument>
            </arguments>
        </type>
    </config>

    You can see we have given item name=”customsection” and it define 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.

    <?php
    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 Application tab as in the screenshot below.

    Searching for an experienced
    Magento 2 Company ?
    Read More

    Now, we will fetch the message that we set in our custom section. For this, we call our template file customsection.phtml on 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="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <body>
            <referenceContainer name="content">
                <block class="Magento\Framework\View\Element\Template"  name="custom_section" template="Webkul_Section::customsection.phtml">
                </block>
            </referenceContainer>
        </body>
    </page>
    

    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>
    </div>
    <style>
    .wk-customsection{
    display: inline-block;
    }
    </style>
    <script type="text/x-magento-init">
        {
            "*": {
                "Magento_Ui/js/core/app": {
                    "components": {
                        "section": {
                            "component": "Webkul_Section/js/section"
                        }
                    }
                }
            }
        }
    </script>

    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.

    define([
        'uiComponent',
        'Magento_Customer/js/customer-data'
    ], function (Component, customerData) {
        'use strict';
        
        return Component.extend({
            /** @inheritdoc */
            initialize: function () {
                this._super();
                this.customsection = customerData.get('customsection'); //pass your custom section name
            }
        });
    });
    

    Now, refresh your cache and when you will visit any product page you can see the message set in section.
    section product view
    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. 🙂

    . . .
    Discuss on Helpdesk

    Leave a Comment

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


    21 comments

  • Foysal
    Thanks for the documentation, it’s working.
    But I want to show the data into homepage. what should i do ?
    • Ayaz Mittaqi (Moderator)
      you need to use cms_index_index layout in the above code snippet and most of the above implementation code is same, just need some update as per your requirement. Hope it helps.
  • robert baum
    Hi, thanks
    can we pass parameters to getSectionData function
    • Ayaz Mittaqi (Moderator)
      As the section class implements the class Magento\Customer\CustomerData\SectionSourceInterface, so while defining the function you need to use the same signature.
  • Dimple Panchal
    Excellent !! this is what was looking for. It helped a lot !!
    Thank you for sharing this post
  • grll
    In magento 2.3.3 after doing the 2 first steps I can’t find any new entry in mage-cache-storage any idea why ?
    • Ayaz Mittaqi (Moderator)
      I tried the same code in Magento 2.3.3 and its working. Its just you need to flush the cache after creating files. Also, you can check from here yourdomain.com/customer/section/load/ This returns a json of all the sections. Hope this helps. 🙂
  • Umer
    Nicely explained Webkul
  • Simeon Petrov
    The most sane tutorial I’ve seen for displaying private data.
    Thank you!
    • Ayaz Mittaqi (Moderator)
      Great to know you like the post.
      Thanks 🙂
      • Simeon Petrov
        Just a note – the part where you say “Now, to check everything is working fine till here…” actually does not work until the next files are created.
        • Ayaz Mittaqi (Moderator)
          I tried the same code in Magento 2.3.3 and its working. Its just you need to flush the cache after creating files. Also, you can check from here yourdomain.com/customer/section/load/ This returns a json of all the sections. Hope this helps. 🙂
  • Janusz
    Very good and consistent description. Thank you.
    • Ayaz Mittaqi (Moderator)
      Glad to know it helped you. 🙂
  • Web dev
    It’s not refreshing dynamic data on reload the page.
    • Ayaz Mittaqi (Moderator)
      Magento invalidates the cache on a POST or PUT request. If you are reloading the page then the section data will not be updated. If you still face issue, please elaborate the flow so that I can help you better. The simplest way to check this is by adding product to cart, the sections data get updated.
      • Ocean Rollins
        The simplest way to check this is by adding product to cart, the sections data get updated.
  • Thibault
    Merci !
  • BJ
    Perfect example for sections Thank You
  • snala
    Many thanks for this. Super concise and informative post.
    • Ayaz Mittaqi (Moderator)
      Welcome 🙂
  • Back to Top

    Message Sent!

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

    Back to Home