Back to Top

Working with View Models in Hyvä

Updated 10 May 2022

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ä 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).

Example :

/** @var \Hyva\Theme\Model\ViewModelRegistry $viewModels */
$currentProduct = $viewModels->require(\Hyva\Theme\ViewModel\CurrentProduct::class);

Good news

In Hyvä It is no longer needed to declare view models in XML!

Searching for an experienced
Magento 2 Company ?
Find out More

SvgIcons

On the website, you must have to use at least a few icons for a good interface and understandable to the user. In Hyvä The SvgIcons view model can be used to render any icon set.

The icon set can be configured with di.xml or by extending the class. In Hyvä already having Heroicons and two matching view models:

  1. HeroiconsSolid
  2. HeroiconsOutline

To preview the icons check this link https://heroicons.com/

How to use SvgIcons in the template using View Models in Hyvä

In your template:

/** @var Hyva\Theme\ViewModel\HeroiconsOutline $heroicons */
$heroicons = $viewModels->require(\Hyva\Theme\ViewModel\HeroiconsOutline::class);

Then render the icons like this:

<?= $heroicons->arrowLeftHtml('w-8 h-8') ?>

arrowLeftHtml is method name which in camelcase to use the left arrow icon .

Similarly arrowRightHtml is for right arrow icon

All methods take the following arguments:

string $classnames = '', ?int $width = 24, ?int $height = 24, array $attributes = []

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.

<?= $heroicons->arrowLeftHtml('w-8 h-8', null, null) ?>

How to use SvgIcons in the CMS content in Hyvä

The Hyvä theme module adds an icon directive to render any SVG icon in filtered content like CMS blocks or pages.

{{icon "heroicons/solid/shopping-cart" classes="w-6 h-6" width=12 height=12}}

To use your own custom icons which is stored in “web/svg/” such as “web/svg/cart.svg” can be referenced as

{{icon "cart"}}

How to use custom SVG icon set using View Models in your theme

To use the custom icons you will need to create subdirectory in the theme like “Webkul_HyvaTheme/web/svg” and place your SVG icons there.

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

$icons = $viewModels->require(\Hyva\Theme\ViewModel\SvgIcons::class);

echo $icons->renderHtml('rainbow-unicorn', 'w-6 h-6'); // either
echo $icon->rainbow-unicorn('w-6 h-6'); // or

How to Override heroicons in your theme

If you want to use a newer Heroicons package than the one shipped with Hyvä, you can place the files in your theme at “Hyva_Theme/web/svg/heroicons/solid” and “Hyva_Theme/web/svg/heroicons/outline”.

E.g. to render magic-wand.svg, call

$heroicons->magicWandHtml($class, $width, $height)

or alternatively

$heroicons->renderHtml('magic-wand', $class, $width, $height)

Next Blog link : – How to work with sectionData in Hyvä

Previous Blog link : – Essential to learn for module compatibility in Hyvä Part – 1

. . .

Leave a Comment

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


Be the first to comment.

Back to Top

Message Sent!

If you have more details or questions, you can reply to the received confirmation email.

Back to Home