{# app/templates/shop/base.html #} {# Base template for vendor shop frontend with theme support #} {# Dynamic title with vendor branding #} {% block title %}{{ vendor.name }}{% endblock %} {% if vendor.tagline %} - {{ vendor.tagline }}{% endif %} {# SEO Meta Tags #} {# Favicon - vendor-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 #} {# Base Shop Styles #} {% block extra_head %}{% endblock %} {# Header - Theme-aware #}
{# Vendor Logo #}
{% if theme.branding.logo %} {# Show light logo in light mode, dark logo in dark mode #} {{ vendor.name }} {% if theme.branding.logo_dark %} {{ vendor.name }} {% endif %} {% else %} {{ vendor.name }} {% endif %}
{# Navigation #} {# Right side actions #}
{# Search #} {# Cart #} {# Theme toggle #} {# Language Selector #} {% set enabled_langs = vendor.storefront_languages if vendor and vendor.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 vendor info and social links #} {# JavaScript Loading Order (CRITICAL - must be in this order) #} {# 1. Log Configuration (must load first) #} {# 2. Icon System #} {# 3. Base Shop Layout (Alpine.js component - must load before Alpine) #} {# 4. Utilities #} {# 5. API Client #} {# 6. Alpine.js with CDN fallback (deferred - loads last) #} {# 7. Page-specific JavaScript #} {% block extra_scripts %}{% endblock %} {# Toast notification container #}