From e48e3fc448c19d85e65c7267b230232addf156aa Mon Sep 17 00:00:00 2001 From: Roger Rehnelt Date: Thu, 1 Oct 2026 19:31:19 +0200 Subject: Produktansichten: Modul aus ShopThemeOne im Plugin MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit [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 --- views/mods/mod_productview/productview.js | 148 ++++++++++++++++++ views/mods/mod_productview/productview.phtml | 171 +++++++++++++++++++++ .../mods/mod_productview/productview_filter.phtml | 83 ++++++++++ views/mods/mod_productview/settings_edit.phtml | 10 ++ 4 files changed, 412 insertions(+) create mode 100644 views/mods/mod_productview/productview.js create mode 100644 views/mods/mod_productview/productview.phtml create mode 100644 views/mods/mod_productview/productview_filter.phtml create mode 100644 views/mods/mod_productview/settings_edit.phtml (limited to 'views/mods') diff --git a/views/mods/mod_productview/productview.js b/views/mods/mod_productview/productview.js new file mode 100644 index 0000000..5879d68 --- /dev/null +++ b/views/mods/mod_productview/productview.js @@ -0,0 +1,148 @@ +/** + * wpShopGermany, Modul Produktansichten: Seiten, Sortierung, Ansicht und Filter ohne Neuladen + * + * 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. + */ + +( function() { + + 'use strict'; + + function flatten( prefix, value, params ) { + + if ( value !== null && typeof value === 'object' ) { + + Object.keys( value ).forEach( function( k ) { flatten( prefix + '[' + k + ']', value[ k ], params ); } ); + + } else if ( value !== undefined && value !== null ) { + + params.append( prefix, String( value ) ); + + } + + return params; + + } + + function filterValues() { + + const form = document.getElementById( 'wpsg_mod_productview_filter' ); + const values = {}; + + if ( !form ) return values; + + new FormData( form ).forEach( function( v, name ) { + + const m = name.match( /^pvf\[(\w+)\](?:\[(\d+)\])?/ ); + if ( !m || v === '' ) return; + + if ( m[ 2 ] ) { + + values[ m[ 1 ] ] = values[ m[ 1 ] ] || {}; + values[ m[ 1 ] ][ m[ 2 ] ] = values[ m[ 1 ] ][ m[ 2 ] ] ? values[ m[ 1 ] ][ m[ 2 ] ] + ',' + v : v; + + } else values[ m[ 1 ] ] = v; + + } ); + + return values; + + } + + function refresh( box, change, url ) { + + const field = box.querySelector( 'input[name="wpsg_atts"]' ); + if ( !field ) return false; + + const atts = JSON.parse( field.value ); + Object.assign( atts, change ); + + const params = flatten( 'wpsg_atts', atts, new URLSearchParams( { wpsg_mod: 'wpsg_mod_productview', wpsg_action: 'refresh' } ) ); + + box.classList.add( 'is-loading' ); + box.setAttribute( 'aria-busy', 'true' ); + + fetch( box.getAttribute( 'data-wpsg-pv-url' ) + ( box.getAttribute( 'data-wpsg-pv-url' ).indexOf( '?' ) === -1 ? '?' : '&' ) + params.toString(), { credentials: 'same-origin' } ) + .then( function( r ) { if ( !r.ok ) throw new Error( r.status ); return r.text(); } ) + .then( function( html ) { + + const tmp = document.createElement( 'div' ); + tmp.innerHTML = html; + + const fresh = tmp.querySelector( '.wpsg_productview' ); + if ( !fresh ) throw new Error( 'leer' ); + + fresh.querySelectorAll( '.wpsg-pv__order-submit' ).forEach( function( b ) { b.hidden = true; } ); + box.replaceWith( fresh ); + if ( url ) history.pushState( { wpsgPv: true }, '', url ); + + } ) + .catch( function() { if ( url ) location.href = url; } ); + + return true; + + } + + document.addEventListener( 'click', function( e ) { + + const a = e.target.closest( '.wpsg-pv__pager a, .wpsg-pv__modes a' ); + if ( !a ) return; + + const box = a.closest( '.wpsg_productview' ); + const change = a.hasAttribute( 'data-page' ) ? { page: a.getAttribute( 'data-page' ) } : { mode: a.getAttribute( 'data-mode' ) }; + + if ( refresh( box, change, a.href ) ) e.preventDefault(); + + } ); + + document.addEventListener( 'change', function( e ) { + + const select = e.target.closest( '.wpsg-pv__order select' ); + + if ( select ) { + + const form = select.form; + const url = form.action + ( form.action.indexOf( '?' ) === -1 ? '?' : '&' ) + new URLSearchParams( new FormData( form ) ).toString(); + + refresh( select.closest( '.wpsg_productview' ), { order: select.value, page: 1 }, url ); + return; + + } + + if ( e.target.closest( '#wpsg_mod_productview_filter' ) ) applyFilter(); + + } ); + + document.addEventListener( 'submit', function( e ) { + + if ( e.target.id !== 'wpsg_mod_productview_filter' ) return; + + if ( applyFilter() ) e.preventDefault(); + + } ); + + function applyFilter() { + + const form = document.getElementById( 'wpsg_mod_productview_filter' ); + const box = document.querySelector( '.wpsg_productview' ); + if ( !form || !box ) return false; + + const params = new URLSearchParams(); + new FormData( form ).forEach( function( v, name ) { if ( v !== '' && !/^pv-/.test( name ) ) params.append( name, v ); } ); + + // Sortierung und Ansicht aus der aktuellen Adresse behalten, die Seite beginnt neu + new URLSearchParams( location.search ).forEach( function( v, name ) { if ( /^pv-.*(order|mode)$/.test( name ) ) params.append( name, v ); } ); + + return refresh( box, { filter: filterValues(), page: 1 }, form.action + ( form.action.indexOf( '?' ) === -1 ? '?' : '&' ) + params.toString() ); + + } + + // Zurück und Vor: den Stand aus der Adresse neu laden + window.addEventListener( 'popstate', function( e ) { if ( e.state && e.state.wpsgPv ) location.reload(); } ); + + // Mit JavaScript sortiert die Auswahl sofort + document.querySelectorAll( '.wpsg-pv__order-submit' ).forEach( function( b ) { b.hidden = true; } ); + +} )(); diff --git a/views/mods/mod_productview/productview.phtml b/views/mods/mod_productview/productview.phtml new file mode 100644 index 0000000..ae66c39 --- /dev/null +++ b/views/mods/mod_productview/productview.phtml @@ -0,0 +1,171 @@ +view['wpsg_mod_productview']; + $atts = $v['atts']; + $currency = $this->get_option('wpsg_currency'); + $prefix = (($atts['key'] === 'default')?'pv-':'pv-'.$atts['key'].'-'); + + $arOrder = $v['arOrder']; + if ($atts['order_set'] !== '') $arOrder = array_intersect_key($arOrder, array_flip(explode(',', $atts['order_set']))); + + $hidden = function($name, $value) use (&$hidden) { + if (is_array($value)) { foreach ($value as $k => $sub) $hidden($name.'['.$k.']', $sub); return; } + echo ''; + }; + +?> +
+ + + +
+ + +

+ + +

0) { + echo esc_html(wpsg_translate(__('Anzeige #1# – #2# von #3# Ergebnissen', 'wpsg'), ($v['page'] - 1) * $v['per_page'] + 1, $v['pageMax'], $v['count'])); + } else { + echo esc_html__('Keine Produkte in dieser Ansicht.', 'wpsg'); + } ?>

+ + 1 && sizeof($arOrder) > 1) { ?> +
+ + + + +
+ + + 0) { ?> + + + +
+ + +
    + id); $url = $oProduct->getProductURL(); $name = $oProduct->getProductName(); $attachment_id = $this->imagehandler->getAttachmentID($oProduct->getProductKey()); ?> +
  • + + + + + +
    + +

    + detailname; if ($detailname !== '' && $detailname !== $name) { ?> +

    + + + getRating()); if ($rating > 0) { ?> +

    + + + canDisplayPrice()) { $price = $oProduct->getPrice(); $oldPrice = $oProduct->getOldPrice(); ?> +

    + + + + + + +

    + hasMod('wpsg_mod_fuellmenge')) { ?> +
    callMod('wpsg_mod_fuellmenge', 'renderPriceInfo', [$price, $oProduct->fmenge, $product_id]); ?>
    + +

    + getURL(wpsg_ShopController::URL_VERSANDKOSTEN)).'">'.esc_html__('Versandkosten', 'wpsg').''; ?> + get_option('wpsg_kleinunternehmer')) { ?> + + getFrontendTaxview() == WPSG_NETTO) { ?> + getFrontendTaxValue())), $shipping); ?> + + getFrontendTaxValue())), $shipping); ?> + +

    + +

    + + + hasMod('wpsg_mod_stock') && $this->get_option('wpsg_mod_stock_showProduct') == '1') { ?> +

    stock))); ?>

    + + + hasMod('wpsg_mod_deliverytime') && $this->get_option('wpsg_mod_deliverytime_show_product') == '1') { ?> +

    + callMod('wpsg_mod_deliverytime', 'isStoreProduct', [$oProduct->getProductKey()])) { ?> + callMod('wpsg_mod_deliverytime', 'displayStoreText', [$oProduct->getProductKey()])); ?> + callMod('wpsg_mod_deliverytime', 'displayDelayTime', [$oProduct->getProductKey()]); ?> + + callMod('wpsg_mod_deliverytime', 'displayDeliveryTime', [$oProduct->getProductKey()])); ?> + + +

    + + + hasMod('wpsg_mod_weight') && $this->get_option('wpsg_mod_weight_showProduct') === '1' && floatval($oProduct->weight) > 0) { ?> +

    weight, $this->get_option('wpsg_mod_weight_unit')))); ?>

    + + + getShortDescription(); if ($short !== '') { ?> +
    + + +
    + +
    + + + + +
    + + +
    + +
    + +
    • + +
+ + + 1) { ?> + + + +
diff --git a/views/mods/mod_productview/productview_filter.phtml b/views/mods/mod_productview/productview_filter.phtml new file mode 100644 index 0000000..1294453 --- /dev/null +++ b/views/mods/mod_productview/productview_filter.phtml @@ -0,0 +1,83 @@ +view['wpsg_mod_productview_filter']['values']; + $currency = $this->get_option('wpsg_currency'); + + $checked = function($group, $id, $value) use ($arValues) { + $arSet = explode(',', (string)($arValues[$group][$id]??'')); + return in_array((string)$value, $arSet, true); + }; + +?> +
+ + view['wpsg_mod_productview_filter']['keep'] as $param => $value) { ?> + + + + view['showFilter'] as $filter) { ?> + + + + + +
+ + + + +
+ + +
+ + + + +
+ + +
+ + $choice) { ?> + + +
+ + + + +
+ + + + +
+ +
diff --git a/views/mods/mod_productview/settings_edit.phtml b/views/mods/mod_productview/settings_edit.phtml new file mode 100644 index 0000000..d2fb02e --- /dev/null +++ b/views/mods/mod_productview/settings_edit.phtml @@ -0,0 +1,10 @@ + +

-- cgit v1.2.3