Public and private content

The Magento page cache stores entire cacheable pages; where pages are stored depends on whether the content is private or public. These terms are defined as follows:

  • Public, which can display to many customers.

    Public content is stored in your cache storage (file system, database, or Redis), or by Varnish. Examples of public content includes the header, footer, and category listing.

  • Private, which is not stored in the Magento server cache; instead, it’s stored on the client only.

    Examples of private content include the wishlist, shopping cart, customer name, and addresses. Private content should be limited to a small portion of the total content on a page.

Specify private content

To specify a block as private and have the Magento application render it in the browser, do the following:

Step 1: Create a section source

The section source class is responsible for retrieving data for the section. As a best practice, we recommend you put your code under 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 private block.

Example

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

<type name="Magento\Customer\CustomerData\SectionPoolInterface">
    <arguments>
        <argument name="sectionSourceMap" xsi:type="array">
            <item name="compare-products" xsi:type="string">Magento\Catalog\CustomerData\CompareProducts</item>
        </argument>
    </arguments>
</type>

Step 2: 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.

Do not use the $_isScopePrivate property in your blocks. This property is obsolete and won't work properly.

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:

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

Example

Step 3: Configure a UI component

The UI component renders block data on the Magento storefront. To initialize the UI component, you must call the initialization method _super().

Example

All properties are available in the template.

Example of defining a UI component in a layout

Step 4: 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. Cache is invalidated on a POST or PUT request, such as a customer adding items to a cart.

The following example adds comments to app/code/Magento/Catalog/etc/frontend/sections.xml to show you what happens.

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Customer:etc/sections.xsd">
    <!-- invalidates the "compare-products" section when a user 
    adds a product to the comparison, resulting in a "catalog/product_compare/add" POST request -->
    <action name="catalog/product_compare/add">
        <section name="compare-products"/>
    </action>
    <!-- invalidates the section when a customer removes a product from the comparison -->
    <action name="catalog/product_compare/remove">
        <section name="compare-products"/>
    </action>
    <!-- invalidates the section when a customer clears all products from the comparison -->
    <action name="catalog/product_compare/clear">
        <section name="compare-products"/>
    </action>
</config>

Other examples:

  • Use only HTTP POST or PUT methods to change state (for example, adding to a shopping cart, adding to a wishlist, and so on.)
  • For more information about caching, see RFC-2616 section 13.

Next

HTTP context