{"id":329602,"date":"2022-05-07T14:23:41","date_gmt":"2022-05-07T14:23:41","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=329602"},"modified":"2022-05-10T13:43:25","modified_gmt":"2022-05-10T13:43:25","slug":"how-to-work-with-sectiondata-in-hyva","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/how-to-work-with-sectiondata-in-hyva\/","title":{"rendered":"How to work with sectionData in Hyv\u00e4"},"content":{"rendered":"\n

In Hyv\u00e4 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\u00e4.<\/p>\n\n\n\n

Note: – We use the terms “private section data”, “section data”, “private data” and “private content” interchangeably.<\/p>

Important : – In hyva it is not possible to subscribe to specific sections. All sections i s combined in to one data object<\/p><\/blockquote>\n\n\n\n

How to Initialize section data<\/h3>\n\n\n\n

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.<\/p>\n\n\n\n

At the time of data load then the event “private-content-loaded” is also trigger.<\/p>\n\n\n\n

\/\/ this happens in the footer of every page\n{\n  function dispatchPrivateContent(data) {\n    const privateContentEvent = new CustomEvent("private-content-loaded", {\n      detail: {\n        data: data\n      }\n    });\n    window.dispatchEvent(privateContentEvent);\n  }\n\n  function loadSectionData() {\n    \/\/ 1. load privateContent from localStorage.\n    \/\/\n    \/\/ 2. determine if privateContent is valid.\n    \/\/    invalidation happens after 1 hour,\n    \/\/    or if the private_content_version cookie changed.\n    \/\/\n    \/\/ 3. fetch privateContent from \/customer\/section\/load if needed\n    \/\/\n    \/\/ 4. dispatch privateContent event\n    dispatchPrivateContent(hyva.getDummyPrivateContent());\n  }\n\n  window.addEventListener("load", loadSectionData);\n  window.addEventListener("reload-customer-section-data", loadSectionData);\n}<\/pre>\n\n\n\n
In the hyv\u00e4 theme, to receive customer data in Alpine.js or alpine component by listening to the “private-content-loaded” event on the window:<\/p>\n\n\n\n
<script>\n"use strict";\n\nfunction initComponent() {\n  return {\n    cart: false,\n    customer: false,\n    receiveCustomerData(data) {\n      if (data.cart) {\n        this.cart = data.cart;\n      }\n      if (data.customer) {\n        this.customer = data.customer;\n      }\n    }\n  }\n}\n<\/script>\n\n<div x-data="initComponent()"\n     @private-content-loaded.window="receiveCustomerData($event.detail.data)"\n>\n  <template x-if="customer">\n    <div>Welcome, <span x-text="customer.firstname"><\/span><\/div>\n  <\/template>\n\n  <template x-if="!customer">\n    <div>Welcome Guest<\/div>\n  <\/template>\n\n<\/div><\/pre>\n\n\n\n
\/\/ We can also receive the customer data in native JavaScript for example\n<script>\n"use strict";\n\nfunction initGTM(event) {\n  const sectionData = event.detail.data;\n\n  if (sectionData.customer && sectionData.customer.firstname) {\n    console.log('Welcome, ' + sectionData.customer.firstname);\n  }\n\n}\n\nwindow.addEventListener("private-content-loaded", initGTM);\n\n<\/script><\/pre>\n\n\n\n
Reloading \/ Invalidating section data<\/h3>\n\n\n\n
There are two Methods 1) Client Side and 2) Server side :-<\/p>\n\n\n\n
Client Side<\/strong><\/p>\n\n\n\n
Importand Note:- \nIn contrast to Magento Luma themes, in Hyv\u00e4 private content sections are not invalidated individually.\n\nThe 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.\n\nThis can be either after a POST-request, or when the data is more than 1 hour old.<\/pre>\n\n\n\n
To reload the customer-section-data<\/code> use the global reload-customer-section-data<\/code> event.<\/p>\n\n\n\n
window.dispatchEvent(new CustomEvent("reload-customer-section-data"));<\/pre>\n\n\n\n
If the section data expired and the private content version is changed then the private-content-loaded<\/code> event will be triggered again or else will cause the section data to be reloaded by dispatching the reload-customer-section-data<\/code> event.<\/p>\n\n\n\n
To reload the sectionData forcefully by removing the mage-cache-sessid<\/code> before dispatching the reload-customer-section-data<\/code> event:<\/p>\n\n\n\n
hyva.setCookie('mage-cache-sessid', '', -1, true); \/\/ remove the cookie\nwindow.dispatchEvent(new CustomEvent("reload-customer-section-data")); \/\/ reload the data<\/pre>\n\n\n\n
The private-content-loaded<\/code> event will always trigger after reloading the sectionData. In any case, If it was request from the server or read from local storage.<\/p>\n\n\n\n
Server side<\/strong><\/p>\n\n\n\n
To force the frontend to refresh the section data from the backend, either the mage-cache-sessid<\/code> cookie or the private_content_version<\/code> cookie should delete.<\/p>\n\n\n\n
To do the same in custom PHP code during any POST request, inject<\/p>\n\n\n\n
Magento\\Framework\\App\\PageCache\\Version and call $version->process()<\/pre>\n\n\n\n
The latter is done by Magento<\/a> on any frontend or GraphQL POST request (but not for the REST api).<\/p>\n\n\n\n
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).<\/p>\n\n\n\n
$publicCookieMetadata = $this->cookieMetadataFactory->createPublicCookieMetadata()\n    ->setDuration(self::COOKIE_PERIOD)\n    ->setPath('\/')\n    ->setSecure($this->request->isSecure())\n    ->setHttpOnly(false);\n$this->cookieManager->setPublicCookie(self::COOKIE_NAME, $this->generateValue(), $publicCookieMetadata);<\/pre>\n\n\n\n
Previous blog : –  Working with View Models in Hyv\u00e4<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
In Hyv\u00e4 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\u00e4. Note: – We use the terms “private section data”, “section data”, “private data” and “private content” interchangeably. Important : – In hyva it […]<\/a><\/p>\n","protected":false},"author":422,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9121],"tags":[12686],"class_list":["post-329602","post","type-post","status-publish","format-standard","hentry","category-magento-2","tag-section-data"],"yoast_head":"\nHow to work with sectionData in Hyv\u00e4 - Webkul Blog<\/title>\n<meta name=\"description\" content=\"How to work with the sectionData in hyv\u00e4. In hyv\u00e4 it is lot of simple to work with sectionData\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/how-to-work-with-sectiondata-in-hyva\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to work with sectionData in Hyv\u00e4 - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"How to work with the sectionData in hyv\u00e4. In hyv\u00e4 it is lot of simple to work with sectionData\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/how-to-work-with-sectiondata-in-hyva\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-05-07T14:23:41+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-05-10T13:43:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-og.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Shreyas Vispute\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Shreyas Vispute\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-work-with-sectiondata-in-hyva\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-work-with-sectiondata-in-hyva\/\"},\"author\":{\"name\":\"Shreyas Vispute\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/d4ed4835e93c06b089c32370181b1033\"},\"headline\":\"How to work with sectionData in Hyv\u00e4\",\"datePublished\":\"2022-05-07T14:23:41+00:00\",\"dateModified\":\"2022-05-10T13:43:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-work-with-sectiondata-in-hyva\/\"},\"wordCount\":349,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"keywords\":[\"Section Data\"],\"articleSection\":[\"Magento 2\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-work-with-sectiondata-in-hyva\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-work-with-sectiondata-in-hyva\/\",\"url\":\"https:\/\/webkul.com\/blog\/how-to-work-with-sectiondata-in-hyva\/\",\"name\":\"How to work with sectionData in Hyv\u00e4 - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"datePublished\":\"2022-05-07T14:23:41+00:00\",\"dateModified\":\"2022-05-10T13:43:25+00:00\",\"description\":\"How to work with the sectionData in hyv\u00e4. In hyv\u00e4 it is lot of simple to work with sectionData\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-work-with-sectiondata-in-hyva\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-work-with-sectiondata-in-hyva\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-work-with-sectiondata-in-hyva\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to work with sectionData in Hyv\u00e4\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/d4ed4835e93c06b089c32370181b1033\",\"name\":\"Shreyas Vispute\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c979339c2c52bba9ace844f53c8b0199863bb13db9c69398cf7e8f9ac338524b?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c979339c2c52bba9ace844f53c8b0199863bb13db9c69398cf7e8f9ac338524b?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Shreyas Vispute\"},\"url\":\"https:\/\/webkul.com\/blog\/author\/shreyas-vilas522\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to work with sectionData in Hyv\u00e4 - Webkul Blog","description":"How to work with the sectionData in hyv\u00e4. In hyv\u00e4 it is lot of simple to work with sectionData","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/how-to-work-with-sectiondata-in-hyva\/","og_locale":"en_US","og_type":"article","og_title":"How to work with sectionData in Hyv\u00e4 - Webkul Blog","og_description":"How to work with the sectionData in hyv\u00e4. In hyv\u00e4 it is lot of simple to work with sectionData","og_url":"https:\/\/webkul.com\/blog\/how-to-work-with-sectiondata-in-hyva\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2022-05-07T14:23:41+00:00","article_modified_time":"2022-05-10T13:43:25+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-og.png","type":"image\/png"}],"author":"Shreyas Vispute","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Shreyas Vispute","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/how-to-work-with-sectiondata-in-hyva\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/how-to-work-with-sectiondata-in-hyva\/"},"author":{"name":"Shreyas Vispute","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/d4ed4835e93c06b089c32370181b1033"},"headline":"How to work with sectionData in Hyv\u00e4","datePublished":"2022-05-07T14:23:41+00:00","dateModified":"2022-05-10T13:43:25+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/how-to-work-with-sectiondata-in-hyva\/"},"wordCount":349,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"keywords":["Section Data"],"articleSection":["Magento 2"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/how-to-work-with-sectiondata-in-hyva\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/how-to-work-with-sectiondata-in-hyva\/","url":"https:\/\/webkul.com\/blog\/how-to-work-with-sectiondata-in-hyva\/","name":"How to work with sectionData in Hyv\u00e4 - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"datePublished":"2022-05-07T14:23:41+00:00","dateModified":"2022-05-10T13:43:25+00:00","description":"How to work with the sectionData in hyv\u00e4. In hyv\u00e4 it is lot of simple to work with sectionData","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/how-to-work-with-sectiondata-in-hyva\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/how-to-work-with-sectiondata-in-hyva\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/how-to-work-with-sectiondata-in-hyva\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to work with sectionData in Hyv\u00e4"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/d4ed4835e93c06b089c32370181b1033","name":"Shreyas Vispute","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c979339c2c52bba9ace844f53c8b0199863bb13db9c69398cf7e8f9ac338524b?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c979339c2c52bba9ace844f53c8b0199863bb13db9c69398cf7e8f9ac338524b?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Shreyas Vispute"},"url":"https:\/\/webkul.com\/blog\/author\/shreyas-vilas522\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/329602","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/422"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=329602"}],"version-history":[{"count":18,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/329602\/revisions"}],"predecessor-version":[{"id":333267,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/329602\/revisions\/333267"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=329602"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=329602"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=329602"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}