Blöcke: Produktfilter

Neuer Block Produktfilter (Preis, Varianten, Produktattribute) auf Grundlage von [wpsg_productview_filter]. Er filtert die Produktlisten und Produktansichten derselben Seite; die Auswahl steht in der Adresse, ohne JavaScript bedienbar, Anzahl für Screenreader.

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

2 files changed, 6 insertions, 0 deletions

diff --git a/views/css/frontend.css b/views/css/frontend.css
index 4ca386f..4ba7a0f 100644
--- a/views/css/frontend.css
+++ b/views/css/frontend.css
@@ -707,6 +707,8 @@ html body .wpsg_product_garan_wrap a.wpsg_product_garan img { display:block; max
 .wpsg_mod_prepayment_qrrechnung_left_amount { display:flex; flex-direction:column; }

 

 /* Blöcke: Produktliste, Mini-Warenkorb, Kundenkonto (seit 4.6.1, nur neue Klassen) */

+.wpsg-block-product-list .wpsg-product-list__count { margin:0 0 1rem; }

+.wpsg-block-product-list .wpsg-product-list__count:empty { display:none; }

 .wpsg-block-product-list .wpsg-product-list__items { display:grid; grid-template-columns:repeat(var(--wpsg-columns, 3), minmax(0, 1fr)); gap:2rem 1rem; list-style:none; margin:0; padding:0; }

 .wpsg-block-product-list .wpsg-product-list__item { display:flex; flex-direction:column; gap:0.5em; min-width:0; margin:0; padding:0; }

 .wpsg-block-product-list .wpsg-product-list__image img { display:block; width:100%; height:auto; }

@@ -765,6 +767,7 @@ html body .wpsg_product_garan_wrap a.wpsg_product_garan img { display:block; max
 .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__price label > span { min-width:1.75em; }

 .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; }

diff --git a/views/css/wpsg-theme.css b/views/css/wpsg-theme.css
index 9df1d8a..80a8279 100644
--- a/views/css/wpsg-theme.css
+++ b/views/css/wpsg-theme.css
@@ -574,6 +574,8 @@ html body .wpsg_product_garan_wrap a.wpsg_product_garan img { display:block; max
 .wpsg_overview :where(.garan_label_popup .garan_label_popup_confirm) { flex:0 0 auto; margin-top:1rem; cursor:pointer; }
 
 /* Blöcke: Produktliste, Mini-Warenkorb, Kundenkonto */
+.wpsg-block-product-list :where(.wpsg-product-list__count) { margin:0 0 var(--wpsg-gap); }
+.wpsg-block-product-list :where(.wpsg-product-list__count:empty) { display:none; }
 .wpsg-block-product-list :where(.wpsg-product-list__items) { display:grid; grid-template-columns:repeat(var(--wpsg-columns, 3), minmax(0, 1fr)); gap:calc(var(--wpsg-gap) * 2) var(--wpsg-gap); list-style:none; margin:0; padding:0; }
 .wpsg-block-product-list :where(.wpsg-product-list__item) { display:flex; flex-direction:column; gap:0.5em; min-width:0; margin:0; padding:0; }
 .wpsg-block-product-list :where(.wpsg-product-list__image img) { display:block; width:100%; height:auto; }
@@ -626,6 +628,7 @@ html body .wpsg_product_garan_wrap a.wpsg_product_garan img { display:block; max
 .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__price label > span) { min-width:1.75em; }
 .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); }