Read More
Read More
Menu Close

    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.

    Searching for an experienced
    Magento 2 Company ?
    Read More
    // 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ä

    . . .
    Discuss on Helpdesk

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top