How to work with sectionData in Hyvä

In Hyvä to work with the sectionData is a lot simpler and easy to understand as compared to Magento. In this blog we will learn how to work with sectionData in Hyvä.

Note: – We use the terms “private section data”, “section data”, “private data” and “private content” interchangeably.

Important : – In hyva it is not possible to subscribe to specific sections. All sections i s combined in to one data object

How to Initialize section data

In hyva initialize of section data is trigger in the footer of every page. In case the data is empty in the LocalStorage then after one hour passed or the private_content_version cookie changed then fresh section data requested from “/customer/section/load” and stored in LocalStorage.

At the time of data load then the event “private-content-loaded” is also trigger.

// 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.
    //
    // 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(hyva.getDummyPrivateContent());
  }

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

In the hyvä theme, to receive customer data in Alpine.js or alpine component by listening to the “private-content-loaded” event on the window:

<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>

// We can also receive the customer data in native JavaScript for example
<script>
"use strict";

function initGTM(event) {
  const sectionData = event.detail.data;

  if (sectionData.customer && sectionData.customer.firstname) {
    console.log('Welcome, ' + sectionData.customer.firstname);
  }

}

window.addEventListener("private-content-loaded", initGTM);

</script>

Reloading / Invalidating section data

There are two Methods 1) Client Side and 2) Server side :-

Client Side

Importand Note:- 
In contrast to Magento Luma themes, in Hyvä 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.

To reload the customer-section-data use the global reload-customer-section-data event.

window.dispatchEvent(new CustomEvent("reload-customer-section-data"));

If the section data expired and the private content version is changed then the private-content-loaded event will be triggered again or else will cause the section data to be reloaded by dispatching the reload-customer-section-data event.

To reload the sectionData forcefully by removing the mage-cache-sessid before dispatching the reload-customer-section-data event:

hyva.setCookie('mage-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 trigger after reloading the sectionData. In any case, If it was request from the server or read from local storage.

Server side

To force the frontend to refresh the section data from the backend, either the mage-cache-sessid cookie or the private_content_version cookie should delete.

To do the same in custom PHP code during any POST request, inject

Magento\Framework\App\PageCache\Version and call $version->process()

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

Force the refresh in a GET request, copy the code from Version::process.
(keep in mind that GET request responses are usually cached in the FPC).

$publicCookieMetadata = $this->cookieMetadataFactory->createPublicCookieMetadata()
    ->setDuration(self::COOKIE_PERIOD)
    ->setPath('/')
    ->setSecure($this->request->isSecure())
    ->setHttpOnly(false);
$this->cookieManager->setPublicCookie(self::COOKIE_NAME, $this->generateValue(), $publicCookieMetadata);

Previous blog : – Working with View Models in Hyvä