diff --git a/.architecture-rules/language.yaml b/.architecture-rules/language.yaml
index a928f471..f7981fff 100644
--- a/.architecture-rules/language.yaml
+++ b/.architecture-rules/language.yaml
@@ -48,12 +48,12 @@ language_rules:
...
}">
- RIGHT (function with tojson - NO safe in HTML attributes):
-
+ RIGHT (function call with single quotes for x-data attribute):
+
- NOTE: Use |tojson (without |safe) in HTML attributes so quotes
- become " which the browser correctly decodes. Using |safe
- would output raw quotes that break the attribute parsing.
+ IMPORTANT: Use SINGLE QUOTES for the x-data attribute value because
+ |tojson outputs double quotes in JSON arrays. Single quotes on the
+ outside prevent the JSON double quotes from breaking HTML parsing.
The languageSelector function must be defined in:
- static/shop/js/shop-layout.js (for storefront)
@@ -75,9 +75,12 @@ language_rules:
When passing Python lists to JavaScript, use tojson appropriately:
IN HTML ATTRIBUTES (x-data, data-*, etc.):
- Use |tojson WITHOUT |safe - quotes become " which browsers decode:
-
-
+ Use SINGLE QUOTES for the attribute and |tojson for the array:
+
+
+
+ The single quotes on x-data prevent JSON double quotes from
+ breaking the HTML attribute parsing.
IN
- WRONG (raw output - Python syntax not valid JS):
- languages: {{ vendor.storefront_languages }}
-
-
- WRONG (|safe in HTML attributes - breaks attribute parsing):
-
-
+ WRONG (double quotes with tojson - JSON quotes break the attribute):
+
+
pattern:
file_pattern: "app/templates/**/*.html"
required_with_jinja_array:
diff --git a/app/templates/shared/macros/language_selector.html b/app/templates/shared/macros/language_selector.html
index 26b0f1c1..a444a44c 100644
--- a/app/templates/shared/macros/language_selector.html
+++ b/app/templates/shared/macros/language_selector.html
@@ -57,8 +57,9 @@
{% set current = current_language if current_language in langs else langs[0] %}
{% set positions = {'left': 'left-0', 'right': 'right-0'} %}
{# Uses languageSelector() function per LANG-002 architecture rule #}
+{# Use single quotes for x-data so JSON double quotes don't break the attribute #}