Fixing the Hyvä Theme Currency Switcher in Magento 2.4.8 (Hyvä 1.3.15)

While working with Magento 2.4.8 and Hyvä Theme v1.3.15, I encountered a breaking issue with the currency switcher component. The UI rendered correctly, but switching currencies silently failed — no POST request was triggered.

File Path

vendor/hyva-themes/magento2-default-theme/Magento_Directory/templates/currency.phtml

Root Cause

In the original Hyvä template, the switchCurrency() function was defined without an event parameter:

@click.prevent="switchCurrency"

Inside the Alpine.js method, it relied on this.$el.dataset.currencyData. However, in this context, this.$el did not reliably reference the that triggered the click. This led to empty or incorrect data being sent to hyva.postForm().

Additionally, the currencyData string returned by getSwitchCurrencyPostData() was JSON-encoded, but the original code passed it directly to hyva.postForm() without parsing, causing the request to fail.

The Fix

Two main changes were required:

1. Pass the click event to switchCurrency() so we can correctly target the clicked

element.Parse the JSON string from data-currency-data before passing it to hyva.postForm().

Updated Template Code

escapeHtml($code) ?> - escapeHtml($name) ?>

Updated JavaScript

function initCurrencySwitcher() {
    return hyva.createBooleanObject('open', false, {
        ariaExpanded() {
            return this.open() ? 'true' : 'false';
        },
        switchCurrency(event) {
            const currencyDataString = event.currentTarget.dataset.currencyData;
            const currencyData = JSON.parse(currencyDataString);
            hyva.postForm(currencyData);
        }
    });
}

Before / After Code Diff

Template Change

--- Original
- @click.prevent="switchCurrency"
+++ Fixed
+ @click.prevent="switchCurrency($event)"

JavaScript Change

--- Original JS
- switchCurrency() {
-     hyva.postForm(this.$el.dataset.currencyData)
- }

+++ Fixed JS
+ switchCurrency(event) {
+     const currencyDataString = event.currentTarget.dataset.currencyData;
+     const currencyData = JSON.parse(currencyDataString); // parse JSON string to object
+     hyva.postForm(currencyData);
+ }

Result

After implementing the fix:

• Currency switcher works in Magento 2.4.8 with Hyvä Theme 1.3.15.
• Dropdown and switching remain Alpine.js-driven with no UI regression.

Why This Matters

Hyvä relies heavily on Alpine.js for interactive UI. When event handling is misaligned with data attributes, subtle bugs appear. Passing the event explicitly and parsing JSON correctly ensures consistent and reliable component behavior.