Samir Boulahtit
fef0418d27
Implement dynamic CMS content rendering in shop frontend:
Route Handler (shop_pages.py):
- Add generic /{slug} route for all CMS pages
- Load content from database with vendor override fallback
- Update get_shop_context() to load footer/header navigation
- Pass db session to all route handlers for navigation loading
- Return 404 if page not found
Template (content-page.html):
- Generic template for rendering CMS content
- Display page title, content, and metadata
- Show vendor override badge when applicable
- Support for HTML and Markdown content formats
- SEO meta tags from database
Footer Navigation (base.html):
- Dynamic footer links loaded from database
- Automatic two-column layout based on page count
- Fallback to static links if no CMS pages configured
- Filter pages by show_in_footer flag
This completes the CMS frontend integration, enabling:
- /about, /contact, /faq, etc. to load from database
- Vendors inherit platform defaults automatically
- Vendor-specific overrides take priority
- Dynamic footer navigation from CMS
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
80 lines
2.6 KiB
HTML
80 lines
2.6 KiB
HTML
{# app/templates/shop/content-page.html #}
|
|
{# Generic CMS content page template #}
|
|
{% extends "shop/base.html" %}
|
|
|
|
{# Dynamic title from CMS #}
|
|
{% block title %}{{ page.title }}{% endblock %}
|
|
|
|
{# SEO from CMS #}
|
|
{% block meta_description %}{{ page.meta_description or page.title }}{% endblock %}
|
|
{% block meta_keywords %}{{ page.meta_keywords or vendor.name }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
|
|
{# Breadcrumbs #}
|
|
<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>
|
|
</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 }}
|
|
</h1>
|
|
|
|
{# Optional: Show vendor override badge for debugging #}
|
|
{% if page.vendor_id %}
|
|
<div class="text-sm text-gray-500 dark:text-gray-400 mb-4">
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
|
|
Custom {{ vendor.name }} version
|
|
</span>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{# Published date (optional) #}
|
|
{% if page.published_at %}
|
|
<div class="text-sm text-gray-500 dark:text-gray-400">
|
|
Published {{ page.published_at.strftime('%B %d, %Y') }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{# Content #}
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-8">
|
|
<div class="prose prose-lg dark:prose-invert max-w-none">
|
|
{% if page.content_format == 'markdown' %}
|
|
{# Markdown content - future enhancement: render with markdown library #}
|
|
<div class="markdown-content">
|
|
{{ page.content | safe }}
|
|
</div>
|
|
{% else %}
|
|
{# HTML content (default) #}
|
|
{{ page.content | safe }}
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
{# Last updated timestamp #}
|
|
{% if page.updated_at %}
|
|
<div class="mt-8 text-center text-sm text-gray-500 dark:text-gray-400">
|
|
Last updated: {{ page.updated_at.strftime('%B %d, %Y') }}
|
|
</div>
|
|
{% endif %}
|
|
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_scripts %}
|
|
<script>
|
|
// Future enhancement: Add any CMS-specific JavaScript here
|
|
// For example:
|
|
// - Table of contents generation
|
|
// - Anchor link handling
|
|
// - Image lightbox
|
|
// - Copy code blocks
|
|
</script>
|
|
{% endblock %}
|