Working with View Models in Hyvä

In Magento you might be utilizing view fashions lots!. Compared with block class, they’re extra reusable and composable. You possibly can add arbitrary variety of view fashions to any template block by including through structure xml file.

In Hyvä as a substitute of including through structure xml file, you’ll be able to straight use the view fashions within the template through world variable $viewModels just like the present $block and $escaper variables. You should use it to fetch any view mannequin (i.e. any class that implements ArgumentInterface).

Instance :

/** @var HyvaThemeModelViewModelRegistry $viewModels */
$currentProduct = $viewModels->require(HyvaThemeViewModelCurrentProduct::class);

Excellent news

In Hyvä It’s not wanted to declare view fashions in XML!

Looking for an skilled
Magento 2 Firm ? Learn Extra

SvgIcons

On the web site, it’s essential to have to make use of not less than just a few icons for a very good interface and comprehensible to the consumer. In Hyvä The SvgIcons view mannequin can be utilized to render any icon set.

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

1. HeroiconsSolid
2. HeroiconsOutline

To preview the icons verify this hyperlink https://heroicons.com/

How one can use SvgIcons within the template utilizing View Fashions in Hyvä

In your template:

/** @var HyvaThemeViewModelHeroiconsOutline $heroicons */
$heroicons = $viewModels->require(HyvaThemeViewModelHeroiconsOutline::class);

Then render the icons like this:

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

arrowLeftHtml is methodology identify which in camelcase to make use of the left arrow icon .

Equally arrowRightHtml is for proper arrow icon

All strategies take the next arguments:

string $classnames="", ?int $width = 24, ?int $peak = 24, array $attributes = []

All parameters are non-compulsory, and alter the category , width and peak attributes of the SVG aspect, or add extra HTML attributes. To render an SVG with out a width and a peak attribute, go null because the second and third argument.

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

How one can use SvgIcons within the CMS content material in Hyvä

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

{{icon "heroicons/strong/shopping-cart" courses="w-6 h-6" width=12 peak=12}}

To make use of your individual customized icons which is saved in “net/svg/” corresponding to “net/svg/cart.svg” might be referenced as

{{icon "cart"}}

How one can use customized SVG icon set utilizing View Fashions in your theme

To make use of the customized icons you have to to create subdirectory within the theme like “Webkul_HyvaTheme/net/svg” and place your SVG icons there.

Then to make use of the icons you’ll be able to instantiate the view mannequin and to render the icon you should use renderHtml perform with icon identify as one of many parameter or magic methodology matching the specified icon identify

$icons = $viewModels->require(HyvaThemeViewModelSvgIcons::class);

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

How one can Override heroicons in your theme

If you wish to use a more moderen Heroicons package deal than the one shipped with Hyvä, you’ll be able to place the information in your theme at “Hyva_Theme/net/svg/heroicons/strong” and “Hyva_Theme/net/svg/heroicons/define”.

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

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

or alternatively

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

Earlier Weblog hyperlink : – Important to be taught for module compatibility in Hyvä Half – 1

Shreyas Vispute
3 Badges

23 April 2022