Produktseite: Bildleiste im Modus „neu“

Das Produktbild steht groß, darunter die Vorschaubilder als Knöpfe zum Umschalten. Die Demodaten geben dem Probierset vier weitere Bilder.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

3 files changed, 40 insertions, 11 deletions

diff --git a/views/css/wpsg-theme.css b/views/css/wpsg-theme.css
index 94cbf88..23f6942 100644
--- a/views/css/wpsg-theme.css
+++ b/views/css/wpsg-theme.css
@@ -321,6 +321,12 @@
 .wpsg-product :where(.wpsg-product__media) { flex:1 1 22rem; min-width:0; float:none; margin:0; }
 .wpsg-product :where(.wpsg-product__media .wpsg_produkt_produktbilder) { max-width:none; }
 .wpsg-product :where(.wpsg-product__details) { flex:1 1 20rem; min-width:0; }
+.wpsg-product :where(.wpsg-product__image) { display:block; }
+.wpsg-product :where(.wpsg-product__image img) { display:block; width:100%; height:auto; border-radius:var(--wpsg-radius); }
+.wpsg-product :where(.wpsg-product__thumbs) { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:0.75em; margin:0.75em 0 0; padding:0; list-style:none; }
+.wpsg-product :where(.wpsg-product__thumb) { display:block; width:100%; padding:0; border:0; border-radius:var(--wpsg-radius); background:none; cursor:pointer; min-height:44px; }
+.wpsg-product :where(.wpsg-product__thumb img) { display:block; width:100%; height:auto; aspect-ratio:1 / 1; object-fit:cover; border-radius:var(--wpsg-radius); }
+.wpsg-product :where(.wpsg-product__thumb[aria-pressed="true"]) { outline:2px solid var(--wpsg-color-accent); outline-offset:2px; }
 .wpsg-product :where(.wpsg-product__details .wpsg_producttitle) { margin-top:0; }
 .wpsg-product :where(.wpsg-product__offer) { display:flex; flex-direction:column; gap:0.25em; margin:0.75em 0; }
 .wpsg-product :where(.wpsg-product__price) { font-size:1.75em; font-weight:700; line-height:1.2; }
diff --git a/views/js/frontend.js b/views/js/frontend.js
index 98b9799..bfae2ea 100644
--- a/views/js/frontend.js
+++ b/views/js/frontend.js
@@ -224,4 +224,20 @@
 		value = value.toString().split('e');

 		return +(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp));

 

-	}
\ No newline at end of file
+	}

+

+	/**

+	 * Bildleiste der Produktseite im Modus „neu“: zeigt das gewählte Bild groß (Punkt 8.2)

+	 */

+	document.addEventListener('click', function(event) {

+

+		var thumb = event.target.closest('.wpsg-product__thumb');

+		if (!thumb) return;

+

+		var media = thumb.closest('.wpsg-product__media');

+		var index = thumb.getAttribute('data-wpsg-image');

+

+		media.querySelectorAll('.wpsg-product__image').forEach(function(image) { image.style.display = ((image.getAttribute('data-wpsg-image') === index)?'':'none'); });

+		media.querySelectorAll('.wpsg-product__thumb').forEach(function(button) { button.setAttribute('aria-pressed', ((button === thumb)?'true':'false')); });

+

+	} );

diff --git a/views/produktseite/produkt.phtml b/views/produktseite/produkt.phtml
index 09140d0..8280972 100644
--- a/views/produktseite/produkt.phtml
+++ b/views/produktseite/produkt.phtml
@@ -51,28 +51,35 @@
 
 		?>
 
-		<?php if (wpsg_isSizedArray($arAttachmentIDsAll)) { ?>
+		<?php if (wpsg_isSizedArray($arAttachmentIDsAll)) { $nImages = sizeof($arAttachmentIDsAll); ?>
 		<div class="wpsg_productimages wpsg-product__media">
 
-			<div class="wpsg_produkt_produktbilder">
+			<?php /* Großes Bild, die übrigen verborgen für die Lightbox; darunter die Bildleiste (Punkt 8.2) */ ?>
+			<div class="wpsg_produkt_produktbilder wpsg-product__gallery">
 
-				<?php if (sizeof($arAttachmentIDsAll) > 0) { for ($i = 0; $i < sizeof($arAttachmentIDsAll); $i ++) { ?>
+				<?php foreach ($arAttachmentIDsAll as $i => $attachment_id) { ?>
 
 					<?php /* URL für die Lightbox */ ?>
-					<?php $att = wp_get_attachment_image_src($arAttachmentIDsAll[$i], array(800, 600), false); ?>
+					<?php $att = wp_get_attachment_image_src($attachment_id, 'large', false); ?>
 
-					<meta itemprop="image" content="<?php echo $att[0]; ?>" />
-
-					<a <?php if ($arAttachmentIDsAll[$i] != $arAttachmentID) echo 'style="display:none;"'; ?> rel="gallery-wpsg-<?php echo $this->getTemplateIndex(); ?>" title="<?php echo $oProduct->getProductName(); ?>" href="<?php echo $att[0]; ?>" data-fslightbox="<?php echo $this->getTemplateIndex(); ?>">
-
-						<?php echo wp_get_attachment_image($arAttachmentIDsAll[$i], array(300, 300), false, array()); ?>
+					<meta itemprop="image" content="<?php echo esc_url((string)($att[0]??'')); ?>" />
 
+					<a class="wpsg-product__image" <?php if ($attachment_id != $arAttachmentID) echo 'style="display:none;"'; ?> rel="gallery-wpsg-<?php echo $this->getTemplateIndex(); ?>" title="<?php echo esc_attr($oProduct->getProductName()); ?>" href="<?php echo esc_url((string)($att[0]??'')); ?>" data-fslightbox="<?php echo $this->getTemplateIndex(); ?>" data-wpsg-image="<?php echo intval($i); ?>">
+						<?php echo wp_get_attachment_image($attachment_id, 'large', false, ['sizes' => '(min-width: 800px) 50vw, 100vw']); ?>
 					</a>
 
-				<?php } } ?>
+				<?php } ?>
 
 			</div>
 
+			<?php if ($nImages > 1) { ?>
+			<ul class="wpsg-product__thumbs">
+				<?php foreach ($arAttachmentIDsAll as $i => $attachment_id) { ?>
+				<li><button type="button" class="wpsg-product__thumb" data-wpsg-image="<?php echo intval($i); ?>" aria-pressed="<?php echo (($attachment_id == $arAttachmentID)?'true':'false'); ?>" aria-label="<?php /* translators: 1: Nummer des Bildes, 2: Anzahl */ echo esc_attr(sprintf(__('Bild %1$d von %2$d anzeigen', 'wpsg'), $i + 1, $nImages)); ?>"><?php echo wp_get_attachment_image($attachment_id, 'thumbnail', false, ['alt' => '']); ?></button></li>
+				<?php } ?>
+			</ul>
+			<?php } ?>
+
 		</div>
 		<?php } ?>
 		<?php /* Block für die Produktbilder ENDE */ ?>