Monitoring for review overview css and design update
This commit is contained in:
parent
83081b988e
commit
ee766351bd
@ -535,3 +535,101 @@
|
||||
padding: 1rem 1.5rem;
|
||||
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
|
||||
// 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,
|
||||
"SELECT AVG(rating) as avgRating, COUNT(*) as reviewCount,
|
||||
COUNT(rating = 5 ) as fiveStarCount,
|
||||
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);
|
||||
$stmtRevOv->execute();
|
||||
$resultRevOv = $stmtRevOv->get_result();
|
||||
|
||||
$stmtRevOv->bind_param("i", $productId);
|
||||
$stmtRevOv->execute();
|
||||
$resultRevOv = $stmtRevOv->get_result();
|
||||
$reviewOverview = $resultRevOv->fetch_assoc();
|
||||
|
||||
$reviewOverview = $resultRevOv->fetch_assoc();
|
||||
// Falls NULL zurückkommt (keine Bewertungen), auf 0 setzen
|
||||
if ($reviewOverview['reviewCount'] === null) {
|
||||
$reviewOverview['reviewCount'] = 0;
|
||||
}
|
||||
?>
|
||||
|
||||
<div class="product-wrapper">
|
||||
<!-- LINKER BEREICH – BILD -->
|
||||
<div class="product-left">
|
||||
<div class="product-image-box">
|
||||
<img
|
||||
src="<?= isset($product['imagePath']) ? $product['imagePath'] : 'assets/images/placeholder.png' ?>"
|
||||
alt="<?= htmlspecialchars($product['model'] ?? 'Produktbild') ?>">
|
||||
<img src="<?= isset($product['imagePath']) ? $product['imagePath'] : 'assets/images/placeholder.png' ?>"
|
||||
alt="<?= htmlspecialchars($product['model'] ?? 'Produktbild') ?>">
|
||||
</div>
|
||||
|
||||
<?php if (isset($_SESSION['user_id'])): ?>
|
||||
|
||||
<?php if ($alreadyInWishlist): ?>
|
||||
|
||||
<div class="auth__actions">
|
||||
<input class="auth__submit" type="button"
|
||||
value="Bereits in Wunschliste"
|
||||
disabled>
|
||||
<input class="auth__submit" type="button" value="Bereits in Wunschliste" disabled>
|
||||
</div>
|
||||
|
||||
<?php else: ?>
|
||||
|
||||
<form method="POST">
|
||||
<input type="hidden" name="product_id" value="<?= (int)$productId ?>">
|
||||
<input type="hidden" name="add_wishlist" value="1">
|
||||
|
||||
<div class="auth__actions">
|
||||
<input class="auth__submit"
|
||||
type="submit"
|
||||
value="Zur Wunschliste hinzufügen">
|
||||
<input class="auth__submit" type="submit" value="Zur Wunschliste hinzufügen">
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<?php endif; ?>
|
||||
|
||||
<?php else: ?>
|
||||
|
||||
<div class="auth__actions">
|
||||
<a href="login.php">
|
||||
<input class="auth__submit" type="button"
|
||||
value="Zum Hinzufügen einloggen">
|
||||
<input class="auth__submit" type="button" value="Zum Hinzufügen einloggen">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="review-over">
|
||||
<div class="review-rating">
|
||||
|
||||
<?php if ($reviewOverview['reviewCount'] > 0): ?>
|
||||
<div class="avg-rating">
|
||||
<?= htmlspecialchars($reviewOverview['avgRating']) ?>
|
||||
<div class="review-overview-box">
|
||||
<?php if ($reviewOverview['reviewCount'] > 0): ?>
|
||||
<div class="overview-header">
|
||||
<div class="overview-avg">
|
||||
<?= htmlspecialchars($reviewOverview['avgRating']) ?> <span class="star filled">★</span>
|
||||
</div>
|
||||
|
||||
<div class="review-count">
|
||||
<?= htmlspecialchars($reviewOverview['reviewCount']) ?> Bewertungen
|
||||
<div class="overview-count">
|
||||
basierend auf <?= htmlspecialchars($reviewOverview['reviewCount']) ?> Bewertungen
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="review-breakdown">
|
||||
<div class="five-star">
|
||||
5 Sterne: <?= htmlspecialchars($reviewOverview['fiveStarCount']) ?>
|
||||
<div class="star-rating">
|
||||
<?php $i = 5?>
|
||||
<span class="star <?= $i,'filled' ?>">★</span>
|
||||
<div class="overview-breakdown">
|
||||
<?php
|
||||
// Ein kleines Array für die saubere Ausgabe mit einer Schleife
|
||||
$starCounts = [
|
||||
5 => (int)$reviewOverview['fiveStarCount'],
|
||||
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 class="four-star">
|
||||
4 Sterne: <?= htmlspecialchars($reviewOverview['fourStarCount']) ?>
|
||||
<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 endforeach; ?>
|
||||
</div>
|
||||
|
||||
<?php else: ?>
|
||||
<div class="overview-empty">
|
||||
<p>Noch keine Bewertungen vorhanden.</p>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- RECHTER BEREICH – DETAILS -->
|
||||
<div class="product-right">
|
||||
|
||||
<h1 class="product-title">
|
||||
<?= htmlspecialchars($product['model'] ?? 'Produkt') ?>
|
||||
</h1>
|
||||
|
||||
<div class="product-specs">
|
||||
|
||||
<div class="product-desc">
|
||||
<?= htmlspecialchars($product['description']) ?>
|
||||
</div>
|
||||
|
||||
|
||||
<?php
|
||||
while ($row = $result->fetch_assoc()) {
|
||||
|
||||
echo "<p><strong>{$row['name']}:</strong> ";
|
||||
|
||||
if (!empty($row['valueString'])) echo $row['valueString'];
|
||||
if (!empty($row['valueNumber'])) echo $row['valueNumber'] . " " . $row['unit'];
|
||||
if (!is_null($row['valueBool'])) echo $row['valueBool'] ? "Ja" : "Nein";
|
||||
|
||||
echo "</p>";
|
||||
}
|
||||
?>
|
||||
if (!empty($row['valueString'])) echo $row['valueString'];
|
||||
if (!empty($row['valueNumber'])) echo $row['valueNumber'] . " " . $row['unit'];
|
||||
if (!is_null($row['valueBool'])) echo $row['valueBool'] ? "Ja" : "Nein";
|
||||
echo "</p>";
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user