A collection of Hyvä code snippets for Visual Studio Code.
If you don't know yet, Hyvä Themes is a brand-new frontend for Magento 2 with a best Developer Experience, performance and time to market.
Most part of the snippets are inspired by the Hyvä Documentation.
- Open the extensions panel with
Ctrl + Shift + XorCmd + Shift + X - Search for Hyvä Code Snippets
- Click on Install
You can also install it from the Visual Studio Code Marketplace →
| Snippet | Purpose |
|---|---|
hyva.alpine.consoleLogObject |
Console log object in Alpine.js |
hyva.alpine.createComponent |
Create new Alpine.js component |
hyva.alpine.dispatchAuthentication |
Dispatch Hyvä toggle authentication event |
hyva.alpine.dispatchCustomEvent |
Dispatch custom event with Alpine.js |
hyva.alpine.dispatchReloadCustomerSectionData |
Dispatch Hyvä reload customer section data event |
hyva.alpine.dispatchToggleCart |
Dispatch Hyvä toggle cart event |
hyva.alpine.dispatchToggleMobileMenu |
Dispatch Hyvä toggle mobile menu event |
hyva.alpine.listenToCustomEvent |
Listen to custom event with Alpine.js |
hyva.alpine.listenToPrivateContentLoaded |
Listen to private content loaded event with Alpine.js |
hyva.alpine.listenToProductFinalPrice |
Listen to update product final price event with Alpine.js |
| Snippet | Purpose |
|---|---|
hyva.js.dispatchCustomEvent |
Dispatch custom event |
hyva.js.dispatchMessages |
Display Hyvä notification banner (success, notice, warning or error) |
hyva.js.fetchAjaxRequest |
Use the fetch API to simulate an Ajax request with the XMLHttpRequest object |
hyva.js.fetchFormPostRequest |
Fetch form post request with JSON data |
hyva.js.formatPrice |
Formats and returns the given value using the current currency |
hyva.js.getBaseUrl |
Base URL builder |
hyva.js.getBrowserStorage |
Returns either the native localStorage if it is available or tries to fall back to the sessionStorage object |
hyva.js.getCookie |
Get a given cookie value |
hyva.js.getCurrentStoreCode |
Buld current store code |
hyva.js.getFormKey |
Returns the current form key value |
hyva.js.loadExternalLibrary |
Load vanilla JavaScript library from vanilla JavaScript |
hyva.js.postForm |
Creates a new <form> element then adds hidden fields for a given data object and finally submits the created form |
hyva.js.replaceDomElement |
Replaces the DOM element specified by targetSelector with the HTML string content |
hyva.js.setCookie |
Skip setting the domain on the cookie |
hyva.js.strf |
Replaces positional parameters like %0 with the additional argument in the matching position |
| Snippet | Purpose |
|---|---|
hyva.template.createModal |
Create new modal with Hyvä Modal ViewModel |
hyva.template.echoHeroiconsIcon |
Echo Heroicons icon with Heroicons ViewModel |
hyva.template.echoLoader |
Echo Hyvä UI loader |
hyva.template.echoSvgIconsIcon |
Render SVG icon with SvgIcons ViewModel |
hyva.template.echoTranslation |
Echo escaped Magento 2 translation |
hyva.template.echoTranslationWithVariable |
Echo escaped Magento 2 translation with variable |
hyva.template.escapeHtml |
Add Magento 2 HTML escaper |
hyva.template.escapeHtmlAttr |
Add Magento 2 HTML attribute escaper |
hyva.template.escapeJs |
Add Magento 2 JavaScript escaper |
hyva.template.escapeUrl |
Add Magento 2 URL escaper |
hyva.template.getChildHtml |
Add Magento 2 getChildHtml() to render child block |
hyva.template.getFileUrl |
Use Magento 2 getFileUrl() method to render a file |
hyva.template.getUrl |
Use Magento 2 getUrl() method to render the page path |
hyva.template.formatPrice |
Use Magento 2 formatPrice() method to formats and returns the given value using the current currency |
hyva.template.isCustomerLoggedIn |
Use Magento 2 isCustomerLoggedIn() method to check if customer is logged in |
hyva.template.isProductInStock |
Use Magento 2 isProductInStock() method to check if product is in stock |
hyva.template.requireCustomerViweModel |
Require customer ViewModel |
hyva.template.requireHericonsOutlineViewModel |
Require Heroicons outline ViewModel |
hyva.template.requireHericonsSolidViewModel |
Require Heroicons solid ViewModel |
hyva.template.requireModalViewModel |
Require Hyvä Modal ViewModel |
hyva.template.requireProductPriceViewModel |
Require product price ViewModel |
hyva.template.requireProductStockItemViewModel |
Require product stock item ViewModel |
hyva.template.requireSvgIconsViewModel |
Require product stock item ViewModel |
MIT License, refer to license file.