From bdc53ce840b142892ae384d96e2257f84611b600 Mon Sep 17 00:00:00 2001
From: Roger Rehnelt <noreply@maennchen1.de>
Date: Sat, 3 Oct 2026 18:15:00 +0200
Subject: Produktfilter: Leiste mit Sortierung und Kategorie, einheitliche
 Abstände
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Die Leiste über den Produktkacheln hat Sortierung und im Sortiment eine Kategorieauswahl; Felder gleich hoch und auf einer Grundlinie, am Handy unter einem umrandeten Knopf mit Zahl der aktiven Filter. Ohne Treffer nennt der Hinweis den Filter.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 views/mods/mod_productview/productview.js          | 36 ++++++++++++++++++
 .../mods/mod_productview/productview_filter.phtml  | 43 ++++++++++++++++++----
 2 files changed, 72 insertions(+), 7 deletions(-)

(limited to 'views/mods')

diff --git a/views/mods/mod_productview/productview.js b/views/mods/mod_productview/productview.js
index fc58ec8..df33d92 100644
--- a/views/mods/mod_productview/productview.js
+++ b/views/mods/mod_productview/productview.js
@@ -175,6 +175,40 @@
 
 	}
 
+	// Zahl der aktiven Filter im Knopf „Filter“ und „Filter zurücksetzen“ der Leiste; der Filter bleibt beim Tauschen stehen
+	function updateBar( form ) {
+
+		const badge = form.querySelector( '.wpsg-pvf__badge' );
+		const reset = form.querySelector( '.wpsg-pvf__toggle .wpsg-pvf__reset' );
+		if ( !badge && !reset ) return;
+
+		const groups = {};
+
+		new FormData( form ).forEach( function( v, name ) {
+
+			if ( v === '' ) return;
+
+			const m = name.match( /^pvf\[(variants|attributs)\]\[(\d+)\]/ );
+
+			if ( name === 'pvc' ) groups.cat = true;
+			else if ( /^pvf\[price_(min|max)\]$/.test( name ) ) groups.price = true;
+			else if ( m ) groups[ m[ 1 ] + m[ 2 ] ] = true;
+
+		} );
+
+		const n = Object.keys( groups ).length;
+
+		if ( badge ) {
+
+			badge.hidden = ( n === 0 );
+			badge.querySelector( '.wpsg-pvf__badge-count' ).textContent = String( n );
+
+		}
+
+		if ( reset ) reset.hidden = ( n === 0 );
+
+	}
+
 	function applyFilter() {
 
 		const form = document.getElementById( 'wpsg_mod_productview_filter' );
@@ -194,6 +228,8 @@
 		boxes.forEach( function( box ) { refresh( box, { filter: values, page: 1 }, url, false ); } );
 		if ( lists.length ) refreshLists( lists, url );
 
+		updateBar( form );
+
 		history.pushState( { wpsgPv: true }, '', url );
 
 		return true;
diff --git a/views/mods/mod_productview/productview_filter.phtml b/views/mods/mod_productview/productview_filter.phtml
index 1cf98da..9341d53 100644
--- a/views/mods/mod_productview/productview_filter.phtml
+++ b/views/mods/mod_productview/productview_filter.phtml
@@ -25,16 +25,37 @@
 	<input type="hidden" name="<?php echo esc_attr($param); ?>" value="<?php echo esc_attr($value); ?>" />
 	<?php } ?>
 
-	<?php /* Leiste über den Produktkacheln: am Handy unter „Filter“ zugeklappt (productview.js), breit offen */ $bBar = (($this->view['wpsg_mod_productview_filter']['bar']??false) === true); ?>
+	<?php /* Leiste über den Produktkacheln: am Handy unter „Filter“ zugeklappt (productview.js), breit offen */ $bBar = (($this->view['wpsg_mod_productview_filter']['bar']??false) === true); $nActive = intval($this->view['wpsg_mod_productview_filter']['active']??0); ?>
 	<?php if ($bBar) { ?>
 	<details class="wpsg-pvf__toggle" open>
-	<summary class="wpsg-pvf__summary wpsg_button<?php echo wpsg_button_class(); ?>"><?php echo esc_html__('Filter', 'wpsg'); ?></summary>
+	<summary class="wpsg-pvf__summary"><?php echo esc_html__('Filter', 'wpsg'); ?><span class="wpsg-pvf__badge"<?php if ($nActive === 0) echo ' hidden'; ?>><span class="screen-reader-text">, </span><span class="wpsg-pvf__badge-count"><?php echo $nActive; ?></span><span class="screen-reader-text"> <?php echo esc_html__('aktiv', 'wpsg'); ?></span></span></summary>
 	<div class="wpsg-pvf__fields">
 	<?php } ?>
 
 	<?php foreach ($this->view['showFilter'] as $filter) { ?>
 
-		<?php if ($filter['type'] === 'catfilter') { ?>
+		<?php if ($filter['type'] === 'catselect') { ?>
+		<div class="wpsg-pvf__item wpsg-pvf__select wpsg-pvf__catselect">
+			<label class="wpsg-pvf__title" for="wpsg_pvf_cat"><?php echo esc_html__('Kategorie', 'wpsg'); ?></label>
+			<select id="wpsg_pvf_cat" name="pvc">
+				<option value=""><?php echo esc_html__('Alle Kategorien', 'wpsg'); ?></option>
+				<?php foreach ($filter['cats'] as $arCat) { ?>
+				<option value="<?php echo intval($arCat['id']); ?>" <?php selected(intval($filter['value']), intval($arCat['id'])); ?>><?php echo esc_html($arCat['label']); ?></option>
+				<?php } ?>
+			</select>
+		</div>
+
+		<?php } else if ($filter['type'] === 'sort') { ?>
+		<div class="wpsg-pvf__item wpsg-pvf__select wpsg-pvf__sort">
+			<label class="wpsg-pvf__title" for="wpsg_pvf_sort"><?php echo esc_html__('Sortierung', 'wpsg'); ?></label>
+			<select id="wpsg_pvf_sort" name="pvs">
+				<?php $i = 0; foreach ($filter['orders'] as $key => $label) { /* Vorgabe ohne Wert, damit sie nicht in der Adresse steht */ ?>
+				<option value="<?php echo (($i ++ === 0)?'':esc_attr($key)); ?>" <?php selected($filter['value'], $key); ?>><?php echo esc_html($label); ?></option>
+				<?php } ?>
+			</select>
+		</div>
+
+		<?php } else if ($filter['type'] === 'catfilter') { ?>
 		<nav class="wpsg-pvf__item wpsg-pvf__cat" aria-label="<?php echo esc_attr__('Produktkategorie', 'wpsg'); ?>">
 			<h2 class="wpsg-pvf__title"><?php echo esc_html__('Produktkategorie', 'wpsg'); ?></h2>
 			<ul>
@@ -47,14 +68,17 @@
 		<?php } else if ($filter['type'] === 'pricefilter') { ?>
 		<fieldset class="wpsg-pvf__item wpsg-pvf__price">
 			<legend class="wpsg-pvf__title"><?php echo esc_html__('Preis', 'wpsg'); ?></legend>
-			<label><span><?php echo esc_html__('von', 'wpsg'); ?></span> <input type="number" step="0.01" min="0" name="pvf[price_min]" value="<?php echo esc_attr((string)($arValues['price_min']??'')); ?>" placeholder="<?php echo esc_attr(wpsg_ff($filter['min'])); ?>" /></label>
-			<label><span><?php echo esc_html__('bis', 'wpsg'); ?></span> <input type="number" step="0.01" min="0" name="pvf[price_max]" value="<?php echo esc_attr((string)($arValues['price_max']??'')); ?>" placeholder="<?php echo esc_attr(wpsg_ff($filter['max'])); ?>" /></label>
-			<span class="wpsg-pvf__unit"><?php echo esc_html($currency); ?></span>
+			<div class="wpsg-pvf__options">
+				<label><span><?php echo esc_html__('von', 'wpsg'); ?></span> <input type="number" step="0.01" min="0" name="pvf[price_min]" value="<?php echo esc_attr((string)($arValues['price_min']??'')); ?>" placeholder="<?php echo esc_attr(wpsg_ff($filter['min'])); ?>" /></label>
+				<label><span><?php echo esc_html__('bis', 'wpsg'); ?></span> <input type="number" step="0.01" min="0" name="pvf[price_max]" value="<?php echo esc_attr((string)($arValues['price_max']??'')); ?>" placeholder="<?php echo esc_attr(wpsg_ff($filter['max'])); ?>" /></label>
+				<span class="wpsg-pvf__unit"><?php echo esc_html($currency); ?></span>
+			</div>
 		</fieldset>
 
 		<?php } else if ($filter['type'] === 'productvariants') { $variant = $filter['variant']; ?>
 		<fieldset class="wpsg-pvf__item wpsg-pvf__variant wpsg-pvf__variant--<?php echo (($filter['displayMode'] === wpsg_mod_productview::DISPLAYMODE_FILTER_SMALL)?'small':'checkbox'); ?>" data-group="variants" data-id="<?php echo intval($variant['id']); ?>">
 			<legend class="wpsg-pvf__title"><?php echo esc_html($variant['name']); ?></legend>
+			<div class="wpsg-pvf__options">
 			<?php foreach ($filter['variation'] as $variation) { $label = (wpsg_isSizedString($variation['shortname'])?$variation['shortname']:$variation['name']); ?>
 			<label class="wpsg-pvf__option">
 				<input type="checkbox" name="pvf[variants][<?php echo intval($variant['id']); ?>][]" value="<?php echo intval($variation['id']); ?>" <?php checked($checked('variants', intval($variant['id']), intval($variation['id']))); ?> />
@@ -65,17 +89,20 @@
 				<?php } ?>
 			</label>
 			<?php } ?>
+			</div>
 		</fieldset>
 
 		<?php } else if ($filter['type'] === 'productattributs') { $attribute = $filter['attribute']; ?>
 		<fieldset class="wpsg-pvf__item wpsg-pvf__attribute" data-group="attributs" data-id="<?php echo intval($attribute['id']); ?>">
 			<legend class="wpsg-pvf__title"><?php echo esc_html($attribute['name']); ?></legend>
+			<div class="wpsg-pvf__options">
 			<?php foreach ($attribute['auswahl'] as $index => $choice) { ?>
 			<label class="wpsg-pvf__option">
 				<input type="checkbox" name="pvf[attributs][<?php echo intval($attribute['id']); ?>][]" value="<?php echo esc_attr((string)$index); ?>" <?php checked($checked('attributs', intval($attribute['id']), (string)$index)); ?> />
 				<span><?php echo esc_html($choice); ?></span>
 			</label>
 			<?php } ?>
+			</div>
 		</fieldset>
 		<?php } ?>
 
@@ -83,7 +110,9 @@
 
 	<div class="wpsg-pvf__actions">
 		<button type="submit" class="wpsg_button<?php echo wpsg_button_class(); ?>"><?php echo esc_html__('Filtern', 'wpsg'); ?></button>
-		<?php if (wpsg_isSizedArray($arValues)) { ?>
+		<?php if ($bBar) { /* Immer im Markup, productview.js blendet nach dem Filtern ein und aus */ ?>
+		<a class="wpsg-pvf__reset" href="<?php echo esc_url($this->view['wpsg_mod_productview_filter']['url']); ?>"<?php if ($nActive === 0) echo ' hidden'; ?>><?php echo esc_html__('Filter zurücksetzen', 'wpsg'); ?></a>
+		<?php } else if (wpsg_isSizedArray($arValues)) { ?>
 		<a class="wpsg-pvf__reset" href="<?php echo esc_url($this->view['wpsg_mod_productview_filter']['url']); ?>"><?php echo esc_html__('Filter zurücksetzen', 'wpsg'); ?></a>
 		<?php } ?>
 	</div>
-- 
cgit v1.2.3