Working with View Models in Hyvä
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!
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:
- HeroiconsSolid
- 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