434 lines
20 KiB
Twig
434 lines
20 KiB
Twig
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title><?= $title ?></title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
|
<style>
|
|
.navbar {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
}
|
|
.product-card {
|
|
transition: transform 0.2s, box-shadow 0.2s;
|
|
height: 100%;
|
|
}
|
|
.product-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
|
|
}
|
|
.product-image {
|
|
height: 200px;
|
|
object-fit: cover;
|
|
width: 100%;
|
|
}
|
|
.search-suggestions {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
background: white;
|
|
border: 1px solid #dee2e6;
|
|
border-top: none;
|
|
border-radius: 0 0 0.375rem 0.375rem;
|
|
z-index: 1000;
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
}
|
|
.suggestion-item {
|
|
padding: 0.75rem;
|
|
border-bottom: 1px solid #f8f9fa;
|
|
cursor: pointer;
|
|
}
|
|
.suggestion-item:hover {
|
|
background-color: #f8f9fa;
|
|
}
|
|
.suggestion-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
.filter-card {
|
|
background: #f8f9fa;
|
|
border-radius: 0.5rem;
|
|
padding: 1.5rem;
|
|
}
|
|
.price-slider {
|
|
width: 100%;
|
|
}
|
|
.pagination .page-link {
|
|
color: #667eea;
|
|
}
|
|
.pagination .page-item.active .page-link {
|
|
background-color: #667eea;
|
|
border-color: #667eea;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Navigation -->
|
|
<nav class="navbar navbar-expand-lg navbar-dark">
|
|
<div class="container">
|
|
<a class="navbar-brand" href="/">
|
|
<i class="fas fa-shopping-cart me-2"></i>Webshop
|
|
</a>
|
|
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<div class="collapse navbar-collapse" id="navbarNav">
|
|
<ul class="navbar-nav me-auto">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/">Startseite</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/products">Produkte</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/categories">Kategorien</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="d-flex align-items-center">
|
|
<div class="position-relative me-3">
|
|
<input type="text"
|
|
class="form-control"
|
|
id="searchInput"
|
|
placeholder="Produkte suchen..."
|
|
value="<?= htmlspecialchars($query) ?>">
|
|
<div id="searchSuggestions" class="search-suggestions" style="display: none;"></div>
|
|
</div>
|
|
<a href="/cart" class="btn btn-outline-light position-relative">
|
|
<i class="fas fa-shopping-cart"></i>
|
|
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger" id="cartCount">
|
|
0
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Main Content -->
|
|
<div class="container mt-4">
|
|
<!-- Search Header -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<h1 class="h3 mb-2">
|
|
<i class="fas fa-search me-2"></i>
|
|
<?php if (!empty($query)): ?>
|
|
Suchergebnisse für "<?= htmlspecialchars($query) ?>"
|
|
<?php else: ?>
|
|
Alle Produkte
|
|
<?php endif; ?>
|
|
</h1>
|
|
<p class="text-muted">
|
|
<?= $pagination['total_count'] ?> Produkt<?= $pagination['total_count'] != 1 ? 'e' : '' ?> gefunden
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Filters and Results -->
|
|
<div class="row">
|
|
<!-- Filters Sidebar -->
|
|
<div class="col-lg-3 mb-4">
|
|
<div class="filter-card">
|
|
<h5 class="mb-3">
|
|
<i class="fas fa-filter me-2"></i>
|
|
Filter
|
|
</h5>
|
|
|
|
<form method="GET" action="/search" id="filterForm">
|
|
<?php if (!empty($query)): ?>
|
|
<input type="hidden" name="q" value="<?= htmlspecialchars($query) ?>">
|
|
<?php endif; ?>
|
|
|
|
<!-- Category Filter -->
|
|
<div class="mb-3">
|
|
<label for="category" class="form-label">Kategorie</label>
|
|
<select class="form-select" name="category" id="category">
|
|
<option value="">Alle Kategorien</option>
|
|
<?php foreach ($categories as $cat): ?>
|
|
<option value="<?= $cat['id'] ?>"
|
|
<?= $filters['category'] == $cat['id'] ? 'selected' : '' ?>>
|
|
<?= htmlspecialchars($cat['name']) ?>
|
|
</option>
|
|
<?php endforeach; ?>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Price Range -->
|
|
<div class="mb-3">
|
|
<label class="form-label">Preisbereich</label>
|
|
<div class="row">
|
|
<div class="col-6">
|
|
<input type="number"
|
|
class="form-control"
|
|
name="min_price"
|
|
placeholder="Min"
|
|
value="<?= htmlspecialchars($filters['min_price']) ?>">
|
|
</div>
|
|
<div class="col-6">
|
|
<input type="number"
|
|
class="form-control"
|
|
name="max_price"
|
|
placeholder="Max"
|
|
value="<?= htmlspecialchars($filters['max_price']) ?>">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sort Options -->
|
|
<div class="mb-3">
|
|
<label for="sort" class="form-label">Sortierung</label>
|
|
<select class="form-select" name="sort" id="sort">
|
|
<option value="name" <?= $filters['sort'] === 'name' ? 'selected' : '' ?>>Name</option>
|
|
<option value="price" <?= $filters['sort'] === 'price' ? 'selected' : '' ?>>Preis</option>
|
|
<option value="created_at" <?= $filters['sort'] === 'created_at' ? 'selected' : '' ?>>Datum</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="order" class="form-label">Reihenfolge</label>
|
|
<select class="form-select" name="order" id="order">
|
|
<option value="asc" <?= $filters['order'] === 'asc' ? 'selected' : '' ?>>Aufsteigend</option>
|
|
<option value="desc" <?= $filters['order'] === 'desc' ? 'selected' : '' ?>>Absteigend</option>
|
|
</select>
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-primary w-100">
|
|
<i class="fas fa-search me-2"></i>Filter anwenden
|
|
</button>
|
|
|
|
<a href="/search" class="btn btn-outline-secondary w-100 mt-2">
|
|
<i class="fas fa-times me-2"></i>Filter zurücksetzen
|
|
</a>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Products Grid -->
|
|
<div class="col-lg-9">
|
|
<?php if (isset($error)): ?>
|
|
<div class="alert alert-danger">
|
|
<i class="fas fa-exclamation-circle me-2"></i><?= htmlspecialchars($error) ?>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<?php if (empty($products)): ?>
|
|
<div class="text-center py-5">
|
|
<i class="fas fa-search text-muted mb-3" style="font-size: 3rem;"></i>
|
|
<h5 class="text-muted">Keine Produkte gefunden</h5>
|
|
<p class="text-muted">
|
|
<?php if (!empty($query)): ?>
|
|
Versuchen Sie andere Suchbegriffe oder passen Sie die Filter an.
|
|
<?php else: ?>
|
|
Es sind noch keine Produkte verfügbar.
|
|
<?php endif; ?>
|
|
</p>
|
|
</div>
|
|
<?php else: ?>
|
|
<!-- Products Grid -->
|
|
<div class="row">
|
|
<?php foreach ($products as $product): ?>
|
|
<div class="col-md-6 col-lg-4 mb-4">
|
|
<div class="card product-card h-100">
|
|
<?php if (!empty($product['image'])): ?>
|
|
<img src="<?= htmlspecialchars($product['image']) ?>"
|
|
class="card-img-top product-image"
|
|
alt="<?= htmlspecialchars($product['name']) ?>">
|
|
<?php else: ?>
|
|
<div class="card-img-top product-image bg-light d-flex align-items-center justify-content-center">
|
|
<i class="fas fa-image text-muted" style="font-size: 2rem;"></i>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<div class="card-body d-flex flex-column">
|
|
<h6 class="card-title"><?= htmlspecialchars($product['name']) ?></h6>
|
|
<p class="card-text text-muted small">
|
|
<?= htmlspecialchars($product['category_name']) ?>
|
|
</p>
|
|
<p class="card-text flex-grow-1">
|
|
<?= htmlspecialchars(substr($product['description'], 0, 100)) ?>...
|
|
</p>
|
|
<div class="d-flex justify-content-between align-items-center mt-auto">
|
|
<span class="h5 text-success mb-0">
|
|
€<?= number_format($product['price'], 2, ',', '.') ?>
|
|
</span>
|
|
<button class="btn btn-primary btn-sm add-to-cart"
|
|
data-product-id="<?= $product['id'] ?>"
|
|
data-product-name="<?= htmlspecialchars($product['name']) ?>">
|
|
<i class="fas fa-cart-plus me-1"></i>Hinzufügen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
<?php if ($pagination['total'] > 1): ?>
|
|
<nav aria-label="Produkt-Navigation">
|
|
<ul class="pagination justify-content-center">
|
|
<?php if ($pagination['current'] > 1): ?>
|
|
<li class="page-item">
|
|
<a class="page-link" href="?<?= http_build_query(array_merge($_GET, ['page' => $pagination['current'] - 1])) ?>">
|
|
<i class="fas fa-chevron-left"></i>
|
|
</a>
|
|
</li>
|
|
<?php endif; ?>
|
|
|
|
<?php for ($i = max(1, $pagination['current'] - 2); $i <= min($pagination['total'], $pagination['current'] + 2); $i++): ?>
|
|
<li class="page-item <?= $i == $pagination['current'] ? 'active' : '' ?>">
|
|
<a class="page-link" href="?<?= http_build_query(array_merge($_GET, ['page' => $i])) ?>">
|
|
<?= $i ?>
|
|
</a>
|
|
</li>
|
|
<?php endfor; ?>
|
|
|
|
<?php if ($pagination['current'] < $pagination['total']): ?>
|
|
<li class="page-item">
|
|
<a class="page-link" href="?<?= http_build_query(array_merge($_GET, ['page' => $pagination['current'] + 1])) ?>">
|
|
<i class="fas fa-chevron-right"></i>
|
|
</a>
|
|
</li>
|
|
<?php endif; ?>
|
|
</ul>
|
|
</nav>
|
|
<?php endif; ?>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Toast for Cart Updates -->
|
|
<div class="toast-container position-fixed bottom-0 end-0 p-3">
|
|
<div id="cartToast" class="toast" role="alert">
|
|
<div class="toast-header">
|
|
<i class="fas fa-shopping-cart me-2"></i>
|
|
<strong class="me-auto">Warenkorb</strong>
|
|
<button type="button" class="btn-close" data-bs-dismiss="toast"></button>
|
|
</div>
|
|
<div class="toast-body" id="toastMessage">
|
|
Produkt wurde zum Warenkorb hinzugefügt
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script>
|
|
// Search suggestions
|
|
let searchTimeout;
|
|
const searchInput = document.getElementById('searchInput');
|
|
const searchSuggestions = document.getElementById('searchSuggestions');
|
|
|
|
searchInput.addEventListener('input', function() {
|
|
clearTimeout(searchTimeout);
|
|
const query = this.value.trim();
|
|
|
|
if (query.length < 2) {
|
|
searchSuggestions.style.display = 'none';
|
|
return;
|
|
}
|
|
|
|
searchTimeout = setTimeout(() => {
|
|
fetch(`/search/ajax?q=${encodeURIComponent(query)}`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.products.length > 0) {
|
|
searchSuggestions.innerHTML = data.products.map(product => `
|
|
<div class="suggestion-item" onclick="selectSuggestion('${product.name}')">
|
|
<div class="d-flex align-items-center">
|
|
<img src="${product.image || ''}" alt="${product.name}"
|
|
style="width: 40px; height: 40px; object-fit: cover;"
|
|
class="me-2">
|
|
<div>
|
|
<div class="fw-bold">${product.name}</div>
|
|
<small class="text-muted">${product.category_name} - €${product.price}</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
searchSuggestions.style.display = 'block';
|
|
} else {
|
|
searchSuggestions.style.display = 'none';
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Search error:', error);
|
|
searchSuggestions.style.display = 'none';
|
|
});
|
|
}, 300);
|
|
});
|
|
|
|
// Hide suggestions when clicking outside
|
|
document.addEventListener('click', function(e) {
|
|
if (!searchInput.contains(e.target) && !searchSuggestions.contains(e.target)) {
|
|
searchSuggestions.style.display = 'none';
|
|
}
|
|
});
|
|
|
|
function selectSuggestion(name) {
|
|
searchInput.value = name;
|
|
searchSuggestions.style.display = 'none';
|
|
document.getElementById('filterForm').submit();
|
|
}
|
|
|
|
// Add to cart functionality
|
|
document.querySelectorAll('.add-to-cart').forEach(button => {
|
|
button.addEventListener('click', function() {
|
|
const productId = this.dataset.productId;
|
|
const productName = this.dataset.productName;
|
|
|
|
fetch('/cart/add', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
product_id: productId,
|
|
quantity: 1
|
|
})
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
// Update cart count
|
|
document.getElementById('cartCount').textContent = data.cart_count;
|
|
|
|
// Show toast
|
|
document.getElementById('toastMessage').textContent =
|
|
`${productName} wurde zum Warenkorb hinzugefügt`;
|
|
new bootstrap.Toast(document.getElementById('cartToast')).show();
|
|
|
|
// Update button
|
|
this.innerHTML = '<i class="fas fa-check me-1"></i>Hinzugefügt';
|
|
this.classList.remove('btn-primary');
|
|
this.classList.add('btn-success');
|
|
this.disabled = true;
|
|
|
|
setTimeout(() => {
|
|
this.innerHTML = '<i class="fas fa-cart-plus me-1"></i>Hinzufügen';
|
|
this.classList.remove('btn-success');
|
|
this.classList.add('btn-primary');
|
|
this.disabled = false;
|
|
}, 2000);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Add to cart error:', error);
|
|
alert('Fehler beim Hinzufügen zum Warenkorb');
|
|
});
|
|
});
|
|
});
|
|
|
|
// Auto-submit filters on change
|
|
document.querySelectorAll('#filterForm select').forEach(select => {
|
|
select.addEventListener('change', function() {
|
|
document.getElementById('filterForm').submit();
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |