feat(storefront): homepage, module gating, widget protocol, i18n fixes

Storefront homepage & module gating: - CMS owns storefront GET / (slug="home" with 3-tier resolution) - Catalog loses GET / (keeps /products only) - Store root redirect (GET / → /store/dashboard or /store/login) - Route gating: non-core modules return 404 when disabled for platform - Seed store default homepages per platform Widget protocol for customer dashboard: - StorefrontDashboardCard contract in widgets.py - Widget aggregator get_storefront_dashboard_cards() - Orders and Loyalty module widget providers - Dashboard template renders contributed cards (no module names) Landing template module-agnostic: - CTAs driven by storefront_nav (not hardcoded module names) - Header actions check nav item IDs (not enabled_modules) - Remove hardcoded "Add Product" sidebar button - Remove all enabled_modules checks from storefront templates i18n fixes: - Title placeholder resolution ({{store_name}}) for store default pages - Storefront nav label_keys prefixed with module code - Add storefront.account.* keys to 6 modules (en/fr/de/lb) - Header/footer CMS pages use get_translated_title(current_language) - Footer labels use i18n keys instead of hardcoded English Icon cleanup: - Standardize on map-pin (remove location-marker alias) - Replace all location-marker references across templates and docs Docs: - Storefront builder vision proposal (6 phases) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-13 22:53:17 +02:00
parent dd9dc04328
commit adc36246b8
58 changed files with 4691 additions and 3806 deletions
--- a/app/modules/cms/locales/de.json
+++ b/app/modules/cms/locales/de.json
@@ -388,5 +388,15 @@
    },
    "confirmations": {
        "delete_file": "Sind Sie sicher, dass Sie diese Datei löschen möchten? Dies kann nicht rückgängig gemacht werden."
+    },
+    "storefront": {
+        "my_account": "Mein Konto",
+        "learn_more": "Mehr erfahren",
+        "explore": "Entdecken",
+        "quick_links": "Schnellzugriff",
+        "information": "Informationen",
+        "about": "Über uns",
+        "contact": "Kontakt",
+        "faq": "FAQ"
    }
 }
--- a/app/modules/cms/locales/en.json
+++ b/app/modules/cms/locales/en.json
@@ -388,5 +388,15 @@
        "content_pages": "Content Pages",
        "store_themes": "Store Themes",
        "media_library": "Media Library"
+    },
+    "storefront": {
+        "my_account": "My Account",
+        "learn_more": "Learn More",
+        "explore": "Explore",
+        "quick_links": "Quick Links",
+        "information": "Information",
+        "about": "About Us",
+        "contact": "Contact",
+        "faq": "FAQ"
    }
 }
--- a/app/modules/cms/locales/fr.json
+++ b/app/modules/cms/locales/fr.json
@@ -388,5 +388,15 @@
    },
    "confirmations": {
        "delete_file": "Êtes-vous sûr de vouloir supprimer ce fichier ? Cette action est irréversible."
+    },
+    "storefront": {
+        "my_account": "Mon Compte",
+        "learn_more": "En savoir plus",
+        "explore": "Découvrir",
+        "quick_links": "Liens rapides",
+        "information": "Informations",
+        "about": "À propos",
+        "contact": "Contact",
+        "faq": "FAQ"
    }
 }
--- a/app/modules/cms/locales/lb.json
+++ b/app/modules/cms/locales/lb.json
@@ -388,5 +388,15 @@
    },
    "confirmations": {
        "delete_file": "Sidd Dir sécher datt Dir dëse Fichier läsche wëllt? Dat kann net réckgängeg gemaach ginn."
+    },
+    "storefront": {
+        "my_account": "Mäi Kont",
+        "learn_more": "Méi gewuer ginn",
+        "explore": "Entdecken",
+        "quick_links": "Schnellzougrëff",
+        "information": "Informatiounen",
+        "about": "Iwwer eis",
+        "contact": "Kontakt",
+        "faq": "FAQ"
    }
 }
--- a/app/modules/cms/routes/pages/storefront.py
+++ b/app/modules/cms/routes/pages/storefront.py
@@ -28,6 +28,71 @@ ROUTE_CONFIG = {
 }


+# ============================================================================
+# STOREFRONT HOMEPAGE
+# ============================================================================
+
+
+@router.get("/", response_class=HTMLResponse, include_in_schema=False)
+async def storefront_homepage(
+    request: Request,
+    db: Session = Depends(get_db),
+):
+    """
+    Storefront homepage handler.
+
+    Looks for a CMS page with slug="home" (store override → store default),
+    and renders the appropriate landing template. Falls back to the default
+    landing template when no CMS homepage exists.
+    """
+    store = getattr(request.state, "store", None)
+    platform = getattr(request.state, "platform", None)
+    store_id = store.id if store else None
+    if not platform:
+        raise HTTPException(status_code=400, detail="Platform context required")
+
+    # Try to load a homepage from CMS (store override → store default)
+    page = content_page_service.get_page_for_store(
+        db,
+        platform_id=platform.id,
+        slug="home",
+        store_id=store_id,
+        include_unpublished=False,
+    )
+
+    # Resolve placeholders for store default pages (title + content)
+    page_content = None
+    page_title = None
+    if page:
+        page_content = page.content
+        page_title = page.title
+        if page.is_store_default and store:
+            page_content = content_page_service.resolve_placeholders(
+                page.content, store
+            )
+            page_title = content_page_service.resolve_placeholders(
+                page.title, store
+            )
+
+    context = get_storefront_context(request, db=db, page=page)
+    if page_content:
+        context["page_content"] = page_content
+    if page_title:
+        context["page_title"] = page_title
+
+    # Select template based on page.template field (or default)
+    template_map = {
+        "full": "cms/storefront/landing-full.html",
+        "modern": "cms/storefront/landing-modern.html",
+        "minimal": "cms/storefront/landing-minimal.html",
+    }
+    template_name = "cms/storefront/landing-default.html"
+    if page and page.template:
+        template_name = template_map.get(page.template, template_name)
+
+    return templates.TemplateResponse(template_name, context)
+
+
 # ============================================================================
 # DYNAMIC CONTENT PAGES (CMS)
 # ============================================================================
@@ -103,10 +168,13 @@ async def generic_content_page(

    # Resolve placeholders in store default pages ({{store_name}}, etc.)
    page_content = page.content
+    page_title = page.title
    if page.is_store_default and store:
        page_content = content_page_service.resolve_placeholders(page.content, store)
+        page_title = content_page_service.resolve_placeholders(page.title, store)

    context = get_storefront_context(request, db=db, page=page)
+    context["page_title"] = page_title
    context["page_content"] = page_content

    # Select template based on page.template field
--- a/app/modules/cms/templates/cms/storefront/content-page.html
+++ b/app/modules/cms/templates/cms/storefront/content-page.html
@@ -3,7 +3,7 @@
 {% extends "storefront/base.html" %}

 {# Dynamic title from CMS #}
-{% block title %}{{ page.title }}{% endblock %}
+{% block title %}{{ page_title or page.title }}{% endblock %}

 {# SEO from CMS #}
 {% block meta_description %}{{ page.meta_description or page.title }}{% endblock %}
@@ -16,13 +16,13 @@
    <div class="breadcrumb mb-6">
        <a href="{{ base_url }}" class="hover:text-primary">Home</a>
        <span>/</span>
-        <span class="text-gray-900 dark:text-gray-200 font-medium">{{ page.title }}</span>
+        <span class="text-gray-900 dark:text-gray-200 font-medium">{{ page_title or page.title }}</span>
    </div>

    {# Page Header #}
    <div class="mb-8">
        <h1 class="text-3xl md:text-4xl font-bold text-gray-800 dark:text-gray-200 mb-4">
-            {{ page.title }}
+            {{ page_title or page.title }}
        </h1>

        {# Optional: Show store override badge for debugging #}
--- a/app/modules/cms/templates/cms/storefront/landing-default.html
+++ b/app/modules/cms/templates/cms/storefront/landing-default.html
@@ -1,10 +1,9 @@
-{# app/templates/store/landing-default.html #}
-{# standalone #}
+{# app/modules/cms/templates/cms/storefront/landing-default.html #}
 {# Default/Minimal Landing Page Template #}
 {% extends "storefront/base.html" %}

 {% block title %}{{ store.name }}{% endblock %}
-{% block meta_description %}{{ page.meta_description or store.description or store.name }}{% endblock %}
+{% block meta_description %}{{ page.meta_description or store.description or store.name if page else store.description or store.name }}{% endblock %}

 {% block content %}
 <div class="min-h-screen">
@@ -24,7 +23,7 @@

                {# Title #}
                <h1 class="text-4xl md:text-6xl font-bold text-gray-900 dark:text-white mb-6">
-                    {{ page.title or store.name }}
+                    {{ page_title or store.name }}
                </h1>

                {# Tagline #}
@@ -34,18 +33,31 @@
                </p>
                {% endif %}

-                {# CTA Button #}
+                {# CTA Buttons — driven by storefront_nav (module-agnostic) #}
+                {% set nav_items = storefront_nav.get('nav', []) %}
                <div class="flex flex-col sm:flex-row gap-4 justify-center">
-                    <a href="{{ base_url }}"
+                    {% if nav_items %}
+                    {# Primary CTA: first nav item from enabled modules #}
+                    <a href="{{ base_url }}{{ nav_items[0].route }}"
                       class="inline-flex items-center justify-center px-8 py-4 text-lg font-semibold rounded-lg text-white bg-primary hover:bg-primary-dark transition-colors shadow-lg hover:shadow-xl"
                       style="background-color: var(--color-primary)">
-                        Browse Our Shop
+                        {{ _(nav_items[0].label_key) }}
                        <span class="w-5 h-5 ml-2" x-html="$icon('arrow-right', 'w-5 h-5')"></span>
                    </a>
-                    {% if page.content %}
+                    {% else %}
+                    {# Fallback: account link when no module nav items #}
+                    <a href="{{ base_url }}account/login"
+                       class="inline-flex items-center justify-center px-8 py-4 text-lg font-semibold rounded-lg text-white bg-primary hover:bg-primary-dark transition-colors shadow-lg hover:shadow-xl"
+                       style="background-color: var(--color-primary)">
+                        {{ _('cms.storefront.my_account') }}
+                        <span class="w-5 h-5 ml-2" x-html="$icon('arrow-right', 'w-5 h-5')"></span>
+                    </a>
+                    {% endif %}
+
+                    {% if page and page.content %}
                    <a href="#about"
                       class="inline-flex items-center justify-center px-8 py-4 text-lg font-semibold rounded-lg text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors border-2 border-gray-200 dark:border-gray-600">
-                        Learn More
+                        {{ _('cms.storefront.learn_more') }}
                    </a>
                    {% endif %}
                </div>
@@ -54,73 +66,65 @@
    </section>

    {# Content Section (if provided) #}
-    {% if page.content %}
+    {% if page_content %}
    <section id="about" class="py-16 bg-white dark:bg-gray-900">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="prose prose-lg dark:prose-invert max-w-none">
-                {{ page.content | safe }}{# sanitized: CMS content #}
+                {{ page_content | safe }}{# sanitized: CMS content #}
            </div>
        </div>
    </section>
    {% endif %}

-    {# Quick Links Section #}
+    {# Quick Links Section — driven by nav items and CMS pages #}
+    {% set account_items = storefront_nav.get('account', []) %}
+    {% set all_links = nav_items + account_items %}
+    {% if all_links or header_pages %}
    <section class="py-16 bg-gray-50 dark:bg-gray-800">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <h2 class="text-3xl font-bold text-center text-gray-900 dark:text-white mb-12">
-                Explore
+                {{ _('cms.storefront.explore') }}
            </h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-                <a href="{{ base_url }}products"
+                {# Module nav items (products, loyalty, etc.) #}
+                {% for item in all_links[:3] %}
+                <a href="{{ base_url }}{{ item.route }}"
                   class="block p-8 bg-white dark:bg-gray-900 rounded-lg shadow-md hover:shadow-xl transition-shadow text-center group">
-                    <div class="text-4xl mb-4">🛍️</div>
+                    <div class="mb-4">
+                        <span class="h-10 w-10 text-primary mx-auto" style="color: var(--color-primary)"
+                              x-html="$icon('{{ item.icon }}', 'h-10 w-10 mx-auto')"></span>
+                    </div>
                    <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2 group-hover:text-primary">
-                        Shop Products
+                        {{ _(item.label_key) }}
                    </h3>
-                    <p class="text-gray-600 dark:text-gray-400">
-                        Browse our complete catalog
-                    </p>
                </a>
+                {% endfor %}

-                {% if header_pages %}
-                    {% for page in header_pages[:2] %}
+                {# Fill remaining slots with CMS header pages #}
+                {% set remaining = 3 - all_links[:3]|length %}
+                {% if remaining > 0 and header_pages %}
+                    {% for page in header_pages[:remaining] %}
                    <a href="{{ base_url }}{{ page.slug }}"
                       class="block p-8 bg-white dark:bg-gray-900 rounded-lg shadow-md hover:shadow-xl transition-shadow text-center group">
-                        <div class="text-4xl mb-4">📄</div>
+                        <div class="mb-4">
+                            <span class="h-10 w-10 text-primary mx-auto" style="color: var(--color-primary)"
+                                  x-html="$icon('document-text', 'h-10 w-10 mx-auto')"></span>
+                        </div>
                        <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2 group-hover:text-primary">
                            {{ page.title }}
                        </h3>
+                        {% if page.meta_description %}
                        <p class="text-gray-600 dark:text-gray-400">
-                            {{ page.meta_description or 'Learn more' }}
+                            {{ page.meta_description }}
                        </p>
+                        {% endif %}
                    </a>
                    {% endfor %}
-                {% else %}
-                    <a href="{{ base_url }}about"
-                       class="block p-8 bg-white dark:bg-gray-900 rounded-lg shadow-md hover:shadow-xl transition-shadow text-center group">
-                        <div class="text-4xl mb-4">ℹ️</div>
-                        <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2 group-hover:text-primary">
-                            About Us
-                        </h3>
-                        <p class="text-gray-600 dark:text-gray-400">
-                            Learn about our story
-                        </p>
-                    </a>
-
-                    <a href="{{ base_url }}contact"
-                       class="block p-8 bg-white dark:bg-gray-900 rounded-lg shadow-md hover:shadow-xl transition-shadow text-center group">
-                        <div class="text-4xl mb-4">📧</div>
-                        <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2 group-hover:text-primary">
-                            Contact
-                        </h3>
-                        <p class="text-gray-600 dark:text-gray-400">
-                            Get in touch with us
-                        </p>
-                    </a>
                {% endif %}
            </div>
        </div>
    </section>
+    {% endif %}

 </div>
 {% endblock %}