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 #}