feat(storefront): translatable Store description + nav home key + dynamic html lang

Three small storefront i18n improvements found during the FR
pre-launch walkthrough on FASHIONHUB:

- Store description (e.g. "Trendy clothing and accessories") was a
  single English string rendering in the footer regardless of locale.
  Added a description_translations JSON column on Store with the same
  shape used elsewhere (CMS, Platform, Subscription), exposed via
  get_translated_description(lang), and updated the footer + meta tag
  to use it. Seeded FR/DE/LB/EN for FASHIONHUB and FASHIONOUTLET so
  Fashion Group renders correctly out of the box. Other stores still
  show the single description field as fallback.

- "Home" was a hardcoded English literal in both desktop and mobile
  nav, even though the FR translation already existed at nav.home in
  static/locales/fr.json. Now uses _('nav.home').

- <html lang="en"> was hardcoded, which made <input type="date"> show
  in mm/dd/yyyy on the FR storefront. Now driven by current_language
  so the browser's locale-aware date picker matches the page locale.

Migration tenancy_005 adds the description_translations column;
nullable, no backfill needed.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-05-16 19:46:17 +02:00
parent caf1361291
commit 06a44e55e7
4 changed files with 64 additions and 5 deletions

View File

@@ -1,7 +1,7 @@
{# app/templates/storefront/base.html #}
{# Base template for store shop frontend with theme support #}
<!DOCTYPE html>
<html lang="en" x-data="{% block alpine_data %}storefrontLayoutData(){% endblock %}" x-bind:class="{ 'dark': dark }">
<html lang="{{ current_language|default('en') }}" x-data="{% block alpine_data %}storefrontLayoutData(){% endblock %}" x-bind:class="{ 'dark': dark }">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -13,7 +13,7 @@
</title>
{# SEO Meta Tags #}
<meta name="description" content="{% block meta_description %}{{ store.description or 'Shop at ' + store.name }}{% endblock %}">
<meta name="description" content="{% block meta_description %}{{ store.get_translated_description(current_language) or 'Shop at ' + store.name }}{% endblock %}">
{# Favicon - store-specific or default #}
{% if theme.branding.favicon %}
@@ -89,7 +89,7 @@
{# Navigation — Home is always shown, module items are dynamic #}
<nav class="hidden md:flex space-x-8">
<a href="{{ base_url }}" class="text-gray-700 dark:text-gray-300 hover:text-primary">
Home
{{ _('nav.home') }}
</a>
{% for item in storefront_nav.get('nav', []) %}
<a href="{{ base_url }}{{ item.route }}" class="text-gray-700 dark:text-gray-300 hover:text-primary">
@@ -244,7 +244,7 @@
<nav class="max-w-7xl mx-auto px-4 py-4 space-y-1">
<a href="{{ base_url }}" @click="closeMobileMenu()"
class="block px-3 py-2 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 font-medium">
Home
{{ _('nav.home') }}
</a>
{% for item in storefront_nav.get('nav', []) %}
<a href="{{ base_url }}{{ item.route }}" @click="closeMobileMenu()"
@@ -279,7 +279,7 @@
{{ store.name }}
</h3>
<p class="text-gray-600 dark:text-gray-400 mb-4">
{{ store.description }}
{{ store.get_translated_description(current_language) }}
</p>
{# Social Links from theme #}