sboulahtit/orion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adding jinja shop templates

Browse Source
This commit is contained in:
Samir Boulahtit
2025-10-26 19:59:27 +01:00
parent 49890d4cbe
commit d79817f069
11 changed files with 2375 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
app/templates/shop/account/addresses.html Normal file
View File

@@ -0,0 +1,11 @@
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Address management</title>
</head>
<body>
<-- Address management -->
</body>
</html>

249
app/templates/shop/account/login.html Normal file
View File

@@ -0,0 +1,249 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login - {{ vendor.name }}</title>
<link rel="stylesheet" href="/static/css/shared/base.css">
<link rel="stylesheet" href="/static/css/shared/auth.css">
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body class="auth-page">
<div class="login-container"
x-data="customerLogin()"
x-init="checkRegistrationSuccess()"
data-vendor-id="{{ vendor.id }}"
data-vendor-name="{{ vendor.name }}"
>
<!-- Header -->
<div class="login-header">
{% if vendor.logo_url %}
<img src="{{ vendor.logo_url }}" alt="{{ vendor.name }}" class="auth-logo">
{% else %}
<div class="auth-logo">🛒</div>
{% endif %}
<h1>Welcome Back</h1>
<p>Sign in to {{ vendor.name }}</p>
</div>
<!-- Alert Box -->
<div x-show="alert.show"
x-transition
:class="'alert alert-' + alert.type"
x-text="alert.message"
></div>
<!-- Login Form -->
<form @submit.prevent="handleLogin">
<!-- Email -->
<div class="form-group">
<label for="email">Email Address</label>
<input
type="email"
id="email"
x-model="credentials.email"
required
placeholder="your@email.com"
:class="{ 'error': errors.email }"
@input="clearAllErrors()"
>
<div x-show="errors.email"
x-text="errors.email"
class="error-message show"
></div>
</div>
<!-- Password -->
<div class="form-group">
<label for="password">Password</label>
<div class="password-group">
<input
:type="showPassword ? 'text' : 'password'"
id="password"
x-model="credentials.password"
required
placeholder="Enter your password"
:class="{ 'error': errors.password }"
@input="clearAllErrors()"
>
<button
type="button"
class="password-toggle"
@click="showPassword = !showPassword"
>
<span x-text="showPassword ? '👁️' : '👁️‍🗨️'"></span>
</button>
</div>
<div x-show="errors.password"
x-text="errors.password"
class="error-message show"
></div>
</div>
<!-- Remember Me & Forgot Password -->
<div class="form-options">
<div class="remember-me">
<input
type="checkbox"
id="rememberMe"
x-model="rememberMe"
>
<label for="rememberMe">Remember me</label>
</div>
<a href="/shop/account/forgot-password" class="forgot-password">
Forgot password?
</a>
</div>
<!-- Submit Button -->
<button
type="submit"
class="btn-login"
:disabled="loading"
>
<span x-show="loading" class="loading-spinner"></span>
<span x-text="loading ? 'Signing in...' : 'Sign In'"></span>
</button>
</form>
<!-- Register Link -->
<div class="login-footer">
<div class="auth-footer-text">Don't have an account?</div>
<a href="/shop/account/register">Create an account</a>
</div>
<!-- Back to Shop -->
<div class="login-footer" style="border-top: none; padding-top: 0;">
<a href="/shop">← Continue shopping</a>
</div>
</div>
<script>
function customerLogin() {
return {
// Data
credentials: {
email: '',
password: ''
},
rememberMe: false,
showPassword: false,
loading: false,
errors: {},
alert: {
show: false,
type: 'error',
message: ''
},
// Get vendor data
get vendorId() {
return this.$el.dataset.vendorId;
},
get vendorName() {
return this.$el.dataset.vendorName;
},
// Check if redirected after registration
checkRegistrationSuccess() {
const urlParams = new URLSearchParams(window.location.search);
if (urlParams.get('registered') === 'true') {
this.showAlert(
'Account created successfully! Please sign in.',
'success'
);
}
},
// Clear errors
clearAllErrors() {
this.errors = {};
this.alert.show = false;
},
// Show alert
showAlert(message, type = 'error') {
this.alert = {
show: true,
type: type,
message: message
};
window.scrollTo({ top: 0, behavior: 'smooth' });
},
// Handle login
async handleLogin() {
this.clearAllErrors();
// Basic validation
if (!this.credentials.email) {
this.errors.email = 'Email is required';
return;
}
if (!this.credentials.password) {
this.errors.password = 'Password is required';
return;
}
this.loading = true;
try {
const response = await fetch(
`/api/v1/public/vendors/${this.vendorId}/customers/login`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
username: this.credentials.email, // API expects username
password: this.credentials.password
})
}
);
const data = await response.json();
if (!response.ok) {
throw new Error(data.detail || 'Login failed');
}
// Store token and user data
localStorage.setItem('customer_token', data.access_token);
localStorage.setItem('customer_user', JSON.stringify(data.user));
// Store vendor context
localStorage.setItem('customer_vendor_id', this.vendorId);
this.showAlert('Login successful! Redirecting...', 'success');
// Redirect to account page or cart
setTimeout(() => {
const returnUrl = new URLSearchParams(window.location.search).get('return') || '/shop/account';
window.location.href = returnUrl;
}, 1000);
} catch (error) {
console.error('Login error:', error);
this.showAlert(error.message || 'Invalid email or password');
} finally {
this.loading = false;
}
}
}
}
</script>
</body>
</html></title>
</head>
<body>
</body>
</html>

11
app/templates/shop/account/orders.html Normal file
View File

@@ -0,0 +1,11 @@
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Order history</title>
</head>
<body>
<-- Order history -->
</body>
</html>

11
app/templates/shop/account/profile.html Normal file
View File

@@ -0,0 +1,11 @@
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Customer profile</title>
</head>
<body>
<-- Customer profile -->
</body>
</html>

341
app/templates/shop/account/register.html Normal file
View File

@@ -0,0 +1,341 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create Account - {{ vendor.name }}</title>
<link rel="stylesheet" href="/static/css/shared/base.css">
<link rel="stylesheet" href="/static/css/shared/auth.css">
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body class="auth-page">
<div class="login-container"
x-data="customerRegistration()"
data-vendor-id="{{ vendor.id }}"
data-vendor-name="{{ vendor.name }}"
>
<!-- Header -->
<div class="login-header">
{% if vendor.logo_url %}
<img src="{{ vendor.logo_url }}" alt="{{ vendor.name }}" class="auth-logo">
{% else %}
<div class="auth-logo">🛒</div>
{% endif %}
<h1>Create Account</h1>
<p>Join {{ vendor.name }}</p>
</div>
<!-- Alert Box -->
<div x-show="alert.show"
x-transition
:class="'alert alert-' + alert.type"
x-text="alert.message"
></div>
<!-- Registration Form -->
<form @submit.prevent="handleRegister">
<!-- First Name -->
<div class="form-group">
<label for="firstName">First Name <span class="required">*</span></label>
<input
type="text"
id="firstName"
x-model="formData.first_name"
required
placeholder="Enter your first name"
:class="{ 'error': errors.first_name }"
@input="clearError('first_name')"
>
<div x-show="errors.first_name"
x-text="errors.first_name"
class="error-message show"
></div>
</div>
<!-- Last Name -->
<div class="form-group">
<label for="lastName">Last Name <span class="required">*</span></label>
<input
type="text"
id="lastName"
x-model="formData.last_name"
required
placeholder="Enter your last name"
:class="{ 'error': errors.last_name }"
@input="clearError('last_name')"
>
<div x-show="errors.last_name"
x-text="errors.last_name"
class="error-message show"
></div>
</div>
<!-- Email -->
<div class="form-group">
<label for="email">Email Address <span class="required">*</span></label>
<input
type="email"
id="email"
x-model="formData.email"
required
placeholder="your@email.com"
:class="{ 'error': errors.email }"
@input="clearError('email')"
>
<div x-show="errors.email"
x-text="errors.email"
class="error-message show"
></div>
</div>
<!-- Phone (Optional) -->
<div class="form-group">
<label for="phone">Phone Number</label>
<input
type="tel"
id="phone"
x-model="formData.phone"
placeholder="+352 123 456 789"
>
</div>
<!-- Password -->
<div class="form-group">
<label for="password">Password <span class="required">*</span></label>
<div class="password-group">
<input
:type="showPassword ? 'text' : 'password'"
id="password"
x-model="formData.password"
required
placeholder="At least 8 characters"
:class="{ 'error': errors.password }"
@input="clearError('password')"
>
<button
type="button"
class="password-toggle"
@click="showPassword = !showPassword"
>
<span x-text="showPassword ? '👁️' : '👁️‍🗨️'"></span>
</button>
</div>
<div class="form-help">
Must contain at least 8 characters, one letter, and one number
</div>
<div x-show="errors.password"
x-text="errors.password"
class="error-message show"
></div>
</div>
<!-- Confirm Password -->
<div class="form-group">
<label for="confirmPassword">Confirm Password <span class="required">*</span></label>
<input
:type="showPassword ? 'text' : 'password'"
id="confirmPassword"
x-model="confirmPassword"
required
placeholder="Re-enter your password"
:class="{ 'error': errors.confirmPassword }"
@input="clearError('confirmPassword')"
>
<div x-show="errors.confirmPassword"
x-text="errors.confirmPassword"
class="error-message show"
></div>
</div>
<!-- Marketing Consent -->
<div class="form-group">
<div class="remember-me">
<input
type="checkbox"
id="marketingConsent"
x-model="formData.marketing_consent"
>
<label for="marketingConsent" style="font-weight: normal;">
I'd like to receive news and special offers
</label>
</div>
</div>
<!-- Submit Button -->
<button
type="submit"
class="btn-login"
:disabled="loading"
>
<span x-show="loading" class="loading-spinner"></span>
<span x-text="loading ? 'Creating Account...' : 'Create Account'"></span>
</button>
</form>
<!-- Login Link -->
<div class="login-footer">
<div class="auth-footer-text">Already have an account?</div>
<a href="/shop/account/login">Sign in instead</a>
</div>
</div>
<script>
function customerRegistration() {
return {
// Data
formData: {
first_name: '',
last_name: '',
email: '',
phone: '',
password: '',
marketing_consent: false
},
confirmPassword: '',
showPassword: false,
loading: false,
errors: {},
alert: {
show: false,
type: 'error',
message: ''
},
// Get vendor data from element
get vendorId() {
return this.$el.dataset.vendorId;
},
get vendorName() {
return this.$el.dataset.vendorName;
},
// Clear specific error
clearError(field) {
delete this.errors[field];
},
// Clear all errors
clearAllErrors() {
this.errors = {};
this.alert.show = false;
},
// Show alert
showAlert(message, type = 'error') {
this.alert = {
show: true,
type: type,
message: message
};
// Auto-hide success messages
if (type === 'success') {
setTimeout(() => {
this.alert.show = false;
}, 3000);
}
// Scroll to top
window.scrollTo({ top: 0, behavior: 'smooth' });
},
// Validate form
validateForm() {
this.clearAllErrors();
let isValid = true;
// First name
if (!this.formData.first_name.trim()) {
this.errors.first_name = 'First name is required';
isValid = false;
}
// Last name
if (!this.formData.last_name.trim()) {
this.errors.last_name = 'Last name is required';
isValid = false;
}
// Email
if (!this.formData.email.trim()) {
this.errors.email = 'Email is required';
isValid = false;
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.formData.email)) {
this.errors.email = 'Please enter a valid email address';
isValid = false;
}
// Password
if (!this.formData.password) {
this.errors.password = 'Password is required';
isValid = false;
} else if (this.formData.password.length < 8) {
this.errors.password = 'Password must be at least 8 characters';
isValid = false;
} else if (!/[a-zA-Z]/.test(this.formData.password)) {
this.errors.password = 'Password must contain at least one letter';
isValid = false;
} else if (!/[0-9]/.test(this.formData.password)) {
this.errors.password = 'Password must contain at least one number';
isValid = false;
}
// Confirm password
if (this.formData.password !== this.confirmPassword) {
this.errors.confirmPassword = 'Passwords do not match';
isValid = false;
}
return isValid;
},
// Handle registration
async handleRegister() {
if (!this.validateForm()) {
return;
}
this.loading = true;
try {
const response = await fetch(
`/api/v1/public/vendors/${this.vendorId}/customers/register`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(this.formData)
}
);
const data = await response.json();
if (!response.ok) {
throw new Error(data.detail || 'Registration failed');
}
// Success!
this.showAlert(
'Account created successfully! Redirecting to login...',
'success'
);
// Redirect to login after 2 seconds
setTimeout(() => {
window.location.href = '/shop/account/login?registered=true';
}, 2000);
} catch (error) {
console.error('Registration error:', error);
this.showAlert(error.message || 'Registration failed. Please try again.');
} finally {
this.loading = false;
}
}
}
}
</script>
</body>
</html>

489
app/templates/shop/cart.html Normal file
View File

@@ -0,0 +1,489 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shopping Cart - {{ vendor.name }}</title>
<link rel="stylesheet" href="/static/css/shared/base.css">
<link rel="stylesheet" href="/static/css/vendor/vendor.css">
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body>
<div x-data="shoppingCart()"
x-init="loadCart()"
data-vendor-id="{{ vendor.id }}"
>
<!-- Header -->
<header class="header">
<div class="header-left">
<h1>🛒 Shopping Cart</h1>
</div>
<div class="header-right">
<a href="/shop" class="btn-secondary">← Continue Shopping</a>
</div>
</header>
<div class="container">
<!-- Loading State -->
<div x-show="loading && items.length === 0" class="loading">
<div class="loading-spinner-lg"></div>
<p>Loading your cart...</p>
</div>
<!-- Empty Cart -->
<div x-show="!loading && items.length === 0" class="empty-state">
<div class="empty-state-icon">🛒</div>
<h3>Your cart is empty</h3>
<p>Add some products to get started!</p>
<a href="/shop/products" class="btn-primary">Browse Products</a>
</div>
<!-- Cart Items -->
<div x-show="items.length > 0" class="cart-content">
<!-- Cart Items List -->
<div class="cart-items">
<template x-for="item in items" :key="item.product_id">
<div class="cart-item-card">
<div class="item-image">
<img :src="item.image_url || '/static/images/placeholder.png'"
:alt="item.name">
</div>
<div class="item-details">
<h3 class="item-name" x-text="item.name"></h3>
<p class="item-sku" x-text="'SKU: ' + item.sku"></p>
<p class="item-price">
€<span x-text="parseFloat(item.price).toFixed(2)"></span>
</p>
</div>
<div class="item-quantity">
<label>Quantity:</label>
<div class="quantity-controls">
<button
@click="updateQuantity(item.product_id, item.quantity - 1)"
:disabled="item.quantity <= 1 || updating"
class="btn-quantity"
>
−
</button>
<input
type="number"
:value="item.quantity"
@change="updateQuantity(item.product_id, $event.target.value)"
min="1"
max="99"
:disabled="updating"
class="quantity-input"
>
<button
@click="updateQuantity(item.product_id, item.quantity + 1)"
:disabled="updating"
class="btn-quantity"
>
+
</button>
</div>
</div>
<div class="item-total">
<label>Subtotal:</label>
<p class="item-total-price">
€<span x-text="(parseFloat(item.price) * item.quantity).toFixed(2)"></span>
</p>
</div>
<div class="item-actions">
<button
@click="removeItem(item.product_id)"
:disabled="updating"
class="btn-remove"
title="Remove from cart"
>
🗑️
</button>
</div>
</div>
</template>
</div>
<!-- Cart Summary -->
<div class="cart-summary">
<div class="summary-card">
<h3>Order Summary</h3>
<div class="summary-row">
<span>Subtotal (<span x-text="totalItems"></span> items):</span>
<span>€<span x-text="subtotal.toFixed(2)"></span></span>
</div>
<div class="summary-row">
<span>Shipping:</span>
<span x-text="shipping > 0 ? '€' + shipping.toFixed(2) : 'FREE'"></span>
</div>
<div class="summary-row summary-total">
<span>Total:</span>
<span class="total-amount">€<span x-text="total.toFixed(2)"></span></span>
</div>
<button
@click="proceedToCheckout()"
:disabled="updating || items.length === 0"
class="btn-primary btn-checkout"
>
Proceed to Checkout
</button>
<a href="/shop/products" class="btn-outline">
Continue Shopping
</a>
</div>
</div>
</div>
</div>
</div>
<script>
function shoppingCart() {
return {
items: [],
loading: false,
updating: false,
vendorId: null,
sessionId: null,
// Computed properties
get totalItems() {
return this.items.reduce((sum, item) => sum + item.quantity, 0);
},
get subtotal() {
return this.items.reduce((sum, item) =>
sum + (parseFloat(item.price) * item.quantity), 0
);
},
get shipping() {
// Free shipping over €50
return this.subtotal >= 50 ? 0 : 5.99;
},
get total() {
return this.subtotal + this.shipping;
},
// Initialize
init() {
this.vendorId = this.$el.dataset.vendorId;
this.sessionId = this.getOrCreateSessionId();
},
// Get or create session ID
getOrCreateSessionId() {
let sessionId = localStorage.getItem('cart_session_id');
if (!sessionId) {
sessionId = 'session_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
localStorage.setItem('cart_session_id', sessionId);
}
return sessionId;
},
// Load cart from API
async loadCart() {
this.loading = true;
try {
const response = await fetch(
`/api/v1/public/vendors/${this.vendorId}/cart/${this.sessionId}`
);
if (response.ok) {
const data = await response.json();
this.items = data.items || [];
}
} catch (error) {
console.error('Failed to load cart:', error);
} finally {
this.loading = false;
}
},
// Update item quantity
async updateQuantity(productId, newQuantity) {
newQuantity = parseInt(newQuantity);
if (newQuantity < 1 || newQuantity > 99) return;
this.updating = true;
try {
const response = await fetch(
`/api/v1/public/vendors/${this.vendorId}/cart/${this.sessionId}/items/${productId}`,
{
method: 'PUT',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ quantity: newQuantity })
}
);
if (response.ok) {
await this.loadCart();
} else {
throw new Error('Failed to update quantity');
}
} catch (error) {
console.error('Update quantity error:', error);
alert('Failed to update quantity. Please try again.');
} finally {
this.updating = false;
}
},
// Remove item from cart
async removeItem(productId) {
if (!confirm('Remove this item from your cart?')) {
return;
}
this.updating = true;
try {
const response = await fetch(
`/api/v1/public/vendors/${this.vendorId}/cart/${this.sessionId}/items/${productId}`,
{
method: 'DELETE'
}
);
if (response.ok) {
await this.loadCart();
} else {
throw new Error('Failed to remove item');
}
} catch (error) {
console.error('Remove item error:', error);
alert('Failed to remove item. Please try again.');
} finally {
this.updating = false;
}
},
// Proceed to checkout
proceedToCheckout() {
// Check if customer is logged in
const token = localStorage.getItem('customer_token');
if (!token) {
// Redirect to login with return URL
window.location.href = '/shop/account/login?return=/shop/checkout';
} else {
window.location.href = '/shop/checkout';
}
}
}
}
</script>
<style>
/* Cart-specific styles */
.cart-content {
display: grid;
grid-template-columns: 1fr 350px;
gap: var(--spacing-lg);
margin-top: var(--spacing-lg);
}
.cart-items {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
}
.cart-item-card {
background: white;
border-radius: var(--radius-lg);
padding: var(--spacing-lg);
display: grid;
grid-template-columns: 100px 1fr auto auto auto;
gap: var(--spacing-lg);
align-items: center;
box-shadow: var(--shadow-md);
}
.item-image img {
width: 100px;
height: 100px;
object-fit: cover;
border-radius: var(--radius-md);
}
.item-name {
font-size: var(--font-lg);
font-weight: 600;
margin-bottom: var(--spacing-xs);
}
.item-sku {
font-size: var(--font-sm);
color: var(--text-muted);
margin-bottom: var(--spacing-xs);
}
.item-price {
font-size: var(--font-lg);
font-weight: 600;
color: var(--primary-color);
}
.quantity-controls {
display: flex;
gap: var(--spacing-sm);
align-items: center;
}
.btn-quantity {
width: 32px;
height: 32px;
border: 1px solid var(--border-color);
background: white;
border-radius: var(--radius-sm);
cursor: pointer;
font-size: var(--font-lg);
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
}
.btn-quantity:hover:not(:disabled) {
background: var(--gray-50);
border-color: var(--primary-color);
}
.btn-quantity:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.quantity-input {
width: 60px;
text-align: center;
padding: 8px;
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
}
.item-total-price {
font-size: var(--font-xl);
font-weight: 700;
color: var(--text-primary);
}
.btn-remove {
width: 40px;
height: 40px;
border: 1px solid var(--border-color);
background: white;
border-radius: var(--radius-sm);
cursor: pointer;
font-size: var(--font-lg);
transition: all var(--transition-base);
}
.btn-remove:hover:not(:disabled) {
background: var(--danger-color);
border-color: var(--danger-color);
color: white;
}
.cart-summary {
position: sticky;
top: var(--spacing-lg);
height: fit-content;
}
.summary-card {
background: white;
border-radius: var(--radius-lg);
padding: var(--spacing-lg);
box-shadow: var(--shadow-md);
}
.summary-card h3 {
font-size: var(--font-xl);
margin-bottom: var(--spacing-lg);
padding-bottom: var(--spacing-md);
border-bottom: 2px solid var(--border-color);
}
.summary-row {
display: flex;
justify-content: space-between;
margin-bottom: var(--spacing-md);
font-size: var(--font-base);
}
.summary-total {
font-size: var(--font-lg);
font-weight: 700;
padding-top: var(--spacing-md);
border-top: 2px solid var(--border-color);
margin-top: var(--spacing-md);
}
.total-amount {
color: var(--primary-color);
font-size: var(--font-2xl);
}
.btn-checkout {
width: 100%;
margin-top: var(--spacing-lg);
margin-bottom: var(--spacing-md);
}
.btn-outline {
width: 100%;
display: block;
text-align: center;
padding: 10px 20px;
}
/* Responsive */
@media (max-width: 1024px) {
.cart-content {
grid-template-columns: 1fr;
}
.cart-summary {
position: static;
}
}
@media (max-width: 768px) {
.cart-item-card {
grid-template-columns: 80px 1fr;
gap: var(--spacing-md);
}
.item-image img {
width: 80px;
height: 80px;
}
.item-quantity,
.item-total {
grid-column: 2;
}
.item-actions {
grid-column: 2;
justify-self: end;
}
}
</style>
</body>
</html>

11
app/templates/shop/checkout.html Normal file
View File

@@ -0,0 +1,11 @@
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Checkout process</title>
</head>
<body>
<-- Checkout process -->
</body>
</html>

11
app/templates/shop/home.html Normal file
View File

@@ -0,0 +1,11 @@
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shop homepage</title>
</head>
<body>
<-- Shop homepage -->
</body>
</html>

771
app/templates/shop/product.html Normal file
View File

@@ -0,0 +1,771 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ product.name if product else 'Product' }} - {{ vendor.name }}</title>
<link rel="stylesheet" href="/static/css/shared/base.css">
<link rel="stylesheet" href="/static/css/vendor/vendor.css">
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body>
<div x-data="productDetail()"
x-init="loadProduct()"
data-vendor-id="{{ vendor.id }}"
data-product-id="{{ product_id }}"
>
<!-- Header -->
<header class="header">
<div class="header-left">
<a href="/shop/products" class="btn-back">← Back to Products</a>
<h1>{{ vendor.name }}</h1>
</div>
<div class="header-right">
<a href="/shop/cart" class="btn-primary">
🛒 Cart (<span x-text="cartCount"></span>)
</a>
</div>
</header>
<!-- Loading State -->
<div x-show="loading" class="container">
<div class="loading">
<div class="loading-spinner-lg"></div>
<p>Loading product...</p>
</div>
</div>
<!-- Product Detail -->
<div x-show="!loading && product" class="container">
<div class="product-detail-container">
<!-- Product Images -->
<div class="product-images">
<div class="main-image">
<img
:src="selectedImage || '/static/images/placeholder.png'"
:alt="product?.marketplace_product?.title"
class="product-main-image"
>
</div>
<!-- Thumbnail Gallery -->
<div class="image-gallery" x-show="product?.marketplace_product?.images?.length > 1">
<template x-for="(image, index) in product?.marketplace_product?.images" :key="index">
<img
:src="image"
:alt="`Product image ${index + 1}`"
class="thumbnail"
:class="{ 'active': selectedImage === image }"
@click="selectedImage = image"
>
</template>
</div>
</div>
<!-- Product Info -->
<div class="product-info-detail">
<h1 x-text="product?.marketplace_product?.title" class="product-title-detail"></h1>
<!-- Brand & Category -->
<div class="product-meta">
<span x-show="product?.marketplace_product?.brand" class="meta-item">
<strong>Brand:</strong> <span x-text="product?.marketplace_product?.brand"></span>
</span>
<span x-show="product?.marketplace_product?.google_product_category" class="meta-item">
<strong>Category:</strong> <span x-text="product?.marketplace_product?.google_product_category"></span>
</span>
<span class="meta-item">
<strong>SKU:</strong> <span x-text="product?.product_id || product?.marketplace_product?.mpn"></span>
</span>
</div>
<!-- Price -->
<div class="product-pricing">
<div x-show="product?.sale_price && product?.sale_price < product?.price">
<span class="price-original">€<span x-text="parseFloat(product?.price).toFixed(2)"></span></span>
<span class="price-sale">€<span x-text="parseFloat(product?.sale_price).toFixed(2)"></span></span>
<span class="price-badge">SALE</span>
</div>
<div x-show="!product?.sale_price || product?.sale_price >= product?.price">
<span class="price-current">€<span x-text="parseFloat(product?.price || 0).toFixed(2)"></span></span>
</div>
</div>
<!-- Availability -->
<div class="product-availability">
<span
x-show="product?.available_inventory > 0"
class="availability-badge in-stock"
>
✓ In Stock (<span x-text="product?.available_inventory"></span> available)
</span>
<span
x-show="!product?.available_inventory || product?.available_inventory <= 0"
class="availability-badge out-of-stock"
>
✗ Out of Stock
</span>
</div>
<!-- Description -->
<div class="product-description">
<h3>Description</h3>
<p x-text="product?.marketplace_product?.description || 'No description available'"></p>
</div>
<!-- Additional Details -->
<div class="product-details" x-show="hasAdditionalDetails">
<h3>Product Details</h3>
<ul>
<li x-show="product?.marketplace_product?.gtin">
<strong>GTIN:</strong> <span x-text="product?.marketplace_product?.gtin"></span>
</li>
<li x-show="product?.condition">
<strong>Condition:</strong> <span x-text="product?.condition"></span>
</li>
<li x-show="product?.marketplace_product?.color">
<strong>Color:</strong> <span x-text="product?.marketplace_product?.color"></span>
</li>
<li x-show="product?.marketplace_product?.size">
<strong>Size:</strong> <span x-text="product?.marketplace_product?.size"></span>
</li>
<li x-show="product?.marketplace_product?.material">
<strong>Material:</strong> <span x-text="product?.marketplace_product?.material"></span>
</li>
</ul>
</div>
<!-- Add to Cart Section -->
<div class="add-to-cart-section">
<!-- Quantity Selector -->
<div class="quantity-selector">
<label>Quantity:</label>
<div class="quantity-controls">
<button
@click="decreaseQuantity()"
:disabled="quantity <= (product?.min_quantity || 1)"
class="btn-quantity"
>
−
</button>
<input
type="number"
x-model.number="quantity"
:min="product?.min_quantity || 1"
:max="product?.max_quantity || product?.available_inventory"
class="quantity-input"
@change="validateQuantity()"
>
<button
@click="increaseQuantity()"
:disabled="quantity >= (product?.max_quantity || product?.available_inventory)"
class="btn-quantity"
>
+
</button>
</div>
</div>
<!-- Add to Cart Button -->
<button
@click="addToCart()"
:disabled="!canAddToCart || addingToCart"
class="btn-add-to-cart"
>
<span x-show="!addingToCart">
🛒 Add to Cart
</span>
<span x-show="addingToCart">
<span class="loading-spinner"></span> Adding...
</span>
</button>
<!-- Total Price -->
<div class="total-price">
<strong>Total:</strong> €<span x-text="totalPrice.toFixed(2)"></span>
</div>
</div>
</div>
</div>
<!-- Related Products / You May Also Like -->
<div class="related-products" x-show="relatedProducts.length > 0">
<h2>You May Also Like</h2>
<div class="product-grid">
<template x-for="related in relatedProducts" :key="related.id">
<div class="product-card">
<img
:src="related.image_url || '/static/images/placeholder.png'"
:alt="related.name"
class="product-image"
@click="viewProduct(related.id)"
>
<div class="product-info">
<h3
class="product-title"
@click="viewProduct(related.id)"
x-text="related.name"
></h3>
<p class="product-price">
€<span x-text="parseFloat(related.price).toFixed(2)"></span>
</p>
</div>
</div>
</template>
</div>
</div>
</div>
<!-- Toast Notification -->
<div
x-show="toast.show"
x-transition
:class="'toast toast-' + toast.type"
x-text="toast.message"
></div>
</div>
<script>
function productDetail() {
return {
// Data
product: null,
relatedProducts: [],
loading: false,
addingToCart: false,
quantity: 1,
selectedImage: null,
cartCount: 0,
vendorId: null,
productId: null,
sessionId: null,
// Toast notification
toast: {
show: false,
type: 'success',
message: ''
},
// Computed properties
get canAddToCart() {
return this.product?.is_active &&
this.product?.available_inventory > 0 &&
this.quantity > 0 &&
this.quantity <= this.product?.available_inventory;
},
get totalPrice() {
const price = this.product?.sale_price || this.product?.price || 0;
return price * this.quantity;
},
get hasAdditionalDetails() {
return this.product?.marketplace_product?.gtin ||
this.product?.condition ||
this.product?.marketplace_product?.color ||
this.product?.marketplace_product?.size ||
this.product?.marketplace_product?.material;
},
// Initialize
init() {
this.vendorId = this.$el.dataset.vendorId;
this.productId = this.$el.dataset.productId;
this.sessionId = this.getOrCreateSessionId();
this.loadCartCount();
},
// Get or create session ID
getOrCreateSessionId() {
let sessionId = localStorage.getItem('cart_session_id');
if (!sessionId) {
sessionId = 'session_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
localStorage.setItem('cart_session_id', sessionId);
}
return sessionId;
},
// Load product details
async loadProduct() {
this.loading = true;
try {
const response = await fetch(
`/api/v1/public/vendors/${this.vendorId}/products/${this.productId}`
);
if (!response.ok) {
throw new Error('Product not found');
}
this.product = await response.json();
// Set default image
if (this.product?.marketplace_product?.image_link) {
this.selectedImage = this.product.marketplace_product.image_link;
}
// Set initial quantity
this.quantity = this.product?.min_quantity || 1;
// Load related products (optional)
await this.loadRelatedProducts();
} catch (error) {
console.error('Failed to load product:', error);
this.showToast('Failed to load product', 'error');
// Redirect back to products after error
setTimeout(() => {
window.location.href = '/shop/products';
}, 2000);
} finally {
this.loading = false;
}
},
// Load related products (same category or brand)
async loadRelatedProducts() {
try {
const response = await fetch(
`/api/v1/public/vendors/${this.vendorId}/products?limit=4`
);
if (response.ok) {
const data = await response.json();
// Filter out current product
this.relatedProducts = data.products
.filter(p => p.id !== parseInt(this.productId))
.slice(0, 4);
}
} catch (error) {
console.error('Failed to load related products:', error);
}
},
// Load cart count
async loadCartCount() {
try {
const response = await fetch(
`/api/v1/public/vendors/${this.vendorId}/cart/${this.sessionId}`
);
if (response.ok) {
const data = await response.json();
this.cartCount = (data.items || []).reduce((sum, item) =>
sum + item.quantity, 0
);
}
} catch (error) {
console.error('Failed to load cart count:', error);
}
},
// Quantity controls
increaseQuantity() {
const max = this.product?.max_quantity || this.product?.available_inventory;
if (this.quantity < max) {
this.quantity++;
}
},
decreaseQuantity() {
const min = this.product?.min_quantity || 1;
if (this.quantity > min) {
this.quantity--;
}
},
validateQuantity() {
const min = this.product?.min_quantity || 1;
const max = this.product?.max_quantity || this.product?.available_inventory;
if (this.quantity < min) {
this.quantity = min;
} else if (this.quantity > max) {
this.quantity = max;
}
},
// Add to cart
async addToCart() {
if (!this.canAddToCart) return;
this.addingToCart = true;
try {
const response = await fetch(
`/api/v1/public/vendors/${this.vendorId}/cart/${this.sessionId}/items`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
product_id: parseInt(this.productId),
quantity: this.quantity
})
}
);
if (response.ok) {
this.cartCount += this.quantity;
this.showToast(
`${this.quantity} item(s) added to cart!`,
'success'
);
// Reset quantity to minimum
this.quantity = this.product?.min_quantity || 1;
} else {
const error = await response.json();
throw new Error(error.detail || 'Failed to add to cart');
}
} catch (error) {
console.error('Add to cart error:', error);
this.showToast(error.message || 'Failed to add to cart', 'error');
} finally {
this.addingToCart = false;
}
},
// View other product
viewProduct(productId) {
window.location.href = `/shop/products/${productId}`;
},
// Show toast notification
showToast(message, type = 'success') {
this.toast = {
show: true,
type: type,
message: message
};
setTimeout(() => {
this.toast.show = false;
}, 3000);
}
}
}
</script>
<style>
/* Product Detail Styles */
.product-detail-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-2xl);
margin-top: var(--spacing-xl);
margin-bottom: var(--spacing-2xl);
}
.product-images {
position: sticky;
top: var(--spacing-lg);
height: fit-content;
}
.main-image {
width: 100%;
aspect-ratio: 1;
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--gray-50);
margin-bottom: var(--spacing-md);
}
.product-main-image {
width: 100%;
height: 100%;
object-fit: contain;
}
.image-gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
gap: var(--spacing-sm);
}
.thumbnail {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
border-radius: var(--radius-md);
cursor: pointer;
border: 2px solid transparent;
transition: all var(--transition-base);
}
.thumbnail:hover {
border-color: var(--primary-color);
}
.thumbnail.active {
border-color: var(--primary-color);
box-shadow: var(--shadow-md);
}
.product-info-detail {
display: flex;
flex-direction: column;
gap: var(--spacing-lg);
}
.product-title-detail {
font-size: var(--font-4xl);
font-weight: 700;
color: var(--text-primary);
margin: 0;
}
.product-meta {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-md);
padding-bottom: var(--spacing-md);
border-bottom: 1px solid var(--border-color);
}
.meta-item {
font-size: var(--font-sm);
color: var(--text-secondary);
}
.product-pricing {
padding: var(--spacing-lg);
background: var(--gray-50);
border-radius: var(--radius-lg);
}
.price-original {
font-size: var(--font-xl);
color: var(--text-muted);
text-decoration: line-through;
margin-right: var(--spacing-md);
}
.price-sale {
font-size: var(--font-4xl);
font-weight: 700;
color: var(--danger-color);
}
.price-current {
font-size: var(--font-4xl);
font-weight: 700;
color: var(--text-primary);
}
.price-badge {
display: inline-block;
background: var(--danger-color);
color: white;
padding: 4px 12px;
border-radius: var(--radius-full);
font-size: var(--font-sm);
font-weight: 600;
margin-left: var(--spacing-sm);
}
.product-availability {
padding: var(--spacing-md);
background: white;
border-radius: var(--radius-md);
}
.availability-badge {
display: inline-block;
padding: 8px 16px;
border-radius: var(--radius-md);
font-weight: 600;
font-size: var(--font-base);
}
.availability-badge.in-stock {
background: #d4edda;
color: #155724;
}
.availability-badge.out-of-stock {
background: #f8d7da;
color: #721c24;
}
.product-description {
padding: var(--spacing-lg);
background: white;
border-radius: var(--radius-lg);
border: 1px solid var(--border-color);
}
.product-description h3 {
margin-bottom: var(--spacing-md);
font-size: var(--font-xl);
}
.product-description p {
line-height: 1.6;
color: var(--text-secondary);
}
.product-details {
padding: var(--spacing-lg);
background: white;
border-radius: var(--radius-lg);
border: 1px solid var(--border-color);
}
.product-details h3 {
margin-bottom: var(--spacing-md);
font-size: var(--font-xl);
}
.product-details ul {
list-style: none;
padding: 0;
margin: 0;
}
.product-details li {
padding: var(--spacing-sm) 0;
border-bottom: 1px solid var(--border-color);
}
.product-details li:last-child {
border-bottom: none;
}
.add-to-cart-section {
padding: var(--spacing-xl);
background: white;
border-radius: var(--radius-lg);
border: 2px solid var(--primary-color);
display: flex;
flex-direction: column;
gap: var(--spacing-lg);
}
.quantity-selector {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
}
.quantity-selector label {
font-weight: 600;
font-size: var(--font-lg);
}
.quantity-controls {
display: flex;
gap: var(--spacing-sm);
align-items: center;
}
.btn-quantity {
width: 40px;
height: 40px;
border: 2px solid var(--border-color);
background: white;
border-radius: var(--radius-md);
cursor: pointer;
font-size: var(--font-xl);
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition-base);
}
.btn-quantity:hover:not(:disabled) {
background: var(--gray-50);
border-color: var(--primary-color);
}
.btn-quantity:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.quantity-input {
width: 80px;
text-align: center;
padding: 10px;
border: 2px solid var(--border-color);
border-radius: var(--radius-md);
font-size: var(--font-lg);
font-weight: 600;
}
.btn-add-to-cart {
width: 100%;
padding: 16px 32px;
background: var(--primary-color);
color: white;
border: none;
border-radius: var(--radius-lg);
font-size: var(--font-xl);
font-weight: 600;
cursor: pointer;
transition: all var(--transition-base);
}
.btn-add-to-cart:hover:not(:disabled) {
background: var(--primary-dark);
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.btn-add-to-cart:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.total-price {
padding: var(--spacing-md);
background: var(--gray-50);
border-radius: var(--radius-md);
text-align: center;
font-size: var(--font-2xl);
}
.related-products {
margin-top: var(--spacing-2xl);
padding-top: var(--spacing-2xl);
border-top: 2px solid var(--border-color);
}
.related-products h2 {
margin-bottom: var(--spacing-xl);
font-size: var(--font-3xl);
}
/* Responsive */
@media (max-width: 1024px) {
.product-detail-container {
grid-template-columns: 1fr;
}
.product-images {
position: static;
}
}
@media (max-width: 768px) {
.product-title-detail {
font-size: var(--font-2xl);
}
.price-current,
.price-sale {
font-size: var(--font-3xl);
}
.add-to-cart-section {
padding: var(--spacing-lg);
}
}
</style>
</body>
</html>

459
app/templates/shop/products.html Normal file
View File

@@ -0,0 +1,459 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Products - {{ vendor.name }}</title>
<link rel="stylesheet" href="/static/css/shared/base.css">
<link rel="stylesheet" href="/static/css/vendor/vendor.css">
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body>
<div x-data="productCatalog()"
x-init="loadProducts()"
data-vendor-id="{{ vendor.id }}"
>
<!-- Header -->
<header class="header">
<div class="header-left">
<h1>{{ vendor.name }} - Products</h1>
</div>
<div class="header-right">
<a href="/shop/cart" class="btn-primary">
🛒 Cart (<span x-text="cartCount"></span>)
</a>
</div>
</header>
<div class="container">
<!-- Filters & Search -->
<div class="filter-bar">
<div class="search-box">
<input
type="text"
x-model="filters.search"
@input.debounce.500ms="loadProducts()"
placeholder="Search products..."
class="search-input"
>
<span class="search-icon">🔍</span>
</div>
<div class="filter-group">
<select
x-model="filters.sort"
@change="loadProducts()"
class="form-select"
>
<option value="name_asc">Name (A-Z)</option>
<option value="name_desc">Name (Z-A)</option>
<option value="price_asc">Price (Low to High)</option>
<option value="price_desc">Price (High to Low)</option>
<option value="newest">Newest First</option>
</select>
</div>
<button
@click="clearFilters()"
class="btn-secondary"
x-show="hasActiveFilters"
>
Clear Filters
</button>
</div>
<!-- Loading State -->
<div x-show="loading" class="loading">
<div class="loading-spinner-lg"></div>
<p>Loading products...</p>
</div>
<!-- Empty State -->
<div x-show="!loading && products.length === 0" class="empty-state">
<div class="empty-state-icon">📦</div>
<h3>No products found</h3>
<p x-show="hasActiveFilters">Try adjusting your filters</p>
<p x-show="!hasActiveFilters">Check back soon for new products!</p>
</div>
<!-- Product Grid -->
<div x-show="!loading && products.length > 0" class="product-grid">
<template x-for="product in products" :key="product.id">
<div class="product-card">
<!-- Product Image -->
<div class="product-image-wrapper">
<img
:src="product.image_url || '/static/images/placeholder.png'"
:alt="product.name"
class="product-image"
@click="viewProduct(product.id)"
>
<div
x-show="!product.is_active || product.inventory_level <= 0"
class="out-of-stock-badge"
>
Out of Stock
</div>
</div>
<!-- Product Info -->
<div class="product-info">
<h3
class="product-title"
@click="viewProduct(product.id)"
x-text="product.name"
></h3>
<p class="product-sku" x-text="'SKU: ' + product.sku"></p>
<p class="product-price">
€<span x-text="parseFloat(product.price).toFixed(2)"></span>
</p>
<p
class="product-description"
x-text="product.description || 'No description available'"
></p>
</div>
<!-- Product Actions -->
<div class="product-actions">
<button
@click="viewProduct(product.id)"
class="btn-outline btn-sm"
>
View Details
</button>
<button
@click="addToCart(product)"
:disabled="!product.is_active || product.inventory_level <= 0 || addingToCart[product.id]"
class="btn-primary btn-sm"
>
<span x-show="!addingToCart[product.id]">Add to Cart</span>
<span x-show="addingToCart[product.id]">
<span class="loading-spinner"></span> Adding...
</span>
</button>
</div>
</div>
</template>
</div>
<!-- Pagination -->
<div x-show="totalPages > 1" class="pagination">
<button
@click="changePage(currentPage - 1)"
:disabled="currentPage === 1"
class="pagination-btn"
>
← Previous
</button>
<span class="pagination-info">
Page <span x-text="currentPage"></span> of <span x-text="totalPages"></span>
</span>
<button
@click="changePage(currentPage + 1)"
:disabled="currentPage === totalPages"
class="pagination-btn"
>
Next →
</button>
</div>
</div>
<!-- Toast Notification -->
<div
x-show="toast.show"
x-transition
:class="'toast toast-' + toast.type"
class="toast"
x-text="toast.message"
></div>
</div>
<script>
function productCatalog() {
return {
products: [],
loading: false,
addingToCart: {},
cartCount: 0,
vendorId: null,
sessionId: null,
// Filters
filters: {
search: '',
sort: 'name_asc',
category: ''
},
// Pagination
currentPage: 1,
perPage: 12,
totalProducts: 0,
// Toast notification
toast: {
show: false,
type: 'success',
message: ''
},
// Computed properties
get totalPages() {
return Math.ceil(this.totalProducts / this.perPage);
},
get hasActiveFilters() {
return this.filters.search !== '' ||
this.filters.category !== '' ||
this.filters.sort !== 'name_asc';
},
// Initialize
init() {
this.vendorId = this.$el.dataset.vendorId;
this.sessionId = this.getOrCreateSessionId();
this.loadCartCount();
},
// Get or create session ID
getOrCreateSessionId() {
let sessionId = localStorage.getItem('cart_session_id');
if (!sessionId) {
sessionId = 'session_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
localStorage.setItem('cart_session_id', sessionId);
}
return sessionId;
},
// Load products from API
async loadProducts() {
this.loading = true;
try {
const params = new URLSearchParams({
page: this.currentPage,
per_page: this.perPage,
search: this.filters.search,
sort: this.filters.sort
});
if (this.filters.category) {
params.append('category', this.filters.category);
}
const response = await fetch(
`/api/v1/public/vendors/${this.vendorId}/products?${params}`
);
if (response.ok) {
const data = await response.json();
this.products = data.products || [];
this.totalProducts = data.total || 0;
} else {
throw new Error('Failed to load products');
}
} catch (error) {
console.error('Load products error:', error);
this.showToast('Failed to load products', 'error');
} finally {
this.loading = false;
}
},
// Load cart count
async loadCartCount() {
try {
const response = await fetch(
`/api/v1/public/vendors/${this.vendorId}/cart/${this.sessionId}`
);
if (response.ok) {
const data = await response.json();
this.cartCount = (data.items || []).reduce((sum, item) =>
sum + item.quantity, 0
);
}
} catch (error) {
console.error('Failed to load cart count:', error);
}
},
// Add product to cart
async addToCart(product) {
this.addingToCart[product.id] = true;
try {
const response = await fetch(
`/api/v1/public/vendors/${this.vendorId}/cart/${this.sessionId}/items`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
product_id: product.id,
quantity: 1
})
}
);
if (response.ok) {
this.cartCount++;
this.showToast(`${product.name} added to cart!`, 'success');
} else {
throw new Error('Failed to add to cart');
}
} catch (error) {
console.error('Add to cart error:', error);
this.showToast('Failed to add to cart. Please try again.', 'error');
} finally {
this.addingToCart[product.id] = false;
}
},
// View product details
viewProduct(productId) {
window.location.href = `/shop/products/${productId}`;
},
// Change page
changePage(page) {
if (page >= 1 && page <= this.totalPages) {
this.currentPage = page;
this.loadProducts();
window.scrollTo({ top: 0, behavior: 'smooth' });
}
},
// Clear filters
clearFilters() {
this.filters = {
search: '',
sort: 'name_asc',
category: ''
};
this.currentPage = 1;
this.loadProducts();
},
// Show toast notification
showToast(message, type = 'success') {
this.toast = {
show: true,
type: type,
message: message
};
setTimeout(() => {
this.toast.show = false;
}, 3000);
}
}
}
</script>
<style>
/* Product-specific styles */
.filter-bar {
display: flex;
gap: var(--spacing-md);
margin-bottom: var(--spacing-xl);
flex-wrap: wrap;
align-items: center;
}
.search-box {
flex: 2;
min-width: 300px;
position: relative;
}
.search-input {
width: 100%;
padding-left: 40px;
}
.search-icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
font-size: var(--font-lg);
}
.filter-group {
flex: 1;
min-width: 200px;
}
.product-image-wrapper {
position: relative;
cursor: pointer;
}
.out-of-stock-badge {
position: absolute;
top: 10px;
right: 10px;
background: var(--danger-color);
color: white;
padding: 6px 12px;
border-radius: var(--radius-md);
font-size: var(--font-sm);
font-weight: 600;
}
.product-title {
cursor: pointer;
}
.product-title:hover {
color: var(--primary-color);
}
.product-sku {
font-size: var(--font-sm);
color: var(--text-muted);
margin-bottom: var(--spacing-sm);
}
/* Toast notification */
.toast {
position: fixed;
top: 20px;
right: 20px;
padding: 16px 24px;
background: white;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
z-index: 10000;
max-width: 400px;
}
.toast-success {
border-left: 4px solid var(--success-color);
}
.toast-error {
border-left: 4px solid var(--danger-color);
}
@media (max-width: 768px) {
.filter-bar {
flex-direction: column;
}
.search-box,
.filter-group {
width: 100%;
}
}
</style>
</body>
</html>

11
app/templates/shop/search.html Normal file
View File

@@ -0,0 +1,11 @@
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Search results page</title>
</head>
<body>
<-- Search results page -->
</body>
</html>