Read More
Read More
Menu Close

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

    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.

    default
    cms_index_index
    cms_page
    customer_logged_out

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

    hyva_default
    hyva_cms_index_index
    hyva_cms_page
    hyva_customer_logged_out

    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 ?
    Read 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.

    dispatchMessages([
        {
            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.

    `${BASE_URL}webkul/example/action`

    The above is the equivalent of what the Luma “urlBuilder.build()” method does.

    For CURRENT_STORE_CODE

    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

    ${BASE_URL}/rest/${CURRENT_STORE_CODE}/webkul/example/action`

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

    https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

    https://developer.mozilla.org/en-US/docs/Web/API/Response

    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?

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