Reading list Switch to dark mode

    Essential to learn for module compatibility in Hyvä Part – 1

    Updated 17 July 2023

    In this blog, we will learn some of the essential concepts you need to know before working on module compatibility so that it can be easier to work on it.

    Essential (1) – The hyva_ Layout Handles

    In the Hyvä theme, for every layout update handle applied on the page at that time a new handle with the hyva_ prefix will automatically applied, too.

    for example in luma store layout.


    Same thing in the Hyvä theme with the hyva_ prefix.


    So it allows to create both store view Luma and Hyvä at the time working with module and luma store view can easily render luma layout handles without any interruption and hyvä store view will render hyva_ prefixed layout only.

    Searching for an experienced
    Magento 2 Company ?
    Find out More

    All the hyva_ prefixed layout handles are applied to the hyvä theme only if the Hyvä theme is active in the store.

    Note: – If you want to work on layout changes for the Hyvä then go for the hyva_ prefixed layouts.

    While doing module compatibility for hyvä you have to create a hyva_ prefixed layout in the Hyva Compatible Module.

    Essential (2) – window.dispatchMessages()

    In Luma store you might be usine customerData.set() or the ‘Magento_Ui/js/model/messageList’ dependency but in hyvä we can’t use this.

    Hyvä provides a global function window.dispatchMessages() to show messages.

    The function takes one or two arguments:

    1) An array of message objects. Each message object has a type and a text.
    The type is usually one of “success”, “notice”, “warning” or “error”. The text is the message to display. HTML and “<br>” linebreaks in message are possible.

    2) The optional second parameter is the duration in ms after which the message disappears. If no duration is supplied, the message will remain until the user dismisses it with a click on the X icon.

            type: "success",
            text: "Well done! Make haste, my friend, because this message as ephemeral all good things are!"
    ], 2000);

    Essential (3) – Building URLs in JavaScript

    In Luma we use the “mage/url” module to prepend the base url and current store code in Js. But in Hyvä it is much simpler by using a global variable window.BASE_URL

    For BASE_URL

    If you want to add the base url in URL then use this global variable BASE_URL

    for normal or regular requests, use.

    BASE_URL + "webkul/example/action"

    we can also use in the version of the template literal.


    The above is the equivalent of what the Luma “” method does.


    If you want to add the current store code with the base url in URL then use the global variable CURRENT_STORE_CODE

    for the template literal version


    for the regular version

    BASE_URL + 'rest/' + CURRENT_STORE_CODE + '/webkul/example/action'

    Essential (4) – using fetch()

    In Luma we are using $.ajax, $.post, $.get but In Hyvä, the native browser function window.fetch is used.

    Please refer link that well documented about fetch().

    Essential (5) – How to get formated price

    In Hyvä you can get formated price by calling function hyva.formatPrice(value, showSign) of hyva global object.

    hyva.formatPrice(value, showSign)

    This method will formates and return the given value with current currency. The “showSign” argument is optional or you can pass true, a +, or – symbol is always rendered. or else, by default only “-” is rendered for negative values.

    Before Blog link : – How to create your own theme in Hyvä Theme?

    . . .

    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