{"id":330790,"date":"2022-04-23T15:28:44","date_gmt":"2022-04-23T15:28:44","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=330790"},"modified":"2022-05-10T13:43:55","modified_gmt":"2022-05-10T13:43:55","slug":"working-with-view-models-in-hyva","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/working-with-view-models-in-hyva\/","title":{"rendered":"Working with View Models in Hyv\u00e4"},"content":{"rendered":"\n<p>In Magento you are using view models a lot!. In comparison with block class, they are more reusable and composable. You can add arbitrary number of view models to any template block by adding via layout xml file.<\/p>\n\n\n\n<p>In Hyv\u00e4 instead of adding via layout xml file, you can directly use the view models in the template via global variable $viewModels similar to the existing $block and $escaper variables. You can use it to fetch any view model (i.e. any class that implements ArgumentInterface).<\/p>\n\n\n\n<p>Example : <\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">\/** @var \\Hyva\\Theme\\Model\\ViewModelRegistry $viewModels *\/\n$currentProduct = $viewModels-&gt;require(\\Hyva\\Theme\\ViewModel\\CurrentProduct::class);<\/pre>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Good news<\/p><p>In Hyv\u00e4 It is no longer needed to declare view models in XML!<\/p><\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">SvgIcons<\/h2>\n\n\n\n<p>On the website, you must have to use at least a few icons for a good interface and understandable to the user. In Hyv\u00e4 The SvgIcons view model can be used to render any icon set.<\/p>\n\n\n\n<p>The icon set can be configured with di.xml or by extending the class. In Hyv\u00e4 already having  Heroicons and two matching view models:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>HeroiconsSolid<\/li><li>HeroiconsOutline<\/li><\/ol>\n\n\n\n<p>To preview the icons check this link <a href=\"https:\/\/heroicons.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/heroicons.com\/<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How to use SvgIcons in the template using View Models in Hyv\u00e4 <\/h3>\n\n\n\n<p>In your template: <\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">\/** @var Hyva\\Theme\\ViewModel\\HeroiconsOutline $heroicons *\/\n$heroicons = $viewModels-&gt;require(\\Hyva\\Theme\\ViewModel\\HeroiconsOutline::class);<\/pre>\n\n\n\n<p>Then render the icons like this:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;?= $heroicons-&gt;arrowLeftHtml(&#039;w-8 h-8&#039;) ?&gt;<\/pre>\n\n\n\n<p>arrowLeftHtml is method name which in camelcase to use the left arrow icon .<\/p>\n\n\n\n<p>Similarly arrowRightHtml is for right arrow icon<\/p>\n\n\n\n<p>All methods take the following arguments:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">string $classnames = &#039;&#039;, ?int $width = 24, ?int $height = 24, array $attributes = &#091;]<\/pre>\n\n\n\n<p>All parameters are optional, and change the class , width and height attributes of the SVG element, or add additional HTML attributes. To render an SVG without a width and a height attribute, pass null as the second and third argument.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;?= $heroicons-&gt;arrowLeftHtml(&#039;w-8 h-8&#039;, null, null) ?&gt;<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">How to use SvgIcons in the CMS content in Hyv\u00e4<\/h3>\n\n\n\n<p>The Hyv\u00e4 theme module adds an icon directive to render any SVG icon in filtered content like CMS blocks or pages.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">{{icon &quot;heroicons\/solid\/shopping-cart&quot; classes=&quot;w-6 h-6&quot; width=12 height=12}}<\/pre>\n\n\n\n<p>To use your own custom icons which is stored in &#8220;web\/svg\/&#8221; such as &#8220;web\/svg\/cart.svg&#8221; can be referenced as<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">{{icon &quot;cart&quot;}}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">How to use custom SVG icon set using View Models in your theme<\/h3>\n\n\n\n<p>To use the custom icons you will need to create subdirectory in the theme like &#8220;Webkul_HyvaTheme\/web\/svg&#8221; and place your SVG icons there.<\/p>\n\n\n\n<p>Then to use the icons you can instantiate the view model and to render the icon you can use renderHtml function with icon name as one of the parameter or magic method matching the desired icon name <\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">$icons = $viewModels-&gt;require(\\Hyva\\Theme\\ViewModel\\SvgIcons::class);\n\necho $icons-&gt;renderHtml(&#039;rainbow-unicorn&#039;, &#039;w-6 h-6&#039;); \/\/ either\necho $icon-&gt;rainbow-unicorn(&#039;w-6 h-6&#039;); \/\/ or<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">How to Override heroicons in your theme<\/h3>\n\n\n\n<p>If you want to use a newer Heroicons package than the one shipped with Hyv\u00e4, you can place the files in your theme at &#8220;Hyva_Theme\/web\/svg\/heroicons\/solid&#8221; and &#8220;Hyva_Theme\/web\/svg\/heroicons\/outline&#8221;.<\/p>\n\n\n\n<p>E.g. to render magic-wand.svg, call<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">$heroicons-&gt;magicWandHtml($class, $width, $height)<\/pre>\n\n\n\n<p>or alternatively<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">$heroicons-&gt;renderHtml(&#039;magic-wand&#039;, $class, $width, $height)<\/pre>\n\n\n\n<p>Next 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\n\n\n<p>Previous Blog link : &#8211;  <a href=\"https:\/\/webkul.com\/blog\/essential-to-learn-for-module-compatibility-in-hyva-part-1\/\" target=\"_blank\" rel=\"noreferrer noopener\">Essential to learn for module compatibility in Hyv\u00e4 Part &#8211; 1<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In Magento you are using view models a lot!. In comparison with block class, they are more reusable and composable. You can add arbitrary number of view models to any template block by adding via layout xml file. In Hyv\u00e4 instead of adding via layout xml file, you can directly use the view models in <a href=\"https:\/\/webkul.com\/blog\/working-with-view-models-in-hyva\/\">[&#8230;]<\/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-330790","post","type-post","status-publish","format-standard","hentry","category-magento-2"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Working with View Models in Hyv\u00e4 - Webkul Blog<\/title>\n<meta name=\"description\" content=\"How to use View Models and the SvgIcons using View Models in Hyva\" \/>\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\/working-with-view-models-in-hyva\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Working with View Models in Hyv\u00e4 - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"How to use View Models and the SvgIcons using View Models in Hyva\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/working-with-view-models-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-04-23T15:28:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-05-10T13:43:55+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\/working-with-view-models-in-hyva\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/working-with-view-models-in-hyva\/\"},\"author\":{\"name\":\"Shreyas Vispute\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/d4ed4835e93c06b089c32370181b1033\"},\"headline\":\"Working with View Models in Hyv\u00e4\",\"datePublished\":\"2022-04-23T15:28:44+00:00\",\"dateModified\":\"2022-05-10T13:43:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/working-with-view-models-in-hyva\/\"},\"wordCount\":473,\"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\/working-with-view-models-in-hyva\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/working-with-view-models-in-hyva\/\",\"url\":\"https:\/\/webkul.com\/blog\/working-with-view-models-in-hyva\/\",\"name\":\"Working with View Models in Hyv\u00e4 - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"datePublished\":\"2022-04-23T15:28:44+00:00\",\"dateModified\":\"2022-05-10T13:43:55+00:00\",\"description\":\"How to use View Models and the SvgIcons using View Models in Hyva\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/working-with-view-models-in-hyva\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/working-with-view-models-in-hyva\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/working-with-view-models-in-hyva\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Working with View Models 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":"Working with View Models in Hyv\u00e4 - Webkul Blog","description":"How to use View Models and the SvgIcons using View Models in Hyva","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\/working-with-view-models-in-hyva\/","og_locale":"en_US","og_type":"article","og_title":"Working with View Models in Hyv\u00e4 - Webkul Blog","og_description":"How to use View Models and the SvgIcons using View Models in Hyva","og_url":"https:\/\/webkul.com\/blog\/working-with-view-models-in-hyva\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2022-04-23T15:28:44+00:00","article_modified_time":"2022-05-10T13:43:55+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\/working-with-view-models-in-hyva\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/working-with-view-models-in-hyva\/"},"author":{"name":"Shreyas Vispute","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/d4ed4835e93c06b089c32370181b1033"},"headline":"Working with View Models in Hyv\u00e4","datePublished":"2022-04-23T15:28:44+00:00","dateModified":"2022-05-10T13:43:55+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/working-with-view-models-in-hyva\/"},"wordCount":473,"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\/working-with-view-models-in-hyva\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/working-with-view-models-in-hyva\/","url":"https:\/\/webkul.com\/blog\/working-with-view-models-in-hyva\/","name":"Working with View Models in Hyv\u00e4 - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"datePublished":"2022-04-23T15:28:44+00:00","dateModified":"2022-05-10T13:43:55+00:00","description":"How to use View Models and the SvgIcons using View Models in Hyva","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/working-with-view-models-in-hyva\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/working-with-view-models-in-hyva\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/working-with-view-models-in-hyva\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Working with View Models 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\/330790","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=330790"}],"version-history":[{"count":2,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/330790\/revisions"}],"predecessor-version":[{"id":333268,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/330790\/revisions\/333268"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=330790"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=330790"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=330790"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}