Everything You Need to Know About Hyvä Themes 1.3.6 and 1.3.7 Releases

We are excited to announce the launch of Magento 2 Hyva theme versions 1.3.6 and 1.3.7! These latest updates come packed with performance improvements, exciting new features, and ensure seamless compatibility with the latest Magento version.

Hyvä Themes 1.3.6 & 1.3.7 tackle various challenges directly that affect website performance, and search engine ranking, and create other hindrances in scaling up the business, by offering a range of features aimed at turbocharging your Magento store.

Besides this, the latest iterations of Hyvä Theme (versions 1.3.6 and 1.3.7) deliver substantial performance enhancements and ensure compatibility with Magento 2.4.7 including bug fixes. These improvements are particularly critical in light of Google’s recent algorithm updates, which prioritize both speed and functionality.

Moreover, as the Hyva team puts more emphasis on upgrading their themes, we are seeing an increasing demand for Hyva theme development services, and Magento 2 upgrade services as the current Hyva releases work with some of the latest versions of Magento 2 which ultimately give online merchants more scope to finely customize, and scale up their store as per the requirement.

Features of Magento 2 Hyvä Theme 1.3.6

TailwindCSS version 3.4.1:

TailwindCSS has been upgraded to version 3.4.1, necessitating a minimum Node.js version of 16.

Requiring JavaScript dependencies:

Now, it’s feasible to specify a JavaScript dependency within a template or block level. This means that if the template or block is rendered, the required JavaScript will also be rendered within the before.body.end container, potentially reducing duplicate JavaScript on product listings.

Less unused or duplicated JavaScript:

In an effort to enhance the Core Web Vitals (CWV) metrics of Hyvä stores, redundant or unnecessary scripts have been eliminated. JavaScript related to PageBuilder content types is now only rendered when the respective content type is present on the page. Additionally, the initPriceBox function is now only rendered once instead of per product on a product listing page.

hyva.activateScripts method:

The hyva.activateScripts method accepts an Element instance as an argument, retrieves all script child elements, and appends them to the document head for browser parsing.

Security: the form key is now required for the customer login via Ajax:

For enhanced security, a form key is now mandatory for customer login via Ajax. This implementation addresses a security loophole discovered by renowned researcher Talesh Seeparsan in Magento, which previously did not require a form key for Ajax logins, particularly relevant when Checkout as Guest is disabled.

Default customer section data:

Starting from this release, visitors lacking a session will utilize default private section data, reducing server load by eliminating an Ajax call for each visitor. This implementation is expected to function smoothly in most scenarios.

Related search results:

Following the upgrade, styling adjustments may be necessary for the search_recommendations and search_suggestions blocks positioned above the search_result_list on the search results page.

Backward incompatible changes:

Node Version 16:

TailwindCSS has been upgraded to version 3.4.1, necessitating node version 16.

Transformation of the Extra Actions block in mini-cart to a container:

• The extra_actions block in the mini-cart, responsible for displaying additional checkout options typically offered by payment methods, has undergone a change.
• By default, Magento utilizes JavaScript to render these options via section data to avoid caching customer-specific data in the full page cache.
• Previously, the Magento 2 hyva theme rendered the extra_actions block directly with PHP, which hindered its use with actions requiring customer or quote data, such as PayPal Express In-Context. This update now utilizes JavaScript to render the extra_actions from the private content data.

Change in the Ship-To Name in Order History:

• In the past, the “Ship-To” column in the customer order history and recent orders on the account dashboard displayed the company name from the billing address.
• Consequently, for most orders in most stores, the column remained empty.
• This release modifies the behavior to exhibit the customer name from the shipping address instead.

Additional phrases have been incorporated into the translation dictionary:

%1 item

%1 search results

%1 thumbnail

1 search result

Close panel

Configure %1 on the product page

Error initializing Express Checkout, please try again later or choose a different checkout method.

Play video

The price depends on the chosen options

The price depends on the options chosen on the product page

Support for video settings in the admin configuration:

The default setting for the gallery option loopVideo has been modified. Previously, loopVideo was defaulted to true, leading videos to loop automatically. Now, this defaults to false, with the admin configuration taking precedence. To enable automatic video looping, adjust loopVideo to true in your admin configuration, located at “Stores > Configuration > Catalog > Catalog > Product Video.”

Note – In case you face any problem with the latest release of the Hyva theme or are unable to make the changes, then Rock Technolabs is available to support you with its Hyva theme development services.

Anonymized default section data is used for visitors without a session:

In this release, there’s a potential change that might not be compatible with previous versions: section data for visitors without a session is now sent without an Ajax request, utilizing anonymized default data.

Features of Magento 2 Hyvä Theme 1.3.7

Introducing the new x-defer directive in Alpine.js:

This latest custom Alpine directive aids in minimizing main thread blocking time and enhancing core web vital metrics.

Automated insertion of x-defer:

With the current update, the hyva-themes/magento-theme-module now automatically inserts the x-defer directive into specific Alpine components. This enhancement aims to enrich the user experience for themes utilizing older versions of Hyvä. Simply upgrading to hyva-themes/magento2-theme-module version 1.3.7 or later triggers this injection, which operates based on CSS selectors and is configurable via the backend.

Experimenting with Prerender Speculation Rules:

A novel browser API enables the pre-rendering of pages anticipated to be visited next, enhancing the overall user experience. Hyvä 1.3.7 introduces an experimental implementation of this feature, which can be activated within the system configuration settings at Hyvä Themes > Experimental > Experimental Features > Enable Preloading Speculation Rules.

Magento 2.4.7 Compatibility:

The relevant adaptations are aligned with version 2.4.7-beta3 of Magento, although unforeseen last-minute additions may still arise in the final Magento release. These modifications primarily concern the integration of the Magento_OrderCancellationUi module.

Addition of New Translated Phrases:

The latest translations include new phrases such as “Order %1 canceled,” necessitating the integration of the dependency hyva-themes/magento2-order-cancellation-webapi. As the order-cancellation feature introduced in Magento 2.4.7 initially relies solely on a GraphQL API, the compatibility module shifts towards utilizing a REST API provided by hyva-themes/magento2-order-cancellation-webapi to mitigate GraphQL usage in Hyvä.

Update of reset-theme Dependency to Version 1.1.6:

The reset-theme dependency undergoes an update to version 1.1.6 to accommodate new layout XML resets for the Magento_OrderCancellationUi module introduced in Magento 2.4.7.