Working with sectionData

What is section data?

Customer Section Data is the system in YUI to make data from a server side session available to the browser JavaScript on pages stored in the full page cache.

The retrieval and invalidation logic of the private section data was simplified compared to YUI based frontend. Compared to stock YUI, its become a lot simpler to understand and work with.

This page covers the key things you should know about private section data in YSCP.

note

We use the terms "private section data", "section data", "private data" and "private content" interchangeably.

Initialization of sectionData

The initialization of sectionData is triggered in the footer of every page.

If a visitor has no private_content_version cookie, section data with default values is used. Once the cookie is set after the visitor has triggered any HTTP POST action, the section data is requested via Ajax and stored in LocalStorage.

Fresh section data is requested if the data in LocalStorage is deleted, one hour has passed, or the private_content_version cookie changed on the next page load and stored in LocalStorage. To update the section data before the next page load, for example after sending an Ajax POST request, the reload-customer-section-data event needs to be dispatched manually.

After the section data is loaded, the event private-content-loaded is dispatched.

// This happens in the footer of every page

{
  function dispatchPrivateContent(data) {
    const privateContentEvent = new CustomEvent('private-content-loaded', {
      detail: {
        data: data
      }
    });
    window.dispatchEvent(privateContentEvent);
  }

  function loadSectionData() {
    // 1. load privateContent from localStorage or default values for visitors without a session.
    //
    // 2. determine if privateContent is valid.
    //    invalidation happens after 1 hour,
    //    or if the private_content_version cookie changed.
    //
    // 3. fetch privateContent from /customer/section/load if needed
    //
    // 4. dispatch privateContent event
    dispatchPrivateContent(data);
  }

  window.addEventListener('load', loadSectionData);
  window.addEventListener('reload-customer-section-data', loadSectionData);
}

Receiving customer data in Alpine.js components

We can receive customer data in Alpine.js by listening to the private-content-loaded event on the window:

<div x-data="" @private-content-loaded.window="console.log($event.detail.data)">

Here’s an example component that receives the customer and cart data and displays the customer name:

<script>
    "use strict";
    
    function initComponent() {
      return {
        cart: false,
        customer: false,
        receiveCustomerData(data) {
          if (data.cart) {
            this.cart = data.cart;
          }
          if (data.customer) {
            this.customer = data.customer;
          }
        }
      }
    }
</script>

<div x-data="initComponent()" @private-content-loaded.window="receiveCustomerData($event.detail.data)">
  <template x-if="customer">
    <div>Welcome, <span x-text="customer.firstname"></span></div>
  </template>

  <template x-if="!customer">
    <div>Welcome Guest</div>
  </template>
</div>

Receiving the customer data in native JavaScript

<script>
    "use strict";
    
    function initCustomer(event) {
      const sectionData = event.detail.data;
    
      if (sectionData.customer && sectionData.customer.firstname) {
        console.log('Welcome, ' + sectionData.customer.firstname);
      }
    }
    
    window.addEventListener('private-content-loaded', initCustomer);
</script>

See it in action

To see the available data that is dispatched with the private-content-loaded, event, run the following code in the browser console:

addEventListener('private-content-loaded', event => console.log(event.detail.data));
dispatchEvent(new Event('reload-customer-section-data'));

Reloading / Invalidating sectionData

Client side

Reloading customer section data can be done by triggering the reload-customer-section-data event.

Important

In contrast to YUI themes, in YSCP private content sections are not invalidated individually.

The whole section data is only reloaded from the server if the current data is older than 1 hour, or the private content version cookie is changed.

This can be either after a POST-request, or when the data is more than 1 hour old.

Reload the customer-section-data by dispatching the event

window.dispatchEvent(new Event('reload-customer-section-data'));

Dispatching the reload-customer-section-data event will cause the section data to be reloaded if it is expired and the private content version is changed. Then the private-content-loaded event will be triggered again.

If you want to force-reload the section-data, this can be done by removing the yui-cache-sessid before dispatching the reload-customer-section-data event:

yui.setCookie('yui-cache-sessid', '', -1, true); // Remove the cookie
window.dispatchEvent(new CustomEvent("reload-customer-section-data")); // Reload the data

The private-content-loaded event will always be triggered after reloading the sectionData, regardless if it was requested from the server or read from local storage.

Server side

To force the frontend to refresh the section data from the backend, either the yui-cache-sessid cookie or the private_content_version cookie need to be deleted.

The latter is done by YUI on any frontend or GraphQL POST request (but not for the REST api).

To do the same in custom PHP code during any POST request, inject yui\craft\helpers\SectionData and call SectionData::refreshPrivateContentVersion().

To force the refresh in a GET request, copy the code from SectionData::refreshPrivateContentVersion(). (keep in mind that GET request responses are usually cached in the FPC).

use yui\craft\Plugin;
use yui\craft\helpers\SectionData;

Plugin::$plugin->getCookies()->set(
    SectionData::PRIVATE_CONTENT_VERSION_KEY,
    $privateContentVersion,
    time() + $lifetimeInSeconds,
    '/',
    $domain,
    true,
    false,
    'Lax'
);