fix(storefront): broken Alpine x-text from |tojson inside double-quoted attribute
Some checks failed
CI / ruff (push) Successful in 16s
CI / validate (push) Has been cancelled
CI / dependency-scanning (push) Has been cancelled
CI / docs (push) Has been cancelled
CI / deploy (push) Has been cancelled
CI / pytest (push) Has been cancelled

Dashboard unread-messages count crashed Alpine with
"expected expression, got '}'" because I emitted Jinja {{ _(...) | tojson }}
directly inside x-text="..." — the JSON's double quotes broke out of the
attribute, leaving Alpine to parse a malformed expression.

The messages card has its own nested x-data="{ unreadCount: 0 }" scope,
so the parent component's i18n property isn't reachable. Moved the
singular/plural strings onto window.__accountDashboardI18n (added next
to logoutSuccess/logoutFailed) and referenced them by global path from
x-text — no quoting collision and the nested scope sees window fine.

Other touched templates (login/register/forgot/reset-password) already
use x-data='...' (single-quoted outer attribute) for their |tojson
language-selector args, so this collision only existed in dashboard.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-05-28 23:55:14 +02:00
parent 36fd37813b
commit 1bade6e6b2

View File

@@ -91,7 +91,7 @@
</div> </div>
<div x-show="unreadCount > 0"> <div x-show="unreadCount > 0">
<p class="text-sm text-primary font-medium" style="color: var(--color-primary)" <p class="text-sm text-primary font-medium" style="color: var(--color-primary)"
x-text="(unreadCount === 1 ? {{ _('customers.storefront.pages.dashboard.unread_messages_singular')|tojson }} : {{ _('customers.storefront.pages.dashboard.unread_messages_plural')|tojson }}).replace('{count}', unreadCount)"></p> x-text="(unreadCount === 1 ? window.__accountDashboardI18n.unreadSingular : window.__accountDashboardI18n.unreadPlural).replace('{count}', unreadCount)"></p>
</div> </div>
</a> </a>
</div> </div>
@@ -138,6 +138,8 @@
window.__accountDashboardI18n = { window.__accountDashboardI18n = {
logoutSuccess: {{ _('customers.storefront.pages.dashboard.logout_success')|tojson }}, logoutSuccess: {{ _('customers.storefront.pages.dashboard.logout_success')|tojson }},
logoutFailed: {{ _('customers.storefront.pages.dashboard.logout_failed')|tojson }}, logoutFailed: {{ _('customers.storefront.pages.dashboard.logout_failed')|tojson }},
unreadSingular: {{ _('customers.storefront.pages.dashboard.unread_messages_singular')|tojson }},
unreadPlural: {{ _('customers.storefront.pages.dashboard.unread_messages_plural')|tojson }},
}; };
function accountDashboard() { function accountDashboard() {
const i18n = window.__accountDashboardI18n || {}; const i18n = window.__accountDashboardI18n || {};