feat: add multi-language (i18n) support for vendor dashboard and storefront
- Add database fields for language preferences: - Vendor: dashboard_language, storefront_language, storefront_languages - User: preferred_language - Customer: preferred_language - Add language middleware for request-level language detection: - Cookie-based persistence - Browser Accept-Language fallback - Vendor storefront language constraints - Add language API endpoints (/api/v1/language/*): - POST /set - Set language preference - GET /current - Get current language info - GET /list - List available languages - DELETE /clear - Clear preference - Add i18n utilities (app/utils/i18n.py): - JSON-based translation loading - Jinja2 template integration - Language resolution helpers - Add reusable language selector macros for templates - Add languageSelector() Alpine.js component - Add translation files (en, fr, de, lb) in static/locales/ - Add architecture rules documentation for language implementation - Update marketplace-product-detail.js to use native language names 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
329
app/templates/shared/macros/language_selector.html
Normal file
329
app/templates/shared/macros/language_selector.html
Normal file
@@ -0,0 +1,329 @@
|
||||
{#
|
||||
Language Selector Macros
|
||||
========================
|
||||
Reusable language selector components for vendor dashboard and storefront.
|
||||
|
||||
Usage:
|
||||
{% from 'shared/macros/language_selector.html' import language_selector, language_selector_compact %}
|
||||
|
||||
{# Full language selector with labels #}
|
||||
{{ language_selector(current_language='fr', enabled_languages=['fr', 'de', 'en'], position='right') }}
|
||||
|
||||
{# Compact selector (flag only) #}
|
||||
{{ language_selector_compact(current_language='fr', enabled_languages=['fr', 'de', 'en']) }}
|
||||
#}
|
||||
|
||||
|
||||
{#
|
||||
Language configuration - matches app/utils/i18n.py
|
||||
Uses native language names per LANG-005 architecture rule
|
||||
#}
|
||||
{% set LANGUAGE_NAMES = {
|
||||
'en': 'English',
|
||||
'fr': 'Français',
|
||||
'de': 'Deutsch',
|
||||
'lb': 'Lëtzebuergesch'
|
||||
} %}
|
||||
|
||||
{% set LANGUAGE_NATIVE = {
|
||||
'en': 'English',
|
||||
'fr': 'Français',
|
||||
'de': 'Deutsch',
|
||||
'lb': 'Lëtzebuergesch'
|
||||
} %}
|
||||
|
||||
{% set LANGUAGE_FLAGS = {
|
||||
'en': 'gb',
|
||||
'fr': 'fr',
|
||||
'de': 'de',
|
||||
'lb': 'lu'
|
||||
} %}
|
||||
|
||||
|
||||
{#
|
||||
Language Selector (Full)
|
||||
========================
|
||||
A dropdown language selector showing flag and language name.
|
||||
|
||||
Parameters:
|
||||
- current_language: Current language code (default: 'fr')
|
||||
- enabled_languages: List of enabled language codes (default: all)
|
||||
- position: 'left' | 'right' (default: 'right')
|
||||
- context: 'vendor' | 'shop' | 'admin' (affects API endpoint)
|
||||
- show_label: Show language name next to flag (default: true)
|
||||
#}
|
||||
{% macro language_selector(current_language='fr', enabled_languages=none, position='right', context='shop', show_label=true) %}
|
||||
{% set langs = enabled_languages or ['en', 'fr', 'de', 'lb'] %}
|
||||
{% 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 #}
|
||||
<div
|
||||
x-data="languageSelector('{{ current }}', {{ langs | tojson | safe }})"
|
||||
class="relative inline-block"
|
||||
>
|
||||
<button
|
||||
@click="isLangOpen = !isLangOpen"
|
||||
@click.outside="isLangOpen = false"
|
||||
type="button"
|
||||
class="inline-flex items-center gap-2 px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 transition-colors"
|
||||
:class="{ 'ring-2 ring-purple-500 ring-offset-2': isLangOpen }"
|
||||
>
|
||||
<span class="fi" :class="'fi-' + languageFlags[currentLang]"></span>
|
||||
{% if show_label %}
|
||||
<span x-text="languageNames[currentLang]" class="hidden sm:inline"></span>
|
||||
{% endif %}
|
||||
<span x-html="$icon('chevron-down', 'w-4 h-4')" :class="{ 'rotate-180': isLangOpen }" class="transition-transform"></span>
|
||||
</button>
|
||||
|
||||
<div
|
||||
x-show="isLangOpen"
|
||||
x-transition:enter="transition ease-out duration-100"
|
||||
x-transition:enter-start="transform opacity-0 scale-95"
|
||||
x-transition:enter-end="transform opacity-100 scale-100"
|
||||
x-transition:leave="transition ease-in duration-75"
|
||||
x-transition:leave-start="transform opacity-100 scale-100"
|
||||
x-transition:leave-end="transform opacity-0 scale-95"
|
||||
class="absolute z-50 mt-2 w-44 {{ positions[position] }} bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 py-1"
|
||||
>
|
||||
<template x-for="lang in languages" :key="lang">
|
||||
<button
|
||||
@click="setLanguage(lang)"
|
||||
type="button"
|
||||
class="flex items-center gap-3 w-full px-4 py-2 text-sm font-medium transition-colors"
|
||||
:class="currentLang === lang
|
||||
? 'bg-purple-50 dark:bg-purple-900/20 text-purple-700 dark:text-purple-300'
|
||||
: 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'"
|
||||
>
|
||||
<span class="fi" :class="'fi-' + languageFlags[lang]"></span>
|
||||
<span x-text="languageNames[lang]"></span>
|
||||
<span x-show="currentLang === lang" x-html="$icon('check', 'w-4 h-4 ml-auto')" class="text-purple-600 dark:text-purple-400"></span>
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
|
||||
{#
|
||||
Language Selector (Compact)
|
||||
===========================
|
||||
A compact language selector showing only flag icon.
|
||||
Good for headers with limited space.
|
||||
|
||||
Parameters:
|
||||
- current_language: Current language code (default: 'fr')
|
||||
- enabled_languages: List of enabled language codes (default: all)
|
||||
- position: 'left' | 'right' (default: 'right')
|
||||
#}
|
||||
{% macro language_selector_compact(current_language='fr', enabled_languages=none, position='right') %}
|
||||
{% set langs = enabled_languages or ['en', 'fr', 'de', 'lb'] %}
|
||||
{% 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 #}
|
||||
<div
|
||||
x-data="languageSelector('{{ current }}', {{ langs | tojson | safe }})"
|
||||
class="relative"
|
||||
>
|
||||
<button
|
||||
@click="isLangOpen = !isLangOpen"
|
||||
@click.outside="isLangOpen = false"
|
||||
type="button"
|
||||
class="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors focus:outline-none"
|
||||
:class="{ 'text-gray-700 dark:text-white bg-gray-100 dark:bg-gray-700': isLangOpen }"
|
||||
title="Change language"
|
||||
>
|
||||
<span class="fi text-lg" :class="'fi-' + languageFlags[currentLang]"></span>
|
||||
</button>
|
||||
|
||||
<div
|
||||
x-show="isLangOpen"
|
||||
x-transition:enter="transition ease-out duration-100"
|
||||
x-transition:enter-start="transform opacity-0 scale-95"
|
||||
x-transition:enter-end="transform opacity-100 scale-100"
|
||||
x-transition:leave="transition ease-in duration-75"
|
||||
x-transition:leave-start="transform opacity-100 scale-100"
|
||||
x-transition:leave-end="transform opacity-0 scale-95"
|
||||
class="absolute z-50 mt-1 w-44 {{ positions[position] }} bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 py-1"
|
||||
>
|
||||
<template x-for="lang in languages" :key="lang">
|
||||
<button
|
||||
@click="setLanguage(lang)"
|
||||
type="button"
|
||||
class="flex items-center gap-3 w-full px-4 py-2 text-sm font-medium transition-colors"
|
||||
:class="currentLang === lang
|
||||
? 'bg-purple-50 dark:bg-purple-900/20 text-purple-700 dark:text-purple-300'
|
||||
: 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'"
|
||||
>
|
||||
<span class="fi" :class="'fi-' + languageFlags[lang]"></span>
|
||||
<span x-text="languageNames[lang]"></span>
|
||||
<span x-show="currentLang === lang" x-html="$icon('check', 'w-4 h-4 ml-auto')" class="text-purple-600 dark:text-purple-400"></span>
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
|
||||
{#
|
||||
Language Toggle (Simple)
|
||||
========================
|
||||
A simple language toggle for when only 2 languages are enabled.
|
||||
Shows both flags side by side.
|
||||
|
||||
Parameters:
|
||||
- current_language: Current language code
|
||||
- enabled_languages: List of exactly 2 language codes
|
||||
#}
|
||||
{% macro language_toggle(current_language='fr', enabled_languages=['fr', 'de']) %}
|
||||
{% set langs = enabled_languages[:2] if enabled_languages else ['fr', 'de'] %}
|
||||
{% set current = current_language if current_language in langs else langs[0] %}
|
||||
{# Uses languageSelector() function per LANG-002 architecture rule #}
|
||||
<div
|
||||
x-data="languageSelector('{{ current }}', {{ langs | tojson | safe }})"
|
||||
class="inline-flex items-center gap-1 p-1 bg-gray-100 dark:bg-gray-700 rounded-lg"
|
||||
>
|
||||
<template x-for="lang in languages" :key="lang">
|
||||
<button
|
||||
@click="setLanguage(lang)"
|
||||
type="button"
|
||||
class="p-1.5 rounded transition-all"
|
||||
:class="currentLang === lang
|
||||
? 'bg-white dark:bg-gray-600 shadow-sm'
|
||||
: 'hover:bg-gray-200 dark:hover:bg-gray-600'"
|
||||
:title="lang.toUpperCase()"
|
||||
>
|
||||
<span class="fi" :class="'fi-' + languageFlags[lang]"></span>
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
|
||||
{#
|
||||
Language Settings Form
|
||||
======================
|
||||
A form for vendor/admin settings page to configure language preferences.
|
||||
|
||||
Parameters:
|
||||
- current_settings: Dict with current vendor language settings
|
||||
- form_id: Form ID for submission
|
||||
#}
|
||||
{% macro language_settings_form(current_settings=none, form_id='language-settings-form') %}
|
||||
{% set settings = current_settings or {} %}
|
||||
{# Native language names per LANG-005 #}
|
||||
{% set all_languages = [
|
||||
{'code': 'en', 'name': 'English'},
|
||||
{'code': 'fr', 'name': 'Français'},
|
||||
{'code': 'de', 'name': 'Deutsch'},
|
||||
{'code': 'lb', 'name': 'Lëtzebuergesch'}
|
||||
] %}
|
||||
<div
|
||||
x-data="{
|
||||
defaultLanguage: '{{ settings.get('default_language', 'fr') }}',
|
||||
dashboardLanguage: '{{ settings.get('dashboard_language', 'fr') }}',
|
||||
storefrontLanguage: '{{ settings.get('storefront_language', 'fr') }}',
|
||||
storefrontLanguages: {{ settings.get('storefront_languages', ['fr', 'de', 'en']) | tojson }},
|
||||
allLanguages: {{ all_languages | tojson }},
|
||||
toggleStorefrontLanguage(code) {
|
||||
const index = this.storefrontLanguages.indexOf(code);
|
||||
if (index > -1) {
|
||||
// Don't allow removing if it's the only one or if it's the default
|
||||
if (this.storefrontLanguages.length > 1 && code !== this.storefrontLanguage) {
|
||||
this.storefrontLanguages.splice(index, 1);
|
||||
}
|
||||
} else {
|
||||
this.storefrontLanguages.push(code);
|
||||
}
|
||||
},
|
||||
isStorefrontLanguageEnabled(code) {
|
||||
return this.storefrontLanguages.includes(code);
|
||||
}
|
||||
}"
|
||||
class="space-y-6"
|
||||
>
|
||||
{# Default Content Language #}
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Default Content Language
|
||||
</label>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400 mb-2">
|
||||
Language used as fallback when content is not available in the requested language.
|
||||
</p>
|
||||
<select
|
||||
x-model="defaultLanguage"
|
||||
name="default_language"
|
||||
class="w-full px-4 py-2 text-sm bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"
|
||||
>
|
||||
<template x-for="lang in allLanguages" :key="lang.code">
|
||||
<option :value="lang.code" x-text="lang.name" :selected="lang.code === defaultLanguage"></option>
|
||||
</template>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{# Dashboard Language #}
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Dashboard Language
|
||||
</label>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400 mb-2">
|
||||
Default language for your vendor dashboard (team members can override in their profile).
|
||||
</p>
|
||||
<select
|
||||
x-model="dashboardLanguage"
|
||||
name="dashboard_language"
|
||||
class="w-full px-4 py-2 text-sm bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"
|
||||
>
|
||||
<template x-for="lang in allLanguages" :key="lang.code">
|
||||
<option :value="lang.code" x-text="lang.name" :selected="lang.code === dashboardLanguage"></option>
|
||||
</template>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{# Storefront Default Language #}
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Storefront Default Language
|
||||
</label>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400 mb-2">
|
||||
Default language shown to customers when they first visit your store.
|
||||
</p>
|
||||
<select
|
||||
x-model="storefrontLanguage"
|
||||
name="storefront_language"
|
||||
class="w-full px-4 py-2 text-sm bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"
|
||||
>
|
||||
<template x-for="lang in allLanguages.filter(l => storefrontLanguages.includes(l.code))" :key="lang.code">
|
||||
<option :value="lang.code" x-text="lang.name" :selected="lang.code === storefrontLanguage"></option>
|
||||
</template>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{# Enabled Storefront Languages #}
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Enabled Storefront Languages
|
||||
</label>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400 mb-2">
|
||||
Languages available to customers in the language selector.
|
||||
</p>
|
||||
<div class="space-y-2">
|
||||
<template x-for="lang in allLanguages" :key="lang.code">
|
||||
<label class="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700">
|
||||
<input
|
||||
type="checkbox"
|
||||
:value="lang.code"
|
||||
:checked="isStorefrontLanguageEnabled(lang.code)"
|
||||
@change="toggleStorefrontLanguage(lang.code)"
|
||||
:disabled="lang.code === storefrontLanguage"
|
||||
class="w-4 h-4 text-purple-600 border-gray-300 rounded focus:ring-purple-500 disabled:opacity-50"
|
||||
>
|
||||
<span class="fi" :class="'fi-' + (lang.code === 'en' ? 'gb' : lang.code === 'lb' ? 'lu' : lang.code)"></span>
|
||||
<span class="text-sm font-medium text-gray-700 dark:text-gray-300" x-text="lang.name"></span>
|
||||
<span x-show="lang.code === storefrontLanguage" class="text-xs text-purple-600 dark:text-purple-400">(default)</span>
|
||||
</label>
|
||||
</template>
|
||||
</div>
|
||||
<input type="hidden" name="storefront_languages" :value="JSON.stringify(storefrontLanguages)">
|
||||
</div>
|
||||
</div>
|
||||
{% endmacro %}
|
||||
Reference in New Issue
Block a user