diff options
Diffstat (limited to 'views/mods')
| -rw-r--r-- | views/mods/mod_productview/productview.js | 36 | ||||
| -rw-r--r-- | views/mods/mod_productview/productview_filter.phtml | 43 |
2 files changed, 72 insertions, 7 deletions
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> |