diff options
Diffstat (limited to 'views')
| -rw-r--r-- | views/css/wpsg-theme.css | 5 | ||||
| -rw-r--r-- | views/produktseite/produkt.phtml | 41 |
2 files changed, 30 insertions, 16 deletions
diff --git a/views/css/wpsg-theme.css b/views/css/wpsg-theme.css index 39b1ba2..94cbf88 100644 --- a/views/css/wpsg-theme.css +++ b/views/css/wpsg-theme.css @@ -317,6 +317,11 @@ .wpsg_productform :where(.wpsg_produkt_wrapper .wpsg_produkt_preishinweis) { font-size:0.75em; } .wpsg_productform :where(.wpsg_produkt_wrapper .wpsg_mod_productview_oldprice), .product_wrap :where(.productdetails .oldprice) { text-decoration:line-through; } .wpsg_productform :where(.wpsg_produkt_wrapper .wpsg_mod_productview_price) { font-weight:bold; } +.wpsg-product :where(.wpsg-product__main) { display:flex; flex-wrap:wrap; align-items:flex-start; gap:calc(var(--wpsg-gap) * 2.5); } +.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__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; } .wpsg-product :where(.wpsg-product__price .wpsg_mod_productview_oldprice) { margin-left:0.4em; font-size:0.6em; font-weight:400; opacity:var(--wpsg-muted-opacity); } diff --git a/views/produktseite/produkt.phtml b/views/produktseite/produkt.phtml index 13e6b8a..09140d0 100644 --- a/views/produktseite/produkt.phtml +++ b/views/produktseite/produkt.phtml @@ -26,21 +26,6 @@ <input type="hidden" name="wpsg_post_id" value="<?php echo get_the_ID(); ?>" /> <input type="hidden" name="titleDisplayed" value="<?php echo $this->titleDisplayed; ?>" /> - <div class="wpsg_produkt wpsg_product_name"> - - <?php if (!$this->titleDisplayed) { ?> - <h1 class="wpsg_producttitle"><?php echo $oProduct->getProductName(); ?></h1> - <?php if (($this->view['data']['detailname']??'') !== '' && $oProduct->getProductName() !== $this->view['data']['detailname']) { ?> - <h2 class="wpsg_productdetailtitle"><?php echo wp_kses_post($this->view['data']['detailname']); ?></h2> - <?php } ?> - <?php } ?> - - <?php $this->callMods('product_top_afterheadline', array(&$this->view['data']['id'], $this->getTemplateIndex())); ?> - - </div> - - <?php $this->callMods('product_top', array(&$this->view['data']['id'], $this->getTemplateIndex())); ?> - <div itemscope itemtype="http://schema.org/Product" class="wpsg_produkt wpsg_produkt_<?php echo $this->view['data']['id']; ?>"> <meta itemprop="name" content="<?php echo wpsg_hspc($oProduct->getProductName()); ?>" /> @@ -52,6 +37,9 @@ <?php } ?> <?php } ?> + <?php /* Zweispaltig: Bilder links, Angaben rechts; schmal untereinander (Punkt 8.1) */ ?> + <div class="wpsg-product__main"> + <?php /* Block für die Produktbilder START */ ?> <?php @@ -64,7 +52,7 @@ ?> <?php if (wpsg_isSizedArray($arAttachmentIDsAll)) { ?> - <div class="wpsg_productimages"> + <div class="wpsg_productimages wpsg-product__media"> <div class="wpsg_produkt_produktbilder"> @@ -89,6 +77,23 @@ <?php } ?> <?php /* Block für die Produktbilder ENDE */ ?> + <div class="wpsg-product__details"> + + <div class="wpsg_produkt wpsg_product_name"> + + <?php if (!$this->titleDisplayed) { ?> + <h1 class="wpsg_producttitle"><?php echo $oProduct->getProductName(); ?></h1> + <?php if (($this->view['data']['detailname']??'') !== '' && $oProduct->getProductName() !== $this->view['data']['detailname']) { ?> + <h2 class="wpsg_productdetailtitle"><?php echo wp_kses_post($this->view['data']['detailname']); ?></h2> + <?php } ?> + <?php } ?> + + <?php $this->callMods('product_top_afterheadline', array(&$this->view['data']['id'], $this->getTemplateIndex())); ?> + + </div> + + <?php $this->callMods('product_top', array(&$this->view['data']['id'], $this->getTemplateIndex())); ?> + <?php /* Preis, Preiszeile und Lieferzeit (Punkt 8.5) START */ ?> <div class="wpsg-product__offer"> @@ -351,6 +356,10 @@ <?php } ?> <?php /* Artikelnummer und Produktcodes ENDE */ ?> + </div> + </div> + <?php /* Zweispaltig 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(); ?> |