{% block title %}{{ store.name }}{% endblock %} {% if store.tagline %}

{# app/templates/storefront/base.html #} {# Base template for store shop frontend with theme support #} {# Dynamic title with store branding #} {% block title %}{{ store.name }}{% endblock %} {% if store.tagline %} - {{ store.tagline }}{% endif %} {# SEO Meta Tags #} {# Favicon - store-specific or default #} {% if theme.branding.favicon %} {% else %} {% endif %} {# CRITICAL: Inject theme CSS variables #} {# Tailwind CSS v4 (built locally via standalone CLI) #} {# Flag Icons for Language Selector with local fallback #} {# Base Shop Styles #} {# Dev debug toolbar (dev only — auto-hides in production, must load early for interceptors) #} {% block extra_head %}{% endblock %} {# Header - Theme-aware #}

{# Store Logo #}

{% if theme.branding.logo %} {# Show light logo in light mode, dark logo in dark mode #}

{% if theme.branding.logo_dark %}

{% endif %} {% else %} {{ store.name }} {% endif %}

{# Navigation — Home is always shown, module items are dynamic #}

Home {% for item in storefront_nav.get('nav', []) %} {{ _(item.label_key) }} {% endfor %} {# CMS pages (About, Contact) are already dynamic via header_pages #} {% for page in header_pages|default([]) %} {{ page.title }} {% endfor %}

{# Right side actions #}

{% if 'catalog' in enabled_modules|default([]) %} {# Search #} {% endif %} {% if 'cart' in enabled_modules|default([]) %} {# Cart #} {% endif %} {# Theme toggle #} {# Language Selector #} {% set enabled_langs = store.storefront_languages if store and store.storefront_languages else ['fr', 'de', 'en'] %} {% if enabled_langs|length > 1 %}

{% endif %} {# Account #} {# Mobile menu toggle #}

{# Mobile menu panel #}

{# Main Content Area #}

{% block content %} {# Page-specific content goes here #} {% endblock %}

{# Footer with store info and social links #} {# JavaScript Loading Order (CRITICAL - must be in this order) #} {# 1. Log Configuration (must load first) #} {# 2. Global Shop Configuration (resolved via PlatformSettingsService) #} {# 3. Icon System #} {# 4. Base Shop Layout (Alpine.js component - must load before Alpine) #} {# 5. Utilities #} {# 5b. i18n Support #} {# 6. API Client #} {# 7. Page-specific JavaScript (MUST load before Alpine.js) #} {% block extra_scripts %}{% endblock %} {# 8. LAST: Alpine.js (must be last defer script — auto-initializes on load) #} {# Toast notification container #}