Menu Close
    Start a Project Request quote Reading list Switch to dark mode

    Sections in Magento 2

    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.

    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 the setting data in different sections.

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

    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.

    Template file: customsection.phtml

    In template file, you can see we have bind the div.wk-customsection with the component section. Now, we will create the Webkul/Section/frontend/web/js/section.js file.

    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. 🙂

    . . .

    Comments (21)

    Add Your Comment

  • Foysal
    Thanks for the documentation, it’s working.
    But I want to show the data into homepage. what should i do ?
    • Ayaz Mittaqi
      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.
  • Back to Top
    Hire Us!
    Brief us about your requirements and we'll get back to you.
    Woo! Hooy!
    We have just recieved your project brief and our expert will contact you shortly.
    Send Again