How to use Private Content or Sections in Magento 2?

We will show here how we can display a private content in a full cached page, it is very useful if you want to display information per customer
Magento loads sections by AJAX request to /customer/section/load/ and caches loaded data in the browser local storage under the key mage-cache-storage. Magento tracks when some section is changed and load updated section automatically.

We will use this Vendor/Module as names

Step 1: Define a custom section
We will define a custom section in the di.xml file by adding a new section into sections pool.

Create di.xml file in app/code/Vendor/Module/etc/frontend directory.

<?xml version="1.0"?>
<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="custom_section" xsi:type="string">Vendor\Module\CustomerData\CustomSection</item>
            </argument>
        </arguments>
    </type>
</config>

Next, create CustomSection.php file in app/code/Vendor/Module/CustomerData directory.

<?php
namespace Vendor\Module\CustomerData;
use Magento\Customer\CustomerData\SectionSourceInterface;

class CustomSection implements SectionSourceInterface
{
    public function getSectionData()
    {
        return [
            'customdata' => "put here your dynamic data",
        ];
    }
}

In getSectionData() method we will define our data that we want to store in section.

Step 2: Display custom section data in frontend
We will display our custom section data in the product view page. You can get section data in any Magento pages.

Next, we will create catalog_product_view.xml in app/code/Vendor/Module/view/frontend/layout directory.

<?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="product.info.main">
            <block class="Magento\Catalog\Block\Product\View" name="aureatelabs_custom_section" after="-"
                   template="Vendor_Module::custom_section.phtml"/>
        </referenceContainer>
    </body>
</page>

Next, we will create a custom_section.phtml in app/code/Vendor/Module/view/frontend/templates directory.

<div class="vendor-module-section"data-bind="scope: 'section'">
    <p data-bind="text: customsection().customdata"></p>
</div>
<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Ui/js/core/app": {
                "components": {
                    "section": {
                        "component": "Vendor_Module/js/section"
                    }
                }
            }
        }
    }
</script>

Next, We will create section.js in app/code/Vendor/Module/view/frontend/web/js directory.

define([
    'uiComponent',
    'Magento_Customer/js/customer-data'
], function (Component, customerData) {
    'use strict';

    return Component.extend({
        initialize: function () {
            this._super();
            this.customsection = customerData.get('custom_section');
        }
    });
});

Now run the below command and check on any product view page.

php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento cache:flush

How to use Private Content or Sections in Magento 2?

Tags