Monitoring for review overview css and design update
This commit is contained in:
parent
83081b988e
commit
ee766351bd
@ -534,4 +534,102 @@
|
|||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
padding: 1rem 1.5rem;
|
padding: 1rem 1.5rem;
|
||||||
color: #94a3b8;
|
color: #94a3b8;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* ==========================================================
|
||||||
|
REVIEW OVERVIEW BOX (Linke Spalte) - Kompakte Version
|
||||||
|
========================================================== */
|
||||||
|
|
||||||
|
.review-overview-box {
|
||||||
|
background: #1c2533;
|
||||||
|
border: 1px solid #2a374a;
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
/* Padding von 1.5rem auf 1rem reduziert für eine kleinere Box */
|
||||||
|
padding: 1rem;
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
color: #cbd5e1;
|
||||||
|
animation: fadeInUp 0.5s ease 0.3s both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overview-header {
|
||||||
|
text-align: center;
|
||||||
|
/* Abstände verringert */
|
||||||
|
margin-bottom: 0.8rem;
|
||||||
|
padding-bottom: 0.8rem;
|
||||||
|
border-bottom: 1px solid #2a374a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overview-avg {
|
||||||
|
/* Schriftgröße der Durchschnittsnote von 2.5rem auf 2rem verkleinert */
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: white;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overview-avg .star {
|
||||||
|
/* Stern etwas verkleinert */
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overview-count {
|
||||||
|
/* Textgröße leicht verkleinert */
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: #94a3b8;
|
||||||
|
margin-top: 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overview-breakdown {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
/* Abstand zwischen den Balken verringert */
|
||||||
|
gap: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breakdown-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
/* Text bei den Balken etwas kleiner */
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breakdown-stars {
|
||||||
|
width: 50px;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-align: right;
|
||||||
|
color: #cbd5e1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breakdown-bar-bg {
|
||||||
|
flex: 1;
|
||||||
|
/* Höhe der Balken von 8px auf 6px reduziert */
|
||||||
|
height: 6px;
|
||||||
|
background: #2a374a;
|
||||||
|
border-radius: 3px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breakdown-bar-fill {
|
||||||
|
height: 100%;
|
||||||
|
background: #fbbf24;
|
||||||
|
border-radius: 3px;
|
||||||
|
transition: width 0.8s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breakdown-num {
|
||||||
|
width: 20px;
|
||||||
|
text-align: right;
|
||||||
|
color: #94a3b8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overview-empty {
|
||||||
|
text-align: center;
|
||||||
|
color: #94a3b8;
|
||||||
|
padding: 0.5rem 0;
|
||||||
|
font-size: 0.85rem;
|
||||||
}
|
}
|
||||||
162
productpage.php
162
productpage.php
@ -129,153 +129,121 @@ $productId = isset($_GET['id']) ? (int)$_GET['id'] : 0;
|
|||||||
|
|
||||||
|
|
||||||
<?php
|
<?php
|
||||||
|
// SQL korrigiert: SUM statt COUNT für die bedingten Zählungen
|
||||||
|
$stmtRevOv = mysqli_prepare($conn,
|
||||||
|
"SELECT ROUND(AVG(rating), 1) as avgRating,
|
||||||
|
COUNT(*) as reviewCount,
|
||||||
|
SUM(rating = 5) as fiveStarCount,
|
||||||
|
SUM(rating = 4) as fourStarCount,
|
||||||
|
SUM(rating = 3) as threeStarCount,
|
||||||
|
SUM(rating = 2) as twoStarCount,
|
||||||
|
SUM(rating = 1) as oneStarCount
|
||||||
|
FROM reviews WHERE productID = ?");
|
||||||
|
|
||||||
$stmtRevOv = mysqli_prepare($conn,
|
$stmtRevOv->bind_param("i", $productId);
|
||||||
"SELECT AVG(rating) as avgRating, COUNT(*) as reviewCount,
|
$stmtRevOv->execute();
|
||||||
COUNT(rating = 5 ) as fiveStarCount,
|
$resultRevOv = $stmtRevOv->get_result();
|
||||||
COUNT(rating = 4 ) as fourStarCount,
|
|
||||||
COUNT(rating = 3 ) as threeStarCount,
|
|
||||||
COUNT(rating = 2 ) as twoStarCount,
|
|
||||||
COUNT(rating = 1 ) as oneStarCount
|
|
||||||
FROM reviews WHERE productID = ?");
|
|
||||||
|
|
||||||
$stmtRevOv->bind_param("i", $productId);
|
$reviewOverview = $resultRevOv->fetch_assoc();
|
||||||
$stmtRevOv->execute();
|
|
||||||
$resultRevOv = $stmtRevOv->get_result();
|
|
||||||
|
|
||||||
$reviewOverview = $resultRevOv->fetch_assoc();
|
// Falls NULL zurückkommt (keine Bewertungen), auf 0 setzen
|
||||||
|
if ($reviewOverview['reviewCount'] === null) {
|
||||||
|
$reviewOverview['reviewCount'] = 0;
|
||||||
|
}
|
||||||
?>
|
?>
|
||||||
|
|
||||||
<div class="product-wrapper">
|
<div class="product-wrapper">
|
||||||
<!-- LINKER BEREICH – BILD -->
|
|
||||||
<div class="product-left">
|
<div class="product-left">
|
||||||
<div class="product-image-box">
|
<div class="product-image-box">
|
||||||
<img
|
<img src="<?= isset($product['imagePath']) ? $product['imagePath'] : 'assets/images/placeholder.png' ?>"
|
||||||
src="<?= isset($product['imagePath']) ? $product['imagePath'] : 'assets/images/placeholder.png' ?>"
|
alt="<?= htmlspecialchars($product['model'] ?? 'Produktbild') ?>">
|
||||||
alt="<?= htmlspecialchars($product['model'] ?? 'Produktbild') ?>">
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<?php if (isset($_SESSION['user_id'])): ?>
|
<?php if (isset($_SESSION['user_id'])): ?>
|
||||||
|
|
||||||
<?php if ($alreadyInWishlist): ?>
|
<?php if ($alreadyInWishlist): ?>
|
||||||
|
|
||||||
<div class="auth__actions">
|
<div class="auth__actions">
|
||||||
<input class="auth__submit" type="button"
|
<input class="auth__submit" type="button" value="Bereits in Wunschliste" disabled>
|
||||||
value="Bereits in Wunschliste"
|
|
||||||
disabled>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<?php else: ?>
|
<?php else: ?>
|
||||||
|
|
||||||
<form method="POST">
|
<form method="POST">
|
||||||
<input type="hidden" name="product_id" value="<?= (int)$productId ?>">
|
<input type="hidden" name="product_id" value="<?= (int)$productId ?>">
|
||||||
<input type="hidden" name="add_wishlist" value="1">
|
<input type="hidden" name="add_wishlist" value="1">
|
||||||
|
|
||||||
<div class="auth__actions">
|
<div class="auth__actions">
|
||||||
<input class="auth__submit"
|
<input class="auth__submit" type="submit" value="Zur Wunschliste hinzufügen">
|
||||||
type="submit"
|
|
||||||
value="Zur Wunschliste hinzufügen">
|
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
|
|
||||||
<?php else: ?>
|
<?php else: ?>
|
||||||
|
|
||||||
<div class="auth__actions">
|
<div class="auth__actions">
|
||||||
<a href="login.php">
|
<a href="login.php">
|
||||||
<input class="auth__submit" type="button"
|
<input class="auth__submit" type="button" value="Zum Hinzufügen einloggen">
|
||||||
value="Zum Hinzufügen einloggen">
|
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
|
|
||||||
<div class="review-over">
|
<div class="review-overview-box">
|
||||||
<div class="review-rating">
|
<?php if ($reviewOverview['reviewCount'] > 0): ?>
|
||||||
|
<div class="overview-header">
|
||||||
<?php if ($reviewOverview['reviewCount'] > 0): ?>
|
<div class="overview-avg">
|
||||||
<div class="avg-rating">
|
<?= htmlspecialchars($reviewOverview['avgRating']) ?> <span class="star filled">★</span>
|
||||||
<?= htmlspecialchars($reviewOverview['avgRating']) ?>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="overview-count">
|
||||||
<div class="review-count">
|
basierend auf <?= htmlspecialchars($reviewOverview['reviewCount']) ?> Bewertungen
|
||||||
<?= htmlspecialchars($reviewOverview['reviewCount']) ?> Bewertungen
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="review-breakdown">
|
<div class="overview-breakdown">
|
||||||
<div class="five-star">
|
<?php
|
||||||
5 Sterne: <?= htmlspecialchars($reviewOverview['fiveStarCount']) ?>
|
// Ein kleines Array für die saubere Ausgabe mit einer Schleife
|
||||||
<div class="star-rating">
|
$starCounts = [
|
||||||
<?php $i = 5?>
|
5 => (int)$reviewOverview['fiveStarCount'],
|
||||||
<span class="star <?= $i,'filled' ?>">★</span>
|
4 => (int)$reviewOverview['fourStarCount'],
|
||||||
|
3 => (int)$reviewOverview['threeStarCount'],
|
||||||
|
2 => (int)$reviewOverview['twoStarCount'],
|
||||||
|
1 => (int)$reviewOverview['oneStarCount']
|
||||||
|
];
|
||||||
|
|
||||||
|
foreach ($starCounts as $stars => $count):
|
||||||
|
// Prozentwert für den Balken berechnen
|
||||||
|
$percent = ($reviewOverview['reviewCount'] > 0) ? round(($count / $reviewOverview['reviewCount']) * 100) : 0;
|
||||||
|
?>
|
||||||
|
<div class="breakdown-row">
|
||||||
|
<div class="breakdown-stars"><?= $stars ?> Sterne</div>
|
||||||
|
<div class="breakdown-bar-bg">
|
||||||
|
<div class="breakdown-bar-fill" style="width: <?= $percent ?>%;"></div>
|
||||||
|
</div>
|
||||||
|
<div class="breakdown-num"><?= $count ?></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="four-star">
|
<?php endforeach; ?>
|
||||||
4 Sterne: <?= htmlspecialchars($reviewOverview['fourStarCount']) ?>
|
</div>
|
||||||
<div class="star-rating">
|
|
||||||
<?php $i = 4?>
|
|
||||||
<span class="star <?= $i,'filled' ?>">★</span>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="three-star">
|
|
||||||
3 Sterne: <?= htmlspecialchars($reviewOverview['threeStarCount']) ?>
|
|
||||||
<div class="star-rating">
|
|
||||||
<?php $i = 3?>
|
|
||||||
<span class="star <?= $i,'filled' ?>">★</span>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="two-star">
|
|
||||||
2 Sterne: <?= htmlspecialchars($reviewOverview['twoStarCount']) ?>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="one-star">
|
|
||||||
1 Stern: <?= htmlspecialchars($reviewOverview['oneStarCount']) ?>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<?php else: ?>
|
|
||||||
<div class="no-rating">
|
|
||||||
Noch keine Bewertungen
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<?php endif; ?>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<?php else: ?>
|
||||||
|
<div class="overview-empty">
|
||||||
|
<p>Noch keine Bewertungen vorhanden.</p>
|
||||||
|
</div>
|
||||||
|
<?php endif; ?>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- RECHTER BEREICH – DETAILS -->
|
|
||||||
<div class="product-right">
|
<div class="product-right">
|
||||||
|
|
||||||
<h1 class="product-title">
|
<h1 class="product-title">
|
||||||
<?= htmlspecialchars($product['model'] ?? 'Produkt') ?>
|
<?= htmlspecialchars($product['model'] ?? 'Produkt') ?>
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
<div class="product-specs">
|
<div class="product-specs">
|
||||||
|
|
||||||
<div class="product-desc">
|
<div class="product-desc">
|
||||||
<?= htmlspecialchars($product['description']) ?>
|
<?= htmlspecialchars($product['description']) ?>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<?php
|
<?php
|
||||||
while ($row = $result->fetch_assoc()) {
|
while ($row = $result->fetch_assoc()) {
|
||||||
|
|
||||||
echo "<p><strong>{$row['name']}:</strong> ";
|
echo "<p><strong>{$row['name']}:</strong> ";
|
||||||
|
if (!empty($row['valueString'])) echo $row['valueString'];
|
||||||
if (!empty($row['valueString'])) echo $row['valueString'];
|
if (!empty($row['valueNumber'])) echo $row['valueNumber'] . " " . $row['unit'];
|
||||||
if (!empty($row['valueNumber'])) echo $row['valueNumber'] . " " . $row['unit'];
|
if (!is_null($row['valueBool'])) echo $row['valueBool'] ? "Ja" : "Nein";
|
||||||
if (!is_null($row['valueBool'])) echo $row['valueBool'] ? "Ja" : "Nein";
|
echo "</p>";
|
||||||
|
}
|
||||||
echo "</p>";
|
?>
|
||||||
}
|
|
||||||
?>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user