Produktansichten: Modul aus ShopThemeOne im Plugin

[wpsg_productview] und [wpsg_productview_filter] kommen ins Plugin; Seite, Sortierung, Ansicht und Filter stehen in der Adresse, Ajax übernimmt nur diese Werte. Ein gleichnamiges Modul im Theme bricht den Shop nicht mehr ab.

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

2 files changed, 95 insertions, 2 deletions

diff --git a/views/css/frontend.css b/views/css/frontend.css
index c2354f3..eff9f08 100644
--- a/views/css/frontend.css
+++ b/views/css/frontend.css
@@ -724,3 +724,50 @@ html body .wpsg_product_garan_wrap a.wpsg_product_garan img { display:block; max
 @media (max-width:600px) {

 	.wpsg-block-product-list .wpsg-product-list__items { grid-template-columns:repeat(min(var(--wpsg-columns, 3), 2), minmax(0, 1fr)); }

 }

+/* Produktansichten (Modul, Vorlage seit 4.6.1, nur neue Klassen) */

+.wpsg-pv .wpsg-pv__head { display:flex; flex-wrap:wrap; align-items:center; gap:0.5em 1rem; margin-bottom:1rem; }

+.wpsg-pv .wpsg-pv__title { flex:1 1 100%; margin:0; }

+.wpsg-pv .wpsg-pv__info { flex:1 1 auto; margin:0; font-size:0.8em; opacity:0.8; }

+.wpsg-pv .wpsg-pv__order { display:flex; flex-wrap:wrap; align-items:center; gap:0.5em; margin:0; }

+.wpsg-pv .wpsg-pv__order label { display:flex; flex-wrap:wrap; align-items:center; gap:0.5em; }

+.wpsg-pv .wpsg-pv__modes { display:flex; gap:0.75em; }

+.wpsg-pv .wpsg-pv__modes a.active { font-weight:bold; text-decoration:none; }

+.wpsg-pv .wpsg-pv__items { display:grid; grid-template-columns:repeat(var(--wpsg-columns, 4), minmax(0, 1fr)); gap:calc(1rem * 2) 1rem; list-style:none; margin:0; padding:0; }

+.wpsg-pv .wpsg-pv__item { display:flex; flex-direction:column; gap:0.5em; min-width:0; margin:0; padding:0; }

+.wpsg-pv .wpsg-pv__image img { display:block; width:100%; height:auto; }

+.wpsg-pv .wpsg-pv__body { display:flex; flex-direction:column; gap:0.35em; flex:1 1 auto; min-width:0; }

+.wpsg-pv .wpsg-pv__body > p, .wpsg-pv .wpsg-pv__description { margin:0; }

+.wpsg-pv .wpsg-pv__name { margin:0; font-size:1em; line-height:1.3; overflow-wrap:anywhere; hyphens:auto; }

+.wpsg-pv .wpsg-pv__price { font-size:1.2em; }

+.wpsg-pv .wpsg-pv__price-old { margin-left:0.5em; font-size:0.8em; opacity:0.8; }

+.wpsg-pv .wpsg-pv__detailname, .wpsg-pv .wpsg-pv__taxnote, .wpsg-pv .wpsg-pv__baseprice, .wpsg-pv .wpsg-pv__stock, .wpsg-pv .wpsg-pv__deliverytime, .wpsg-pv .wpsg-pv__weight { font-size:0.8em; opacity:0.8; }

+.wpsg-pv .wpsg-pv__description { display:none; }

+.wpsg-pv .wpsg-pv__action { display:flex; flex-direction:column; gap:0.5em; margin-top:auto; padding-top:0.5em; }

+.wpsg-pv .wpsg-pv__action form { margin:0; }

+.wpsg-pv .wpsg-pv__action .wpsg_button { display:block; width:100%; margin:0; text-align:center; box-sizing:border-box; }

+.wpsg-pv--list .wpsg-pv__items { grid-template-columns:minmax(0, 1fr); }

+.wpsg-pv--list .wpsg-pv__item { flex-direction:row; gap:1rem; padding-bottom:1rem; border-bottom:1px solid #EAEAEA; }

+.wpsg-pv--list .wpsg-pv__image { flex:0 0 min(30%, 220px); }

+.wpsg-pv--list .wpsg-pv__description { display:block; }

+.wpsg-pv--list .wpsg-pv__action .wpsg_button { display:inline-block; width:auto; }

+.wpsg-pv--list .wpsg-pv__action { flex-direction:row; flex-wrap:wrap; }

+.wpsg-pv .wpsg-pv__pager { display:flex; flex-wrap:wrap; justify-content:center; gap:0.5em; margin-top:calc(1rem * 2); }

+.wpsg-pv .wpsg-pv__pager a, .wpsg-pv .wpsg-pv__pager span { min-width:2em; padding:0.25em 0.5em; text-align:center; border:1px solid #CCCCCC; border-radius:3px; }

+.wpsg-pv .wpsg-pv__pager span[aria-current] { font-weight:bold; background-color:#F5F5F5; }

+.wpsg-pv .wpsg-pv__pager .wpsg-pv__gap { border-color:transparent; }

+.wpsg-pv.is-loading { opacity:0.5; pointer-events:none; }

+.wpsg-pvf .wpsg-pvf__item { margin:0 0 1rem 0; padding:0; border:0; min-width:0; }

+.wpsg-pvf .wpsg-pvf__title { margin:0 0 0.5em 0; padding:0; font-size:1em; font-weight:bold; }

+.wpsg-pvf .wpsg-pvf__item ul { margin:0; padding-left:1.2em; }

+.wpsg-pvf .wpsg-pvf__price { display:flex; flex-wrap:wrap; align-items:center; gap:0.5em; }

+.wpsg-pvf .wpsg-pvf__price label { display:flex; align-items:center; gap:0.35em; }

+.wpsg-pvf .wpsg-pvf__price input { width:7em; }

+.wpsg-pvf .wpsg-pvf__option { display:flex; align-items:center; gap:0.5em; margin:0.25em 0; }

+.wpsg-pvf .wpsg-pvf__color { display:inline-block; width:1.2em; height:1.2em; border:1px solid #CCCCCC; border-radius:3px; }

+.wpsg-pvf .wpsg-pvf__actions { display:flex; flex-wrap:wrap; align-items:center; gap:1rem; }

+

+@media (max-width:600px) {

+	.wpsg-pv .wpsg-pv__items { grid-template-columns:repeat(min(var(--wpsg-columns, 4), 2), minmax(0, 1fr)); }

+	.wpsg-pv--list .wpsg-pv__items { grid-template-columns:minmax(0, 1fr); }

+	.wpsg-pv--list .wpsg-pv__item { flex-direction:column; }

+}

diff --git a/views/css/wpsg-theme.css b/views/css/wpsg-theme.css
index a0403e7..eef6abf 100644
--- a/views/css/wpsg-theme.css
+++ b/views/css/wpsg-theme.css
@@ -72,7 +72,7 @@
  * Eingabefelder: schlichter Rückfall für Themes, die Felder nicht gestalten.
  * Gestaltet das Theme input/select/textarea, gewinnt es.
  */
-:where(.wpsg, .wpsg_productform, .wpsg_mod_productindex, .wpsg_basket_widget, .wpsg_mod_kundenverwaltung_widget, #wpsg_calc_layer) :where(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="date"], input[type="search"], input:not([type]), select, textarea) {
+:where(.wpsg, .wpsg_productform, .wpsg_mod_productindex, .wpsg_basket_widget, .wpsg_mod_kundenverwaltung_widget, #wpsg_calc_layer, .wpsg-pv, .wpsg-pvf) :where(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="date"], input[type="search"], input:not([type]), select, textarea) {
 	font:inherit;
 	color:inherit;
 	padding:var(--wpsg-field-padding);
@@ -81,7 +81,7 @@
 	background-color:var(--wpsg-field-background);
 	max-width:100%;
 }
-:where(.wpsg, .wpsg_productform, .wpsg_mod_productindex, .wpsg_basket_widget, .wpsg_mod_kundenverwaltung_widget, #wpsg_calc_layer) :where(select) { background-color:var(--wpsg-color-background); color:var(--wpsg-color-foreground); height:auto; }
+:where(.wpsg, .wpsg_productform, .wpsg_mod_productindex, .wpsg_basket_widget, .wpsg_mod_kundenverwaltung_widget, #wpsg_calc_layer, .wpsg-pv, .wpsg-pvf) :where(select) { background-color:var(--wpsg-color-background); color:var(--wpsg-color-foreground); height:auto; }
 :where(.wpsg, .wpsg_productform) :where(textarea) { resize:vertical; }
 
 /*
@@ -587,6 +587,48 @@ html body .wpsg_product_garan_wrap a.wpsg_product_garan img { display:block; max
 .wpsg-block-mini-cart :where(.wpsg-mini-cart__content) { display:inline-flex; gap:0.5em; }
 .wpsg-block-mini-cart :where(.wpsg-mini-cart__sum) { font-weight:bold; }
 
+/* Produktansichten (Modul, Vorlage seit 4.6.1) */
+.wpsg-pv :where(.wpsg-pv__head) { display:flex; flex-wrap:wrap; align-items:center; gap:0.5em var(--wpsg-gap); margin-bottom:var(--wpsg-gap); }
+.wpsg-pv :where(.wpsg-pv__title) { flex:1 1 100%; margin:0; }
+.wpsg-pv :where(.wpsg-pv__info) { flex:1 1 auto; margin:0; font-size:var(--wpsg-font-size-small); opacity:var(--wpsg-muted-opacity); }
+.wpsg-pv :where(.wpsg-pv__order) { display:flex; flex-wrap:wrap; align-items:center; gap:0.5em; margin:0; }
+.wpsg-pv :where(.wpsg-pv__order label) { display:flex; flex-wrap:wrap; align-items:center; gap:0.5em; }
+.wpsg-pv :where(.wpsg-pv__modes) { display:flex; gap:0.75em; }
+.wpsg-pv :where(.wpsg-pv__modes a.active) { font-weight:bold; text-decoration:none; }
+.wpsg-pv :where(.wpsg-pv__items) { display:grid; grid-template-columns:repeat(var(--wpsg-columns, 4), minmax(0, 1fr)); gap:calc(var(--wpsg-gap) * 2) var(--wpsg-gap); list-style:none; margin:0; padding:0; }
+.wpsg-pv :where(.wpsg-pv__item) { display:flex; flex-direction:column; gap:0.5em; min-width:0; margin:0; padding:0; }
+.wpsg-pv :where(.wpsg-pv__image img) { display:block; width:100%; height:auto; }
+.wpsg-pv :where(.wpsg-pv__body) { display:flex; flex-direction:column; gap:0.35em; flex:1 1 auto; min-width:0; }
+.wpsg-pv :where(.wpsg-pv__body > p, .wpsg-pv__description) { margin:0; }
+.wpsg-pv :where(.wpsg-pv__name) { margin:0; font-size:1em; line-height:1.3; overflow-wrap:anywhere; hyphens:auto; }
+.wpsg-pv :where(.wpsg-pv__price) { font-size:1.2em; }
+.wpsg-pv :where(.wpsg-pv__price-old) { margin-left:0.5em; font-size:0.8em; opacity:var(--wpsg-muted-opacity); }
+.wpsg-pv :where(.wpsg-pv__detailname, .wpsg-pv__taxnote, .wpsg-pv__baseprice, .wpsg-pv__stock, .wpsg-pv__deliverytime, .wpsg-pv__weight) { font-size:var(--wpsg-font-size-small); opacity:var(--wpsg-muted-opacity); }
+.wpsg-pv :where(.wpsg-pv__description) { display:none; }
+.wpsg-pv :where(.wpsg-pv__action) { display:flex; flex-direction:column; gap:0.5em; margin-top:auto; padding-top:0.5em; }
+.wpsg-pv :where(.wpsg-pv__action form) { margin:0; }
+.wpsg-pv :where(.wpsg-pv__action .wpsg_button) { display:block; width:100%; margin:0; text-align:center; box-sizing:border-box; }
+.wpsg-pv--list :where(.wpsg-pv__items) { grid-template-columns:minmax(0, 1fr); }
+.wpsg-pv--list :where(.wpsg-pv__item) { flex-direction:row; gap:var(--wpsg-gap); padding-bottom:var(--wpsg-gap); border-bottom:1px solid var(--wpsg-color-line-soft); }
+.wpsg-pv--list :where(.wpsg-pv__image) { flex:0 0 min(30%, 220px); }
+.wpsg-pv--list :where(.wpsg-pv__description) { display:block; }
+.wpsg-pv--list :where(.wpsg-pv__action .wpsg_button) { display:inline-block; width:auto; }
+.wpsg-pv--list :where(.wpsg-pv__action) { flex-direction:row; flex-wrap:wrap; }
+.wpsg-pv :where(.wpsg-pv__pager) { display:flex; flex-wrap:wrap; justify-content:center; gap:0.5em; margin-top:calc(var(--wpsg-gap) * 2); }
+.wpsg-pv :where(.wpsg-pv__pager a, .wpsg-pv__pager span) { min-width:2em; padding:0.25em 0.5em; text-align:center; border:1px solid var(--wpsg-color-line); border-radius:var(--wpsg-radius); }
+.wpsg-pv :where(.wpsg-pv__pager span[aria-current]) { font-weight:bold; background-color:var(--wpsg-color-surface); }
+.wpsg-pv :where(.wpsg-pv__pager .wpsg-pv__gap) { border-color:transparent; }
+.wpsg-pv.is-loading { opacity:0.5; pointer-events:none; }
+.wpsg-pvf :where(.wpsg-pvf__item) { margin:0 0 var(--wpsg-gap) 0; padding:0; border:0; min-width:0; }
+.wpsg-pvf :where(.wpsg-pvf__title) { margin:0 0 0.5em 0; padding:0; font-size:1em; font-weight:bold; }
+.wpsg-pvf :where(.wpsg-pvf__item ul) { margin:0; padding-left:1.2em; }
+.wpsg-pvf :where(.wpsg-pvf__price) { display:flex; flex-wrap:wrap; align-items:center; gap:0.5em; }
+.wpsg-pvf :where(.wpsg-pvf__price label) { display:flex; align-items:center; gap:0.35em; }
+.wpsg-pvf :where(.wpsg-pvf__price input) { width:7em; }
+.wpsg-pvf :where(.wpsg-pvf__option) { display:flex; align-items:center; gap:0.5em; margin:0.25em 0; }
+.wpsg-pvf :where(.wpsg-pvf__color) { display:inline-block; width:1.2em; height:1.2em; border:1px solid var(--wpsg-color-line); border-radius:var(--wpsg-radius); }
+.wpsg-pvf :where(.wpsg-pvf__actions) { display:flex; flex-wrap:wrap; align-items:center; gap:var(--wpsg-gap); }
+
 /*
  * Aufbau mit Klassen-Spezifität: Ausblenden, Ein- und Überblendungen. Allgemeine Regeln der Themes wie
  * form input[type=radio] { display:inline-block } dürfen versteckte Bausteine nicht einblenden.
@@ -611,6 +653,10 @@ html body .wpsg_product_garan_wrap a.wpsg_product_garan img { display:block; max
 /* Schmale Breiten */
 @media (max-width:600px) {
 
+	.wpsg-pv :where(.wpsg-pv__items) { grid-template-columns:repeat(min(var(--wpsg-columns, 4), 2), minmax(0, 1fr)); }
+	.wpsg-pv--list :where(.wpsg-pv__items) { grid-template-columns:minmax(0, 1fr); }
+	.wpsg-pv--list :where(.wpsg-pv__item) { flex-direction:column; }
+
 	.wpsg-block-product-list :where(.wpsg-product-list__items) { grid-template-columns:repeat(min(var(--wpsg-columns, 3), 2), minmax(0, 1fr)); }
 
 	.wpsg_mod_productindex_grid :where(.wpsg_mod_productindex_product) { width:50%; }