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. To create our custom section, we need to give an entry in the 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 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.
<?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 verify that everything is working fine so far, 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.
Now, we will fetch the message that 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="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 the 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 the template file, you can see we have bound the div.wk-customsection with the component section.
Note: The style tag used in the template file is only for modifying the CSS for custom section 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
}
});
});
After refreshing the cache, navigate to any product page and you will notice that the configured message is now displayed as expected, confirming that the section data is being loaded correctly.
In the section.js file, we leverage Magento_Customer/js/customer-data.
It plays a key role in Magento by managing the storage, retrieval, and automatic rendering of customer-related section data on the frontend without requiring full page reloads.
This section’s data is dynamically refreshed whenever Magento processes AJAX requests using POST, PUT, or DELETE methods.
Advantages of using a section
When caching is enabled, the whole page content is cached, so this helps us to dynamically manage the components ofthe 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, and wish list are all managed by the section.
All section data is fetched in 1 single Ajax call, hence the number of Ajax requests is reduced to a huge number.
You can also manage when to update the section data by using etc/frontend/sections.xml
If you require technical support, feel free to email us at [email protected]
Additionally, explore a wide array of solutions to boost your store’s capabilities by visiting our Adobe Commerce modules section and Adobe Commerce marketplace addons.
Or looking to improve your store’s speed and overall performance? Check out our Magento 2 Speed & Optimization services.
Get expert support and build customized solutions by hiring skilled Adobe Commerce developers for your project.
That’s all for this post. Happy Caching. 🙂
23 comments
For this, just add another line of code in Webkul/Section/frontend/web/js/section.js file, under
this._super();Code to be added ->
customerData.reload();If you are still facing the issue, please provide us with the code used at your instance so we can help you with our utmost potential.
But I want to show the data into homepage. what should i do ?
can we pass parameters to getSectionData function
Thank you for sharing this post
Thank you!
Thanks 🙂