feat: integrate CMS into shop frontend
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>
This commit is contained in:
79
app/templates/shop/content-page.html
Normal file
79
app/templates/shop/content-page.html
Normal file
@@ -0,0 +1,79 @@
|
||||
{# 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 %}
|
||||
Reference in New Issue
Block a user