Read More
Read More
Menu Close

    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!

    Searching for an experienced
    Magento 2 Company ?
    Read 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

    . . .
    Discuss on Helpdesk

    Leave a Comment

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


    Be the first to comment.

    Back to Top