diff options
Diffstat (limited to 'views/mods')
| -rw-r--r-- | views/mods/mod_productview/productview.js | 22 | ||||
| -rw-r--r-- | views/mods/mod_productview/productview_filter.phtml | 12 |
2 files changed, 28 insertions, 6 deletions
diff --git a/views/mods/mod_productview/productview.js b/views/mods/mod_productview/productview.js index 34c0df9..fc58ec8 100644 --- a/views/mods/mod_productview/productview.js +++ b/views/mods/mod_productview/productview.js @@ -4,8 +4,9 @@ * Ohne JavaScript funktionieren Links und Formulare über die Adresse. Mit JavaScript holt das Skript die Ansicht per * Ajax (wpsg_mod=wpsg_mod_productview, wpsg_action=refresh) und schreibt den Zustand in die Adresse. Die Attribute des * Shortcodes kommen signiert aus dem Feld wpsg_atts; der Server übernimmt nur Seite, Sortierung, Ansicht und Filter. - * Produktlisten mit data-wpsg-filter (Block Produktliste) holt es mit der neuen Adresse als ganze Seite, wie ohne - * JavaScript, und tauscht ihren Inhalt; die Statuszeile bleibt stehen und sagt die neue Anzahl an. + * Produktlisten mit data-wpsg-filter (Block Produktliste, Produktkacheln) holt es mit der neuen Adresse als ganze Seite, + * wie ohne JavaScript, und tauscht ihren Inhalt; die Statuszeile und ein Filter darin bleiben stehen, damit Ansage und + * Fokus erhalten bleiben. */ ( function() { @@ -156,12 +157,13 @@ lists.forEach( function( list, i ) { - const status = list.querySelector( '.wpsg-product-list__count' ); + const status = list.querySelector( ':scope > .wpsg-product-list__count' ); + const keep = function( child ) { return child.classList.contains( 'wpsg-product-list__count' ) || child.classList.contains( 'wpsg-block-product-filter' ); }; - Array.prototype.slice.call( list.children ).forEach( function( child ) { if ( child !== status ) child.remove(); } ); - Array.prototype.slice.call( fresh[ i ].children ).forEach( function( child ) { if ( !child.classList.contains( 'wpsg-product-list__count' ) ) list.appendChild( document.importNode( child, true ) ); } ); + Array.prototype.slice.call( list.children ).forEach( function( child ) { if ( !keep( child ) ) child.remove(); } ); + Array.prototype.slice.call( fresh[ i ].children ).forEach( function( child ) { if ( !keep( child ) ) list.appendChild( document.importNode( child, true ) ); } ); - const freshStatus = fresh[ i ].querySelector( '.wpsg-product-list__count' ); + const freshStatus = fresh[ i ].querySelector( ':scope > .wpsg-product-list__count' ); if ( status && freshStatus ) status.textContent = freshStatus.textContent; list.removeAttribute( 'aria-busy' ); @@ -204,4 +206,12 @@ // Mit JavaScript sortiert die Auswahl sofort document.querySelectorAll( '.wpsg-pv__order-submit' ).forEach( function( b ) { b.hidden = true; } ); + // Filterleiste der Produktkacheln: am Handy zugeklappt, breit immer offen (Grenze wie WordPress, 782 px) + const narrow = window.matchMedia( '(max-width: 781px)' ); + + function toggleBar() { document.querySelectorAll( '.wpsg-pvf__toggle' ).forEach( function( d ) { d.open = !narrow.matches; } ); } + + toggleBar(); + narrow.addEventListener( 'change', toggleBar ); + } )(); diff --git a/views/mods/mod_productview/productview_filter.phtml b/views/mods/mod_productview/productview_filter.phtml index 121159a..1cf98da 100644 --- a/views/mods/mod_productview/productview_filter.phtml +++ b/views/mods/mod_productview/productview_filter.phtml @@ -25,6 +25,13 @@ <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 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> + <div class="wpsg-pvf__fields"> + <?php } ?> + <?php foreach ($this->view['showFilter'] as $filter) { ?> <?php if ($filter['type'] === 'catfilter') { ?> @@ -81,4 +88,9 @@ <?php } ?> </div> + <?php if ($bBar) { ?> + </div> + </details> + <?php } ?> + </form> |