{"id":330797,"date":"2022-05-08T06:32:26","date_gmt":"2022-05-08T06:32:26","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=330797"},"modified":"2024-04-30T13:11:08","modified_gmt":"2024-04-30T13:11:08","slug":"how-to-compatible-the-module-with-hyva","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/how-to-compatible-the-module-with-hyva\/","title":{"rendered":"How to Compatible the module with Hyv\u00e4"},"content":{"rendered":"\n<p>In this blog, we will see an overview of the compatible module and some prerequisites, tips, and naming conventions before beginning with working on the compatible <a href=\"https:\/\/store.webkul.com\/Magento-2\/hyva-theme-extensions.html\" target=\"_blank\" rel=\"noreferrer noopener\">Hyva theme extensions<\/a>.<\/p>\n\n\n\n<p>Modules based on the Magento luma or Blank themes require a Compatible module to work with Hyv\u00e4. The amount of work to create a compatibility module depends on the original module.<\/p>\n\n\n\n<p>Because the compatibility module re-implements the code of a module that doesn\u2019t work out of the box in a Hyv\u00e4 storefront. The code is based on jQuery and Knockout which Hyv\u00e4 doesn&#8217;t support instead it uses <a href=\"https:\/\/webkul.com\/blog\/alpinejs-in-hyva-themes\/\" target=\"_blank\" rel=\"noreferrer noopener\">AlpineJs<\/a> and <a href=\"https:\/\/webkul.com\/blog\/working-with-tailwindcss-in-hyva-theme\/\" target=\"_blank\" rel=\"noreferrer noopener\">TailwindCSS<\/a>.<\/p>\n\n\n\n<p>Few requirements you must know to work with compatible modules.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Magento 2 frontend development.<\/li>\n\n\n\n<li>PHP.<\/li>\n\n\n\n<li>JavaScript.<\/li>\n\n\n\n<li>git<\/li>\n\n\n\n<li><a href=\"https:\/\/webkul.com\/blog\/installation-of-hyva-themes-in-magento-2-4-x\/\" target=\"_blank\" rel=\"noreferrer noopener\">Hyv\u00e4 Theme installation and setup<\/a>.<\/li>\n\n\n\n<li>Alpine js basics.<\/li>\n\n\n\n<li>Tailwind CSS basics.<\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Note:-<\/strong> Please read the blogs about <a href=\"https:\/\/webkul.com\/blog\/working-with-tailwindcss-in-hyva-theme\/\" target=\"_blank\" rel=\"noreferrer noopener\">TailwindCSS<\/a>, <a href=\"https:\/\/webkul.com\/blog\/alpinejs-in-hyva-themes\/\" target=\"_blank\" rel=\"noreferrer noopener\">AlpineJs<\/a>, <a href=\"https:\/\/webkul.com\/blog\/working-with-view-models-in-hyva\/\" target=\"_blank\" rel=\"noreferrer noopener\">ViewModels<\/a>, and <a href=\"https:\/\/webkul.com\/blog\/essential-to-learn-for-module-compatibility-in-hyva-part-1\" target=\"_blank\" rel=\"noreferrer noopener\">Essentials<\/a> require  before going to work with the compatibility module. Otherwise, you will face difficulties while working on a compatible module.<\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Tips<\/strong> <strong>for Compatible Module<\/strong><\/h3>\n\n\n\n<p>It helps to have a second store view running with a Magento Luma theme next to the store view using Hyv\u00e4.<\/p>\n\n\n\n<p>This allows checking how exactly some aspect of a module works in Luma while making it work in Hyv\u00e4. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Naming Conventions<\/h3>\n\n\n\n<p>The module name consists of the Hyva namespace with the original module namespace and module name.<\/p>\n\n\n\n<p><strong>Magento Module:<\/strong><\/p>\n\n\n\n<p>For example:<\/p>\n\n\n\n<p>Original: <code>W<\/code>ebkul_CompatibleModule<br>Compat Module: <code>Hyva_WebkulCompatibleModule<\/code><\/p>\n\n\n\n<p><strong>Composer Package:<\/strong><\/p>\n\n\n\n<p>The composer vendor&#8217;s name is <code>hyva-themes<\/code>.<\/p>\n\n\n\n<p>For example:<\/p>\n\n\n\n<p>Original: <code>webkul\/magento-compatiblemodule<\/code><br>Compat Module: <code>hyva-themes\/magento2-webkul-compatiblemodule<\/code><\/p>\n\n\n\n<p><strong>Folder Structure<\/strong><\/p>\n\n\n\n<p>Hyv\u00e4 modules and compatibility modules use the following folder structure and minimal set of files:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">magento2-example-module\/\n\u251c\u2500\u2500 LICENSE.md\n\u251c\u2500\u2500 README.md\n\u251c\u2500\u2500 composer.json\n\u2514\u2500\u2500 src\n    \u251c\u2500\u2500 etc\n    \u2502&nbsp;&nbsp; \u251c\u2500\u2500 frontend\n    \u2502&nbsp;&nbsp; \u2502&nbsp;&nbsp; \u2514\u2500\u2500 di.xml\n    \u2502&nbsp;&nbsp; \u2514\u2500\u2500 module.xml\n    \u2514\u2500\u2500 registration.php\n\n3 directories, 6 files<\/pre>\n\n\n\n<p>Any tests go into a <code>tests\/ directory<\/code> on the same level as <code>src\/<\/code><\/p>\n\n\n\n<p>The basic folder structure includes the <code>LICENSE.md<\/code> and <code>README.md<\/code> files are already present in new Compatibility Module repositories.<\/p>\n\n\n\n<p>The <code>LICENSE.md<\/code> file is a copy of the Hyv\u00e4 Themes Software User License and must not be changed.<\/p>\n\n\n\n<p>The <code>README.md<\/code> file contains basic information about the original module. You can add any additional information that might be required for the Compatibility Module to work.<\/p>\n\n\n\n<p>Previous Blog link : &#8211; <a href=\"https:\/\/webkul.com\/blog\/how-to-work-with-sectiondata-in-hyva\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to work with sectionData in Hyv\u00e4<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this blog, we will see an overview of the compatible module and some prerequisites, tips, and naming conventions before beginning with working on the compatible Hyva theme extensions. Modules based on the Magento luma or Blank themes require a Compatible module to work with Hyv\u00e4. The amount of work to create a compatibility module <a href=\"https:\/\/webkul.com\/blog\/how-to-compatible-the-module-with-hyva\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":422,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9121],"tags":[12683,12685,12684],"class_list":["post-330797","post","type-post","status-publish","format-standard","hentry","category-magento-2","tag-hyva-compatible-module","tag-hyva-folder-struture","tag-hyva-naming-conventions"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Compatible the module with Hyv\u00e4 - Webkul Blog<\/title>\n<meta name=\"description\" content=\"Overview and Prerequisites to work on compatible module for the Hyv\u00e4 Themes\" \/>\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-compatible-the-module-with-hyva\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Compatible the module with Hyv\u00e4 - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"Overview and Prerequisites to work on compatible module for the Hyv\u00e4 Themes\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/how-to-compatible-the-module-with-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-08T06:32:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-30T13:11:08+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=\"2 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-compatible-the-module-with-hyva\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-compatible-the-module-with-hyva\/\"},\"author\":{\"name\":\"Shreyas Vispute\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/d4ed4835e93c06b089c32370181b1033\"},\"headline\":\"How to Compatible the module with Hyv\u00e4\",\"datePublished\":\"2022-05-08T06:32:26+00:00\",\"dateModified\":\"2024-04-30T13:11:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-compatible-the-module-with-hyva\/\"},\"wordCount\":344,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"keywords\":[\"Hyva Compatible Module\",\"Hyva folder struture\",\"Hyva Naming Conventions\"],\"articleSection\":[\"Magento 2\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-compatible-the-module-with-hyva\/\",\"url\":\"https:\/\/webkul.com\/blog\/how-to-compatible-the-module-with-hyva\/\",\"name\":\"How to Compatible the module with Hyv\u00e4 - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"datePublished\":\"2022-05-08T06:32:26+00:00\",\"dateModified\":\"2024-04-30T13:11:08+00:00\",\"description\":\"Overview and Prerequisites to work on compatible module for the Hyv\u00e4 Themes\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-compatible-the-module-with-hyva\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-compatible-the-module-with-hyva\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-compatible-the-module-with-hyva\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Compatible the module with 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 Compatible the module with Hyv\u00e4 - Webkul Blog","description":"Overview and Prerequisites to work on compatible module for the Hyv\u00e4 Themes","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-compatible-the-module-with-hyva\/","og_locale":"en_US","og_type":"article","og_title":"How to Compatible the module with Hyv\u00e4 - Webkul Blog","og_description":"Overview and Prerequisites to work on compatible module for the Hyv\u00e4 Themes","og_url":"https:\/\/webkul.com\/blog\/how-to-compatible-the-module-with-hyva\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2022-05-08T06:32:26+00:00","article_modified_time":"2024-04-30T13:11:08+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":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/how-to-compatible-the-module-with-hyva\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/how-to-compatible-the-module-with-hyva\/"},"author":{"name":"Shreyas Vispute","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/d4ed4835e93c06b089c32370181b1033"},"headline":"How to Compatible the module with Hyv\u00e4","datePublished":"2022-05-08T06:32:26+00:00","dateModified":"2024-04-30T13:11:08+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/how-to-compatible-the-module-with-hyva\/"},"wordCount":344,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"keywords":["Hyva Compatible Module","Hyva folder struture","Hyva Naming Conventions"],"articleSection":["Magento 2"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/how-to-compatible-the-module-with-hyva\/","url":"https:\/\/webkul.com\/blog\/how-to-compatible-the-module-with-hyva\/","name":"How to Compatible the module with Hyv\u00e4 - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"datePublished":"2022-05-08T06:32:26+00:00","dateModified":"2024-04-30T13:11:08+00:00","description":"Overview and Prerequisites to work on compatible module for the Hyv\u00e4 Themes","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/how-to-compatible-the-module-with-hyva\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/how-to-compatible-the-module-with-hyva\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/how-to-compatible-the-module-with-hyva\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Compatible the module with 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\/330797","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=330797"}],"version-history":[{"count":7,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/330797\/revisions"}],"predecessor-version":[{"id":437516,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/330797\/revisions\/437516"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=330797"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=330797"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=330797"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}