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.

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?