{# 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 #} {% block extra_head %}{% endblock %} {# Header - Theme-aware #}
{# Store Logo #}
{% if theme.branding.logo %} {# Show light logo in light mode, dark logo in dark mode #} {{ store.name }} {% if theme.branding.logo_dark %} {{ store.name }} {% endif %} {% else %} {{ store.name }} {% endif %}
{# Navigation #} {# Right side actions #}
{# Search #} {# Cart #} {# 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 #}
{# 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. Alpine.js with CDN fallback (deferred - loads last) #} {# 8. Page-specific JavaScript #} {% block extra_scripts %}{% endblock %} {# Toast notification container #}