refactor: rename shop to storefront for consistency
Rename all "shop" directories and references to "storefront" to match the API and route naming convention already in use. Renamed directories: - app/templates/shop/ → app/templates/storefront/ - static/shop/ → static/storefront/ - app/templates/shared/macros/shop/ → .../macros/storefront/ - docs/frontend/shop/ → docs/frontend/storefront/ Renamed files: - shop.css → storefront.css - shop-layout.js → storefront-layout.js Updated references in: - app/routes/storefront_pages.py (21 template references) - app/modules/cms/routes/pages/vendor.py - app/templates/storefront/base.html (static paths) - All storefront templates (extends/includes) - docs/architecture/frontend-structure.md This aligns the template/static naming with: - Route file: storefront_pages.py - API directory: app/api/v1/storefront/ - Module routes: */routes/api/storefront.py - URL paths: /storefront/* Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
22
app/templates/storefront/errors/400.html
Normal file
22
app/templates/storefront/errors/400.html
Normal file
@@ -0,0 +1,22 @@
|
||||
{# app/templates/storefront/errors/400.html #}
|
||||
{# 400 Bad Request error page #}
|
||||
{% extends "storefront/errors/base.html" %}
|
||||
|
||||
{% block icon %}❌{% endblock %}
|
||||
|
||||
{% block title %}400 - Invalid Request{% endblock %}
|
||||
|
||||
{% block action_buttons %}
|
||||
<a href="javascript:history.back()"
|
||||
class="inline-flex items-center px-8 py-4 rounded-xl font-semibold text-white bg-theme-primary hover:opacity-90 hover:-translate-y-0.5 transition-all shadow-lg">
|
||||
Go Back
|
||||
</a>
|
||||
<a href="{{ base_url }}shop/"
|
||||
class="inline-flex items-center px-8 py-4 rounded-xl font-semibold text-theme-primary border-2 border-theme-primary hover:bg-theme-primary hover:text-white hover:-translate-y-0.5 transition-all">
|
||||
Go to Home
|
||||
</a>
|
||||
{% endblock %}
|
||||
|
||||
{% block support_link %}
|
||||
Need help? <a href="{{ base_url }}shop/contact" class="text-theme-primary font-semibold hover:underline">Contact us</a>
|
||||
{% endblock %}
|
||||
22
app/templates/storefront/errors/401.html
Normal file
22
app/templates/storefront/errors/401.html
Normal file
@@ -0,0 +1,22 @@
|
||||
{# app/templates/storefront/errors/401.html #}
|
||||
{# 401 Unauthorized error page - prompts login #}
|
||||
{% extends "storefront/errors/base.html" %}
|
||||
|
||||
{% block icon %}🔐{% endblock %}
|
||||
|
||||
{% block title %}401 - Authentication Required{% endblock %}
|
||||
|
||||
{% block action_buttons %}
|
||||
<a href="{{ base_url }}shop/account/login"
|
||||
class="inline-flex items-center px-8 py-4 rounded-xl font-semibold text-white bg-theme-primary hover:opacity-90 hover:-translate-y-0.5 transition-all shadow-lg">
|
||||
Log In
|
||||
</a>
|
||||
<a href="{{ base_url }}shop/account/register"
|
||||
class="inline-flex items-center px-8 py-4 rounded-xl font-semibold text-theme-primary border-2 border-theme-primary hover:bg-theme-primary hover:text-white hover:-translate-y-0.5 transition-all">
|
||||
Create Account
|
||||
</a>
|
||||
{% endblock %}
|
||||
|
||||
{% block support_link %}
|
||||
Don't have an account? <a href="{{ base_url }}shop/account/register" class="text-theme-primary font-semibold hover:underline">Sign up now</a>
|
||||
{% endblock %}
|
||||
22
app/templates/storefront/errors/403.html
Normal file
22
app/templates/storefront/errors/403.html
Normal file
@@ -0,0 +1,22 @@
|
||||
{# app/templates/storefront/errors/403.html #}
|
||||
{# 403 Forbidden error page - access restricted #}
|
||||
{% extends "storefront/errors/base.html" %}
|
||||
|
||||
{% block icon %}🔒{% endblock %}
|
||||
|
||||
{% block title %}403 - Access Restricted{% endblock %}
|
||||
|
||||
{% block action_buttons %}
|
||||
<a href="{{ base_url }}shop/account/login"
|
||||
class="inline-flex items-center px-8 py-4 rounded-xl font-semibold text-white bg-theme-primary hover:opacity-90 hover:-translate-y-0.5 transition-all shadow-lg">
|
||||
Log In
|
||||
</a>
|
||||
<a href="{{ base_url }}shop/"
|
||||
class="inline-flex items-center px-8 py-4 rounded-xl font-semibold text-theme-primary border-2 border-theme-primary hover:bg-theme-primary hover:text-white hover:-translate-y-0.5 transition-all">
|
||||
Go to Home
|
||||
</a>
|
||||
{% endblock %}
|
||||
|
||||
{% block support_link %}
|
||||
Need help accessing your account? <a href="{{ base_url }}shop/contact" class="text-theme-primary font-semibold hover:underline">Contact support</a>
|
||||
{% endblock %}
|
||||
22
app/templates/storefront/errors/404.html
Normal file
22
app/templates/storefront/errors/404.html
Normal file
@@ -0,0 +1,22 @@
|
||||
{# app/templates/storefront/errors/404.html #}
|
||||
{# 404 Not Found error page - uses base template with custom icon and message #}
|
||||
{% extends "storefront/errors/base.html" %}
|
||||
|
||||
{% block icon %}🔍{% endblock %}
|
||||
|
||||
{% block title %}404 - Page Not Found{% endblock %}
|
||||
|
||||
{% block action_buttons %}
|
||||
<a href="{{ base_url }}shop/"
|
||||
class="inline-flex items-center px-8 py-4 rounded-xl font-semibold text-white bg-theme-primary hover:opacity-90 hover:-translate-y-0.5 transition-all shadow-lg">
|
||||
Continue Shopping
|
||||
</a>
|
||||
<a href="{{ base_url }}shop/products"
|
||||
class="inline-flex items-center px-8 py-4 rounded-xl font-semibold text-theme-primary border-2 border-theme-primary hover:bg-theme-primary hover:text-white hover:-translate-y-0.5 transition-all">
|
||||
View All Products
|
||||
</a>
|
||||
{% endblock %}
|
||||
|
||||
{% block support_link %}
|
||||
Can't find what you're looking for? <a href="{{ base_url }}shop/contact" class="text-theme-primary font-semibold hover:underline">Contact us</a> and we'll help you find it.
|
||||
{% endblock %}
|
||||
35
app/templates/storefront/errors/422.html
Normal file
35
app/templates/storefront/errors/422.html
Normal file
@@ -0,0 +1,35 @@
|
||||
{# app/templates/storefront/errors/422.html #}
|
||||
{# 422 Unprocessable Entity error page - validation errors #}
|
||||
{% extends "storefront/errors/base.html" %}
|
||||
|
||||
{% block icon %}📝{% endblock %}
|
||||
|
||||
{% block title %}422 - Invalid Information{% endblock %}
|
||||
|
||||
{% block extra_content %}
|
||||
{% if details and details.validation_errors %}
|
||||
<div class="my-8 mx-auto max-w-md text-left bg-red-50 p-6 rounded-xl border-l-4 border-theme-primary">
|
||||
<h3 class="text-gray-700 text-sm mb-3 font-semibold">Please correct:</h3>
|
||||
<ul class="list-none p-0 m-0">
|
||||
{% for error in details.validation_errors %}
|
||||
<li class="mb-2 text-red-800 text-sm">• {{ error.msg }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{% block action_buttons %}
|
||||
<a href="javascript:history.back()"
|
||||
class="inline-flex items-center px-8 py-4 rounded-xl font-semibold text-white bg-theme-primary hover:opacity-90 hover:-translate-y-0.5 transition-all shadow-lg">
|
||||
Go Back and Fix
|
||||
</a>
|
||||
<a href="{{ base_url }}shop/"
|
||||
class="inline-flex items-center px-8 py-4 rounded-xl font-semibold text-theme-primary border-2 border-theme-primary hover:bg-theme-primary hover:text-white hover:-translate-y-0.5 transition-all">
|
||||
Go to Home
|
||||
</a>
|
||||
{% endblock %}
|
||||
|
||||
{% block support_link %}
|
||||
Having trouble? <a href="{{ base_url }}shop/contact" class="text-theme-primary font-semibold hover:underline">We're here to help</a>
|
||||
{% endblock %}
|
||||
32
app/templates/storefront/errors/429.html
Normal file
32
app/templates/storefront/errors/429.html
Normal file
@@ -0,0 +1,32 @@
|
||||
{# app/templates/storefront/errors/429.html #}
|
||||
{# 429 Too Many Requests error page - rate limiting #}
|
||||
{% extends "storefront/errors/base.html" %}
|
||||
|
||||
{% block icon %}⏱️{% endblock %}
|
||||
|
||||
{% block title %}429 - Please Slow Down{% endblock %}
|
||||
|
||||
{% block extra_content %}
|
||||
{% if details and details.retry_after %}
|
||||
<div class="my-6 p-4 bg-amber-50 rounded-xl">
|
||||
<p class="text-amber-800 font-semibold">
|
||||
Please wait {{ details.retry_after }} seconds
|
||||
</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{% block action_buttons %}
|
||||
<a href="javascript:location.reload()"
|
||||
class="inline-flex items-center px-8 py-4 rounded-xl font-semibold text-white bg-theme-primary hover:opacity-90 hover:-translate-y-0.5 transition-all shadow-lg">
|
||||
Try Again
|
||||
</a>
|
||||
<a href="{{ base_url }}shop/"
|
||||
class="inline-flex items-center px-8 py-4 rounded-xl font-semibold text-theme-primary border-2 border-theme-primary hover:bg-theme-primary hover:text-white hover:-translate-y-0.5 transition-all">
|
||||
Go to Home
|
||||
</a>
|
||||
{% endblock %}
|
||||
|
||||
{% block support_link %}
|
||||
Questions? <a href="{{ base_url }}shop/contact" class="text-theme-primary font-semibold hover:underline">Contact us</a>
|
||||
{% endblock %}
|
||||
22
app/templates/storefront/errors/500.html
Normal file
22
app/templates/storefront/errors/500.html
Normal file
@@ -0,0 +1,22 @@
|
||||
{# app/templates/storefront/errors/500.html #}
|
||||
{# 500 Internal Server Error page #}
|
||||
{% extends "storefront/errors/base.html" %}
|
||||
|
||||
{% block icon %}😔{% endblock %}
|
||||
|
||||
{% block title %}500 - Something Went Wrong{% endblock %}
|
||||
|
||||
{% block action_buttons %}
|
||||
<a href="{{ base_url }}shop/"
|
||||
class="inline-flex items-center px-8 py-4 rounded-xl font-semibold text-white bg-theme-primary hover:opacity-90 hover:-translate-y-0.5 transition-all shadow-lg">
|
||||
Go to Home
|
||||
</a>
|
||||
<a href="javascript:location.reload()"
|
||||
class="inline-flex items-center px-8 py-4 rounded-xl font-semibold text-theme-primary border-2 border-theme-primary hover:bg-theme-primary hover:text-white hover:-translate-y-0.5 transition-all">
|
||||
Try Again
|
||||
</a>
|
||||
{% endblock %}
|
||||
|
||||
{% block support_link %}
|
||||
Issue persisting? <a href="{{ base_url }}shop/contact" class="text-theme-primary font-semibold hover:underline">Let us know</a> and we'll help you out.
|
||||
{% endblock %}
|
||||
22
app/templates/storefront/errors/502.html
Normal file
22
app/templates/storefront/errors/502.html
Normal file
@@ -0,0 +1,22 @@
|
||||
{# app/templates/storefront/errors/502.html #}
|
||||
{# 502 Bad Gateway error page - upstream service unavailable #}
|
||||
{% extends "storefront/errors/base.html" %}
|
||||
|
||||
{% block icon %}🔧{% endblock %}
|
||||
|
||||
{% block title %}502 - Service Temporarily Unavailable{% endblock %}
|
||||
|
||||
{% block action_buttons %}
|
||||
<a href="javascript:location.reload()"
|
||||
class="inline-flex items-center px-8 py-4 rounded-xl font-semibold text-white bg-theme-primary hover:opacity-90 hover:-translate-y-0.5 transition-all shadow-lg">
|
||||
Try Again
|
||||
</a>
|
||||
<a href="{{ base_url }}shop/"
|
||||
class="inline-flex items-center px-8 py-4 rounded-xl font-semibold text-theme-primary border-2 border-theme-primary hover:bg-theme-primary hover:text-white hover:-translate-y-0.5 transition-all">
|
||||
Go to Home
|
||||
</a>
|
||||
{% endblock %}
|
||||
|
||||
{% block support_link %}
|
||||
If this continues, <a href="{{ base_url }}shop/contact" class="text-theme-primary font-semibold hover:underline">let us know</a>
|
||||
{% endblock %}
|
||||
108
app/templates/storefront/errors/base.html
Normal file
108
app/templates/storefront/errors/base.html
Normal file
@@ -0,0 +1,108 @@
|
||||
{# app/templates/storefront/errors/base.html #}
|
||||
{# Error page base template using Tailwind CSS with vendor theme support #}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="h-full">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{% block title %}{{ status_code }} - {{ status_name }}{% endblock %}{% if vendor %} | {{ vendor.name }}{% endif %}</title>
|
||||
|
||||
{# Tailwind CSS #}
|
||||
<link rel="stylesheet" href="{{ url_for('static', path='shop/css/tailwind.output.css') }}">
|
||||
|
||||
{# Vendor theme colors via CSS variables #}
|
||||
<style>
|
||||
:root {
|
||||
--color-primary: {{ theme.colors.primary if theme and theme.colors else '#6366f1' }};
|
||||
--color-secondary: {{ theme.colors.secondary if theme and theme.colors else '#8b5cf6' }};
|
||||
--color-accent: {{ theme.colors.accent if theme and theme.colors else '#ec4899' }};
|
||||
}
|
||||
|
||||
.bg-gradient-theme {
|
||||
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
|
||||
}
|
||||
|
||||
.text-theme-primary {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.bg-theme-primary {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.border-theme-primary {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.hover\:bg-theme-primary:hover {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
|
||||
{% block extra_styles %}{% endblock %}
|
||||
</style>
|
||||
|
||||
{% if theme and theme.custom_css %}
|
||||
<style>{{ theme.custom_css | safe }}{# sanitized: admin-controlled #}</style>
|
||||
{% endif %}
|
||||
</head>
|
||||
<body class="h-full bg-gradient-theme flex items-center justify-center p-8">
|
||||
<div class="bg-white rounded-3xl shadow-2xl max-w-xl w-full p-12 text-center">
|
||||
{# Vendor Logo #}
|
||||
{% if vendor and theme and theme.branding and theme.branding.logo %}
|
||||
<img src="{{ theme.branding.logo }}"
|
||||
alt="{{ vendor.name }}"
|
||||
class="max-w-[150px] max-h-[60px] mx-auto mb-8 object-contain">
|
||||
{% endif %}
|
||||
|
||||
{% block content %}
|
||||
{# Error Icon #}
|
||||
<div class="text-7xl mb-4">{% block icon %}⚠️{% endblock %}</div>
|
||||
|
||||
{# Status Code #}
|
||||
<div class="text-8xl font-bold text-theme-primary leading-none mb-2">
|
||||
{{ status_code }}
|
||||
</div>
|
||||
|
||||
{# Status Name #}
|
||||
<h1 class="text-3xl font-semibold text-gray-900 mb-4">
|
||||
{{ status_name }}
|
||||
</h1>
|
||||
|
||||
{# Error Message #}
|
||||
<p class="text-lg text-gray-500 mb-10 leading-relaxed">
|
||||
{{ message }}
|
||||
</p>
|
||||
|
||||
{# Action Buttons #}
|
||||
<div class="flex gap-4 justify-center flex-wrap mt-8">
|
||||
{% block action_buttons %}
|
||||
<a href="{{ base_url }}shop/"
|
||||
class="inline-flex items-center px-8 py-4 rounded-xl font-semibold text-white bg-theme-primary hover:opacity-90 hover:-translate-y-0.5 transition-all shadow-lg">
|
||||
Continue Shopping
|
||||
</a>
|
||||
<a href="{{ base_url }}shop/contact"
|
||||
class="inline-flex items-center px-8 py-4 rounded-xl font-semibold text-theme-primary border-2 border-theme-primary hover:bg-theme-primary hover:text-white hover:-translate-y-0.5 transition-all">
|
||||
Contact Us
|
||||
</a>
|
||||
{% endblock %}
|
||||
</div>
|
||||
|
||||
{% block extra_content %}{% endblock %}
|
||||
|
||||
{# Support Link #}
|
||||
<div class="mt-10 pt-8 border-t border-gray-200 text-sm text-gray-500">
|
||||
{% block support_link %}
|
||||
Need help? <a href="{{ base_url }}shop/contact" class="text-theme-primary font-semibold hover:underline">Contact our support team</a>
|
||||
{% endblock %}
|
||||
</div>
|
||||
|
||||
{# Vendor Info #}
|
||||
{% if vendor %}
|
||||
<div class="mt-8 text-sm text-gray-400">
|
||||
{{ vendor.name }}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
22
app/templates/storefront/errors/generic.html
Normal file
22
app/templates/storefront/errors/generic.html
Normal file
@@ -0,0 +1,22 @@
|
||||
{# app/templates/storefront/errors/generic.html #}
|
||||
{# Generic error page - fallback for any error code #}
|
||||
{% extends "storefront/errors/base.html" %}
|
||||
|
||||
{% block icon %}⚠️{% endblock %}
|
||||
|
||||
{% block title %}{{ status_code }} - {{ status_name }}{% endblock %}
|
||||
|
||||
{% block action_buttons %}
|
||||
<a href="{{ base_url }}shop/"
|
||||
class="inline-flex items-center px-8 py-4 rounded-xl font-semibold text-white bg-theme-primary hover:opacity-90 hover:-translate-y-0.5 transition-all shadow-lg">
|
||||
Continue Shopping
|
||||
</a>
|
||||
<a href="javascript:history.back()"
|
||||
class="inline-flex items-center px-8 py-4 rounded-xl font-semibold text-theme-primary border-2 border-theme-primary hover:bg-theme-primary hover:text-white hover:-translate-y-0.5 transition-all">
|
||||
Go Back
|
||||
</a>
|
||||
{% endblock %}
|
||||
|
||||
{% block support_link %}
|
||||
Need assistance? <a href="{{ base_url }}shop/contact" class="text-theme-primary font-semibold hover:underline">Contact us</a>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user