Produktseite: Artikelnummer als Liste, Texte mit Überschrift im Modus „neu“

Artikelnummer und Produktcodes stehen als Liste unter dem Knopf. Langtext, Zusätzliche Informationen und Lieferumfang stehen je in einem Abschnitt mit H2.

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

2 files changed, 24 insertions, 66 deletions

diff --git a/views/css/wpsg-theme.css b/views/css/wpsg-theme.css
index 917ad01..39b1ba2 100644
--- a/views/css/wpsg-theme.css
+++ b/views/css/wpsg-theme.css
@@ -344,6 +344,9 @@
 .wpsg-product :where(.wpsg-product__amount) { display:flex; flex-direction:column; gap:0.3em; }
 .wpsg-product :where(.wpsg-product__amount > label) { margin:0; }
 .wpsg-product .wpsg-product__buy .wpsg_add_basket { flex:1 1 12em; min-height:44px; }
+.wpsg-product :where(.wpsg-product__facts) { margin:var(--wpsg-gap) 0 0; padding:var(--wpsg-gap) 0 0; list-style:none; border-top:1px solid var(--wpsg-color-line); display:flex; flex-direction:column; gap:0.25em; opacity:var(--wpsg-muted-opacity); }
+.wpsg-product :where(.wpsg-product__section) { margin-top:calc(var(--wpsg-gap) * 2); }
+.wpsg-product :where(.wpsg-product__section-title) { margin:0 0 0.5em; }
 .wpsg_productform :where(.wpsg_product_layer) { position:absolute; left:0; top:0; width:100%; height:100%; background-color:var(--wpsg-color-surface); padding:0.75em; margin:-0.75em; box-sizing:content-box; }
 .wpsg_productform :where(.wpsg_product_layer img) { position:absolute; left:50%; margin-left:-8px; top:50%; margin-top:-5px; }
 .wpsg_product_deliverytime_holiday { padding:10px; border-left:4px solid var(--wpsg-color-notice); background-color:var(--wpsg-color-surface); }
diff --git a/views/produktseite/produkt.phtml b/views/produktseite/produkt.phtml
index 3fdce52..13e6b8a 100644
--- a/views/produktseite/produkt.phtml
+++ b/views/produktseite/produkt.phtml
@@ -89,27 +89,6 @@
 		<?php } ?>
 		<?php /* Block für die Produktbilder ENDE */ ?>
 
-		<?php if ($this->get_option('wpsg_showArticelnumber') == '1') { ?>
-		<div class="wpsg_artikelnummer">
-			<?php echo __('Artikelnummer', 'wpsg'); ?>: <span class="wpsg_anr"><?php echo wpsg_hspc($oProduct->getNr()); ?></span><br />
-		</div>
-		<?php } ?>
-
-		<?php $arProductCodes = $oProduct->getAllProductCodes(); ?>
-		<?php if (sizeof($arProductCodes) > 0) { ?>
-			<div class="product_code_wrap">
-			<?php foreach ($arProductCodes as $product_code) { ?>
-				<?php if ($product_code !== null) { ?>
-
-					<div class="product_code <?php echo $product_code['code_key']; ?>">
-						<span class="label"><?php echo $product_code['label']; ?></span>: <span class="code"><?php echo $product_code['code']; ?></span>
-					</div>
-
-				<?php } ?>
-			<?php } ?>
-			</div>
-		<?php } ?>
-
 		<?php /* Preis, Preiszeile und Lieferzeit (Punkt 8.5) START */ ?>
 		<div class="wpsg-product__offer">
 
@@ -358,53 +337,29 @@
 			<input class="wpsg_button wpsg_add_requestlist<?php echo wpsg_button_class(); ?>" id="wpsg_add_requestlist_<?php echo $this->getTemplateIndex(); ?>" type="submit" value="<?php echo __('Auf die Anfrageliste', 'wpsg'); ?>" name="wpsg[submit_request]" />
 		<?php } ?>
 
-		<?php /* Produktlangbeschreibung START */ ?>
-		<div class="wpsg_product_informationarea">
-
-			<?php if (strlen(trim($this->view['data']['longdescription'])) > 0) { ?>
-			<div class="wpsg_product_information_large">
-				<div class="wpsg_produkt_additional_information">
-					<div itemprop="description" class="wpsg_produkt_longdescription">
-						<span><?php echo $this->view['data']['longdescription']; ?></span>
-					</div>
-				</div>
-			</div>
-			<?php } ?>
-
-		</div>
-		<?php /* Produktlangbeschreibung ENDE */ ?>
-
-		<?php /* zusätzliche Informationen START */ ?>
-		<div class="wpsg_product_informationarea">
-
-			<?php if (strlen(trim($this->view['data']['moreinfos'])) > 0) { ?>
-			<div class="wpsg_product_information_large">
-				<div class="wpsg_produkt_additional_information">
-					<div itemprop="description" class="wpsg_produkt_moreinfos">
-						<span><?php echo $this->view['data']['moreinfos']; ?></span>
-					</div>
-				</div>
-			</div>
+		<?php /* Artikelnummer und Produktcodes als Liste (Punkt 8.7) START */ ?>
+		<?php $bNr = ($this->get_option('wpsg_showArticelnumber') == '1'); $arProductCodes = $oProduct->getAllProductCodes(); ?>
+		<?php if ($bNr || sizeof($arProductCodes) > 0) { ?>
+		<ul class="wpsg-product__facts">
+			<?php if ($bNr) { ?>
+			<li class="wpsg_artikelnummer"><?php echo esc_html__('Artikelnummer', 'wpsg'); ?>: <span class="wpsg_anr"><?php echo esc_html((string)$oProduct->getNr()); ?></span></li>
 			<?php } ?>
-
-		</div>
-		<?php /* zusätzliche Informationen ENDE */ ?>
-
-		<?php /* zusätzliche Lieferumfang START */ ?>
-		<div class="wpsg_product_informationarea">
-
-			<?php if (strlen(trim($this->view['data']['moreinfos2'])) > 0) { ?>
-			<div class="wpsg_product_information_large">
-				<div class="wpsg_produkt_additional_information">
-					<div itemprop="description" class="wpsg_produkt_moreinfos2">
-						<span><?php echo $this->view['data']['moreinfos2']; ?></span>
-					</div>
-				</div>
-			</div>
+			<?php foreach ($arProductCodes as $product_code) { ?>
+			<li class="product_code <?php echo esc_attr($product_code['code_key']); ?>"><span class="label"><?php echo esc_html($product_code['label']); ?></span>: <span class="code"><?php echo esc_html($product_code['code']); ?></span></li>
 			<?php } ?>
-
-		</div>
-		<?php /* zusätzliche Lieferumfang ENDE */ ?>
+		</ul>
+		<?php } ?>
+		<?php /* Artikelnummer und Produktcodes ENDE */ ?>
+
+		<?php /* Langtext, Zusätzliche Informationen und Lieferumfang je als Abschnitt mit H2 (Punkt 8.7) START */ ?>
+		<?php foreach (['longdescription' => __('Beschreibung', 'wpsg'), 'moreinfos' => __('Zusätzliche Informationen', 'wpsg'), 'moreinfos2' => __('Lieferumfang', 'wpsg')] as $field => $title) { ?>
+		<?php if (trim((string)($this->view['data'][$field]??'')) === '') continue; $section_id = 'wpsg-product-'.$field.'-'.$this->getTemplateIndex(); ?>
+		<section class="wpsg-product__section wpsg_produkt_<?php echo esc_attr($field); ?>" aria-labelledby="<?php echo esc_attr($section_id); ?>">
+			<h2 id="<?php echo esc_attr($section_id); ?>" class="wpsg-product__section-title"><?php echo esc_html($title); ?></h2>
+			<div<?php echo (($field === 'longdescription')?' itemprop="description"':''); ?>><?php echo $this->view['data'][$field]; ?></div>
+		</section>
+		<?php } ?>
+		<?php /* Abschnitte ENDE */ ?>
 
 		<div class="wpsg_clear"></div>