In this post, I will explain the most useful Hyvä JavaScript helper functions available in Hyvä themes.
Quick Look
| Helper Function Name | Main Use |
|---|---|
hyva.getFormKey() |
Retrieves the current Magento form key for secure form submissions. |
hyva.getCookie() |
Safely retrieves the value of a specific cookie. |
hyva.setCookie() |
Sets a cookie with specified name, value, and options. |
hyva.setSessionCookie() |
Sets a cookie that expires when the session ends. |
hyva.formatPrice() |
Formats a numerical value as a currency string based on store settings. |
hyva.str() / hyva.strf() |
Replaces placeholders in strings; useful for translations and dynamic text. |
hyva.replaceDomElement() |
Replaces an existing DOM element with new HTML content. |
hyva.getUenc() |
Generates a URL-encoded parameter for redirects back to current page. |
hyva.alpineInitialized() |
Executes a callback after Alpine.js initialization. |
hyva.postForm() |
Submits a form dynamically with hidden fields. |
hyva.getBrowserStorage() |
Gets localStorage or sessionStorage. |
In Hyvä theme, the global window.hyva JavaScript object is available on every page with a collection of useful helper functions.
You can find these helper functions defined inside the file:
vendor/hyva-themes/magento2-theme-module/src/view/frontend/templates/page/js/hyva.phtml
Breakdown of the Hyvä JavaScript Helper Functions
1. hyva.getFormKey()
Description: Returns the current Magento form key from the form_key cookie. Safer than hardcoding with PHP.
<input type="hidden" name="form_key" :value="hyva.getFormKey()" />2. hyva.getCookie()
Description: Retrieves the value of a specific cookie by name.
let cookieName = 'my_cookie_name';
let cookieValue = hyva.getCookie(cookieName);
console.log(cookieValue);3. hyva.setCookie()
Description: Sets a cookie with optional expiry days and domain handling.
hyva.setCookie('my_cookie_name', 'testValue', 7);
console.log(hyva.getCookie('my_cookie_name')); // testValue4. hyva.setSessionCookie()
Description: Creates a cookie valid only for the current browser session.
hyva.setSessionCookie('session_cookie', 'sessionValue');
console.log(hyva.getCookie('session_cookie'));5. hyva.formatPrice()
Description: Formats a number into a currency string according to store settings.
let price = 49.99;
let formatted = hyva.formatPrice(price);
console.log(formatted); // e.g. "$49.99"6. hyva.str()
Description: Replaces placeholders (%1, %2) with given arguments.
let result = hyva.str('%2 %1 %3', 'a', 'b', 'c');
console.log(result); // "b a c"7. hyva.strf()
Description: Similar to str() but starts indexing at %0.
let result = hyva.strf('%1 %0 %2', 'a', 'b', 'c');
console.log(result); // "b a c"8. hyva.replaceDomElement()
Description: Replaces an element’s content with new HTML and executes any scripts inside it.
window.fetch('/custom/url', { method: 'POST' })
.then(res => res.text())
.then(body => hyva.replaceDomElement('#maincontent', body))
.catch(() => window.location.reload());9. hyva.getUenc()
Description: Generates a uenc parameter for secure redirect back to current page.
let data = "form_key=" + hyva.getFormKey() + "&uenc=" + hyva.getUenc();
console.log(data);10. hyva.alpineInitialized()
Description: Executes a callback once Alpine.js is fully initialized.
hyva.alpineInitialized(() => {
console.log("Alpine is ready!");
});11. hyva.postForm()
Description: Dynamically submits a form with hidden fields and includes form key + uenc automatically.
<a href="#" x-data=""
@click.prevent="hyva.postForm({ action: BASE_URL+'custom_quote/move/inQuote/', data: { id: '3' } })">
Request a Quote
</a>12. hyva.getBrowserStorage()
Description: Returns localStorage if available, otherwise falls back to sessionStorage.
const storage = hyva.getBrowserStorage();
storage.setItem('mage-cache-timeout', 3600);
console.log(storage.getItem('mage-cache-timeout'));