Edit in GitHubLog an issue

Private content

Since private content is specific to individual users, it is reasonable to handle it on the client.

Use our customer-data JS library to store private data in local storage, invalidate private data using customizable rules, and synchronize data with the backend.

This example displays a product comparison on a cacheable page.

Create a section source#

The section source class is responsible for retrieving data for the section. As a best practice, we recommend that you put your code within the Vendor/ModuleName/CustomerData namespace. Your classes must implement the Magento\Customer\CustomerData\SectionSourceInterface interface.

The public method getSectionData must return an array with data for a private block.

Example

Add the following to your component's dependency injection configuration (di.xml):

Copied to your clipboard
1<type name="Magento\Customer\CustomerData\SectionPoolInterface">
2 <arguments>
3 <argument name="sectionSourceMap" xsi:type="array">
4 <item name="custom-name" xsi:type="string">Vendor\ModuleName\CustomerData\ClassName</item>
5 </argument>
6 </arguments>
7</type>

Create a block and template#

To render private content, create a block and a template to display user-agnostic data; this data is replaced with user-specific data by the UI component.

Replace private data in blocks with placeholders (using Knockout syntax). The init scope on the root element is data-bind="scope: 'compareProducts'", where you define the scope name (compareProducts in this example) in your layout.

Initialize the component as follows:

Copied to your clipboard
1<script type="text/x-magento-init">
2 {"<css-selector>": {"Magento_Ui/js/core/app": <?php echo $block->getJsLayout();?>}}
3</script>

Example

Configure a UI component#

The UI component renders block data on the storefront. To initialize the UI component, you must trigger the parent initialization method by calling the _super() method and defining a property to store customer data. The customerData.get() method returns a Knockout's observable.

Copied to your clipboard
1initialize: function () {
2 this._super();
3 this.compareProducts = customerData.get('compare-products');
4}

Example

All properties are available in the template where the UI component initialized.

Example of defining a UI component in a layout

Invalidate private content#

Specify actions that trigger cache invalidation for private content blocks in a sections.xml configuration file in the Vendor/ModuleName/etc/frontend directory. The application invalidates the cache on a POST or PUT request.

Customer sections was designed to cache private data in browser storage. This means that any customer section will not be updated until proper action was made.

These are some exception cases:

  • Store and website switching, after any of these action customer section cart will be updated.
  • Customer cart lifetime option section_data_lifetime which is 60 minutes by default. After scheduled time passes, section cart will be updated.

The following example adds comments to app/code/Magento/Catalog/etc/frontend/sections.xml so you can see what the code is doing.

Copied to your clipboard
1<?xml version="1.0"?>
2<!--
3/**
4 * Copyright © 2016 Magento. All rights reserved.
5 * See COPYING.txt for license details.
6 */
7-->
8<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
9 xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Customer:etc/sections.xsd">
10 <!-- invalidates the "compare-products" section when a user
11 adds a product to the comparison, resulting in a "catalog/product_compare/add" POST request -->
12 <action name="catalog/product_compare/add">
13 <section name="compare-products"/>
14 </action>
15 <!-- invalidates the section when a customer removes a product from the comparison -->
16 <action name="catalog/product_compare/remove">
17 <section name="compare-products"/>
18 </action>
19 <!-- invalidates the section when a customer clears all products from the comparison -->
20 <action name="catalog/product_compare/clear">
21 <section name="compare-products"/>
22 </action>
23</config>

There are sections that allow you to declare an 'action' node without specifying a sections, for instance, when logging out:

Copied to your clipboard
1<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
2 xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Customer:etc/sections.xsd">
3 <action name="customer/account/logout"/>
4</config>

This tells The application to invalidate all sections. But if you have declared sections for this action in another .xml file, it will override the initial sections and only newly added sections will be invalidated. If you need to reload all sections on some action, use * as section name or use an empty action and ensure that they will not be overriden by any other rules:

Copied to your clipboard
1<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
2 xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Customer:etc/sections.xsd">
3 <action name="customer/account/editPost">
4 <section name="*"/>
5 </action>
6</config>

Other examples:

Version private content#

Private content, which is stored in the browser local storage, uses the private_content_version cookie to store the version.

Versioning works as follows:

  1. The user performs some action, such as adding to a cart, that results in an POST or PUT request to the Adobe Commerce or Magento Open Source application.

  2. The server generates the private_content_version cookie for this user and returns the response to the browser.

  3. JavaScript interprets the presence of the private_content_version cookie to mean that private content is present on the page, so it sends an AJAX request to the application server to get the current private content.

  4. The server's reply is cached in the browser's local storage.

    Subsequent requests with the same data version are retrieved from local storage.

  5. Any future HTTP POST or PUT request changes the value of private_content_version and results in the updated content being cached by the browser.

Cacheable page checklist#

  • Pages use GET requests

  • Pages render only cacheable blocks

  • Pages render without sensitive private data; session and customer DTO objects are empty

  • Functionality specific to both current session (customer) and page should be written using JavaScript (e.g., related product listing should exclude items that are already in the shopping cart)

  • Model and block level should identify themselves for invalidation support

  • Declare a custom context variable if you plan to show different public content with the same URL

Non-cacheable page checklist#

  • Use POST requests to modify Magento state (e.g., adding to shopping cart, wishlist, etc.)

  • Blocks that can't be cached should be marked as non-cacheable in the layout. However, be aware that adding a non-cacheable block to a page prevents the full page cache from caching that page.

  • Controllers that don't use layouts should set no-cache HTTP headers

Was this helpful?
  • Privacy
  • Terms of Use
  • Do not sell my personal information
  • AdChoices
Copyright © 2022 Adobe. All rights reserved.