{"id":329598,"date":"2022-04-15T13:03:53","date_gmt":"2022-04-15T13:03:53","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=329598"},"modified":"2023-07-17T10:11:45","modified_gmt":"2023-07-17T10:11:45","slug":"essential-to-learn-for-module-compatibility-in-hyva-part-1","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/essential-to-learn-for-module-compatibility-in-hyva-part-1\/","title":{"rendered":"Essential to learn for module compatibility in Hyv\u00e4 Part – 1"},"content":{"rendered":"\n

In this blog, we will learn some of the essential concepts you need to know before working on module compatibility so that it can be easier to work on it.<\/p>\n\n\n\n

Essential (1) – The hyva_ Layout Handles<\/h2>\n\n\n\n

In the Hyv\u00e4 theme, for every layout update handle applied on the page at that time a new handle with the hyva_ prefix will automatically applied, too.<\/p>\n\n\n\n

for example in luma store layout.<\/p>\n\n\n\n

default\ncms_index_index\ncms_page\ncustomer_logged_out<\/pre>\n\n\n\n
Same thing in the Hyv\u00e4 theme with the hyva_  prefix.<\/p>\n\n\n\n
hyva_default\nhyva_cms_index_index\nhyva_cms_page\nhyva_customer_logged_out<\/pre>\n\n\n\n
So it allows to create both store view Luma and Hyv\u00e4 at the time working with module and luma store view can easily render luma layout handles without any interruption and hyv\u00e4 store view will render hyva_ prefixed layout only. <\/p>\n\n\n\n
All the hyva_ prefixed layout handles are applied to the hyv\u00e4 theme only if the Hyv\u00e4 theme is active in the store. <\/p>\n\n\n\n
\n
Note: – If you want to work on layout changes for the Hyv\u00e4 then go for the hyva_ prefixed layouts. <\/p>\n<\/blockquote>\n\n\n\n
While doing module compatibility for hyv\u00e4 you have to create a hyva_  prefixed layout in the Hyva Compatible Module<\/a>.<\/p>\n\n\n\n
Essential (2) –  window.dispatchMessages()<\/h2>\n\n\n\n
In Luma store you might be usine customerData.set()  or the ‘Magento_Ui\/js\/model\/messageList’ dependency but in hyv\u00e4 we can’t use this.<\/p>\n\n\n\n
Hyv\u00e4 provides a global function window.dispatchMessages() to show messages.<\/p>\n\n\n\n
The function takes one or two arguments:<\/p>\n\n\n\n
1)  An array of message objects. Each message object has a type and a text.
The type is usually one of “success”, “notice”, “warning” or “error”. The text is the message to display. HTML and “<br>” linebreaks in message are possible.<\/p>\n\n\n\n
2) The optional second parameter is the duration in ms after which the message disappears. If no duration is supplied, the message will remain until the user dismisses it with a click on the X icon.<\/p>\n\n\n\n
dispatchMessages([\n    {\n        type: "success",\n        text: "Well done! Make haste, my friend, because this message as ephemeral all good things are!"\n    }\n], 2000);<\/pre>\n\n\n\n
Essential (3) – Building URLs in JavaScript<\/h2>\n\n\n\n
In Luma we use the “mage\/url” module to prepend the base url and current store code in Js. But in Hyv\u00e4 it is much simpler by using a global variable window.BASE_URL <\/p>\n\n\n\n
For BASE_URL<\/h3>\n\n\n\n
If you want to add the base url in URL  then use this global variable BASE_URL<\/p>\n\n\n\n
for normal or regular requests, use.<\/p>\n\n\n\n
BASE_URL + "webkul\/example\/action"<\/pre>\n\n\n\n
we can also use in the version of the template literal.<\/p>\n\n\n\n
`${BASE_URL}webkul\/example\/action`<\/pre>\n\n\n\n
The above is the equivalent of what the Luma “urlBuilder.build()” method does.<\/p>\n\n\n\n
For CURRENT_STORE_CODE<\/h3>\n\n\n\n
If you want to add the current store code with the base url in URL  then use the global variable CURRENT_STORE_CODE<\/p>\n\n\n\n
for the template literal version<\/p>\n\n\n\n
${BASE_URL}\/rest\/${CURRENT_STORE_CODE}\/webkul\/example\/action`<\/pre>\n\n\n\n
for the regular version<\/p>\n\n\n\n
BASE_URL + 'rest\/' + CURRENT_STORE_CODE + '\/webkul\/example\/action'<\/pre>\n\n\n\n
Essential (4) – using fetch()<\/h2>\n\n\n\n
In Luma we are using $.ajax, $.post, $.get  but In Hyv\u00e4, the native browser function window.fetch is used.<\/p>\n\n\n\n
Please refer link that well documented about fetch().<\/p>\n\n\n\n
https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Fetch_API\/Using_Fetch<\/a><\/p>\n\n\n\n
https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Response<\/a><\/p>\n\n\n\n
Essential (5) – How to get formated price<\/h2>\n\n\n\n
In Hyv\u00e4 you can get formated price by calling function hyva.formatPrice(value, showSign)<\/strong>  of hyva global object. <\/p>\n\n\n\n
hyva.formatPrice(value, showSign)<\/pre>\n\n\n\n
This method will formates and return the given value with current currency. The “showSign” argument is optional or you can pass true, a +, or – symbol is always rendered. or else, by default only “-” is rendered for negative values.<\/p>\n\n\n\n
Before Blog link : –  How to create your own theme in Hyv\u00e4 Theme?<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
In this blog, we will learn some of the essential concepts you need to know before working on module compatibility so that it can be easier to work on it. Essential (1) – The hyva_ Layout Handles In the Hyv\u00e4 theme, for every layout update handle applied on the page at that time a new […]<\/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":[],"class_list":["post-329598","post","type-post","status-publish","format-standard","hentry","category-magento-2"],"yoast_head":"\nHow to use essential concept like hyva_handles, dispatch messages, building url and fetch<\/title>\n<meta name=\"description\" content=\"Some essential need to know before going to work on module compatibility for Hyv\u00e4 Theme\" \/>\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\/essential-to-learn-for-module-compatibility-in-hyva-part-1\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to use essential concept like hyva_handles, dispatch messages, building url and fetch\" \/>\n<meta property=\"og:description\" content=\"Some essential need to know before going to work on module compatibility for Hyv\u00e4 Theme\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/essential-to-learn-for-module-compatibility-in-hyva-part-1\/\" \/>\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-04-15T13:03:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-17T10:11:45+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\/essential-to-learn-for-module-compatibility-in-hyva-part-1\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/essential-to-learn-for-module-compatibility-in-hyva-part-1\/\"},\"author\":{\"name\":\"Shreyas Vispute\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/d4ed4835e93c06b089c32370181b1033\"},\"headline\":\"Essential to learn for module compatibility in Hyv\u00e4 Part – 1\",\"datePublished\":\"2022-04-15T13:03:53+00:00\",\"dateModified\":\"2023-07-17T10:11:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/essential-to-learn-for-module-compatibility-in-hyva-part-1\/\"},\"wordCount\":568,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"articleSection\":[\"Magento 2\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/essential-to-learn-for-module-compatibility-in-hyva-part-1\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/essential-to-learn-for-module-compatibility-in-hyva-part-1\/\",\"url\":\"https:\/\/webkul.com\/blog\/essential-to-learn-for-module-compatibility-in-hyva-part-1\/\",\"name\":\"How to use essential concept like hyva_handles, dispatch messages, building url and fetch\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"datePublished\":\"2022-04-15T13:03:53+00:00\",\"dateModified\":\"2023-07-17T10:11:45+00:00\",\"description\":\"Some essential need to know before going to work on module compatibility for Hyv\u00e4 Theme\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/essential-to-learn-for-module-compatibility-in-hyva-part-1\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/essential-to-learn-for-module-compatibility-in-hyva-part-1\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/essential-to-learn-for-module-compatibility-in-hyva-part-1\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Essential to learn for module compatibility in Hyv\u00e4 Part – 1\"}]},{\"@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 use essential concept like hyva_handles, dispatch messages, building url and fetch","description":"Some essential need to know before going to work on module compatibility for Hyv\u00e4 Theme","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\/essential-to-learn-for-module-compatibility-in-hyva-part-1\/","og_locale":"en_US","og_type":"article","og_title":"How to use essential concept like hyva_handles, dispatch messages, building url and fetch","og_description":"Some essential need to know before going to work on module compatibility for Hyv\u00e4 Theme","og_url":"https:\/\/webkul.com\/blog\/essential-to-learn-for-module-compatibility-in-hyva-part-1\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2022-04-15T13:03:53+00:00","article_modified_time":"2023-07-17T10:11:45+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\/essential-to-learn-for-module-compatibility-in-hyva-part-1\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/essential-to-learn-for-module-compatibility-in-hyva-part-1\/"},"author":{"name":"Shreyas Vispute","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/d4ed4835e93c06b089c32370181b1033"},"headline":"Essential to learn for module compatibility in Hyv\u00e4 Part – 1","datePublished":"2022-04-15T13:03:53+00:00","dateModified":"2023-07-17T10:11:45+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/essential-to-learn-for-module-compatibility-in-hyva-part-1\/"},"wordCount":568,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"articleSection":["Magento 2"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/essential-to-learn-for-module-compatibility-in-hyva-part-1\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/essential-to-learn-for-module-compatibility-in-hyva-part-1\/","url":"https:\/\/webkul.com\/blog\/essential-to-learn-for-module-compatibility-in-hyva-part-1\/","name":"How to use essential concept like hyva_handles, dispatch messages, building url and fetch","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"datePublished":"2022-04-15T13:03:53+00:00","dateModified":"2023-07-17T10:11:45+00:00","description":"Some essential need to know before going to work on module compatibility for Hyv\u00e4 Theme","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/essential-to-learn-for-module-compatibility-in-hyva-part-1\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/essential-to-learn-for-module-compatibility-in-hyva-part-1\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/essential-to-learn-for-module-compatibility-in-hyva-part-1\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Essential to learn for module compatibility in Hyv\u00e4 Part – 1"}]},{"@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\/329598","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=329598"}],"version-history":[{"count":6,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/329598\/revisions"}],"predecessor-version":[{"id":391354,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/329598\/revisions\/391354"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=329598"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=329598"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=329598"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}