Skip to content

Upgrading to 1.5.4

Hyvä Theme 1.5.4 is a maintenance release that builds on 1.5.3. Hyvä Theme 1.5.4 restores the express checkout buttons in the cart drawer, which stopped working in 1.5.3, and adds a CSP compatible way for payment modules to add these buttons. The release also fixes cart and checkout issues on stores without hyva-themes/magento2-graphql-tokens, which the Default Theme no longer requires since 1.5.3.

Safe Module Update

Updating only the Hyva_Theme module to 1.5.4 is safe. The new privateContent Alpine store is an addition, and the private-content-loaded event is unchanged. The Page Builder button classes the module adds match the button styles of older Default Theme versions.

Default Theme 1.5.4 requires Theme Module 1.5.4

The Default Theme 1.5.4 no longer styles the Page Builder primary and secondary buttons in its CSS, because the Hyva_Theme module 1.5.4 adds the btn classes to them. Payment modules that add buttons to the new cart-drawer.shortcut-buttons container read the cart from the privateContent store, which requires hyva-themes/magento2-theme-module 1.5.4 or later.

Notable news

Express checkout buttons in the cart drawer work again

Payment modules such as Mollie and Braintree add express checkout buttons (Apple Pay, Google Pay, PayPal and similar) to the cart drawer through the extra_actions key of the cart section data. In 1.5.3 the cart drawer rendered this HTML with x-html-safe, which removes scripts, Alpine attributes and event handlers. The buttons were shown, but did nothing when clicked.

In 1.5.4 the cart drawer renders the section data extra actions with x-html again, so the express checkout buttons work as before. With Map x-html-safe to x-html enabled, the extra actions are still sanitized, and the buttons don't work on those pages. To support CSP, payment modules need to move their buttons to the new cart-drawer.shortcut-buttons container.

New cart-drawer.shortcut-buttons container for express checkout buttons

The cart drawer has a new cart-drawer.shortcut-buttons layout container for express checkout buttons. The container is rendered once, outside the x-if templates of the drawer, so the scripts of a block run once and its Alpine component keeps its state.

Use this container instead of the section data extra actions, which are now deprecated, and instead of the extra_actions layout container. The extra_actions layout container is placed inside the x-if template of the cart items, so its scripts only run after Alpine has started, and an alpine:init listener in there is never called.

See Adding Express Checkout Buttons for a full example.

Cart and checkout fixes for stores without hyva-themes/magento2-graphql-tokens

Since 1.5.3 the Default Theme no longer requires hyva-themes/magento2-graphql-tokens. The graphql-tokens module adds the cartId to the cart section data, and a few places still depended on it. Stores without the module are affected by the following issues, which are fixed in 1.5.4.

  • Luma checkout data removed on every section reload: The Hyva_Theme module removed the checkout-data from local storage whenever the cart section had no cartId. This cleared the data of the Luma checkout, such as the entered address, on every section reload. The checkout-data is now only removed when the cart is empty, which is still the case after a logout or an expired session.
  • Cart page shipping estimate for guests: The shipping estimate and totals requests were sent to guest-carts/undefined, so the estimate failed with "Something went wrong". Both requests now use the masked quote id from the checkout config.
  • PayPal Express shortcut: The PayPal Express shortcut sent quote_id=undefined. The shortcut now sends an empty value, so Magento uses the quote of the current session.

New privateContent Alpine store for section data

The Hyva_Theme module registers a privateContent Alpine store with the section data of the latest private-content-loaded event. Components read the store reactively, for example $store.privateContent.cart, without an event listener, which also works with the Alpine CSP build.

See Working with sectionData for details.

Page Builder default classes for buttons

The Hyva_Theme module adds CSS classes to Page Builder content when it is rendered, so Page Builder elements use the Hyvä component classes. In 1.5.4 the primary and secondary buttons get btn btn-primary and btn btn-secondary. The output looks the same as before, because the Default Theme applied these styles in its CSS until now.

The Page Builder default classes are configured in di.xml, and work on existing content without saving it again. You can add classes to other Page Builder elements, for example prose to text, or switch a default off.

See Page Builder Default Classes for the configuration and the reasons behind it.

Tailwind CSS updated to 4.3.5

The Default Theme uses Tailwind CSS 4.3.5. The Tailwind update only contains fixes, and the generated CSS is the same apart from formatting. To update a theme, set tailwindcss and @tailwindcss/cli to ^4.3.5 in web/tailwind/package.json and run npm install.

Deprecations

  • Section data extra actions in the cart drawer: The getSectionDataExtraActions() method of the cart drawer component is deprecated, because x-html isn't available in the Alpine CSP build. Add express checkout buttons as a block to the cart-drawer.shortcut-buttons container instead.

Bug fixes

  • x-html-safe renders nothing in Safari: The HTML parser accepts data-* attribute names such as data-a"b, but WebKit (Safari and every browser on iOS) throws an error when such a name is copied. One malformed attribute, for example in pasted CMS content, made the whole x-html-safe value render empty. These attribute names are now skipped.
  • <picture> sources with width and height: getPictureHtml() and getResponsivePictureHtml() now add the width and height of each responsive image to its <source> tag, which prevents a layout shift when the browser picks a different image per breakpoint.
  • Background opacity fallback: The bg-opacity-* fallback for bg-primary, bg-white and bg-black calculated the opacity the wrong way around.
  • BreadcrumbList structured data on product pages: The structured data is now rendered on the server from the static breadcrumb path. Before, it used the client side breadcrumbs, which depend on the referring category and could contain a category the product isn't in. This happened with Hyvä Client-Side Breadcrumbs Rendering enabled and Use Categories Path for Product URLs disabled.

Backward compatibility

This release is backward compatible. Check the following points if they apply to your project.

  • Overrides of the cart drawer template: An override of Magento_Theme::html/cart/cart-drawer.phtml based on 1.5.3 still renders the extra actions with x-html-safe, so the express checkout buttons don't work. Change x-html-safe="getSectionDataExtraActions" back to x-html="getSectionDataExtraActions", and render the new container outside the x-if templates with <?= $block->getChildHtml('cart-drawer.shortcut-buttons') ?>.
  • Modules using the extra_actions layout container: These keep working. Blocks with their own script should move to cart-drawer.shortcut-buttons, see Adding Express Checkout Buttons.
  • Overrides of the Default Theme Page Builder CSS: A copy of web/tailwind/theme/page-builder.css from an earlier version still applies btn btn-primary and btn btn-secondary with @apply. The copied CSS keeps working, but you can remove these rules to reduce the CSS size.

Changelogs

Changelogs are available from the CHANGELOG.md in the codebase, or here:

Tooling

Check the Hyvä Theme upgrade docs for helpful information on how to upgrade.