WooCommerce 价格过滤器 - 触发更改而不是提交

Question

有谁知道如何自定义 WooCommerce 价格过滤器小部件以在 'change' 触发器上进行过滤而不是使用提交按钮？

它位于 templates/content-widget-price-filter.php - 但由于它是作为表单制作的，是否意味着我必须使用提交按钮来触发事件？

Answer 1

在您的子主题中，您可以创建一个 jQuery 脚本来检测滑块上的点击以自动点击“过滤器”按钮。

jQuery( document ).ready(function($) {
    var priceSliderElements = $('.price_slider');
    var priceFilterFormSubmit = $('.widget.woocommerce.widget_price_filter .button[type="submit"]');
    priceSliderElements.on('click', function() {
        priceFilterFormSubmit.click();
    })
});

然后只需在 css 中隐藏过滤器按钮（如果您愿意，可以在 jQuery 中这样做）：

.widget.woocommerce.widget_price_filter .button[type="submit"] {
    display: none;
}

已测试并且有效:)

Answer 2

接受的答案有效，但可以改进。例如，即使用户在不更改价格范围的情况下单击过滤器，它也会提交表单。

WooCommerce 会触发一些与过滤器相关的事件，因此我们可以仅在必要时才提交表单：

jQuery(function( $ ) {
   
    $( document.body ).on( 'price_slider_create', function( e, min, max ) {
        window.priceFilterRange = [ min, max ];
    } );
    $( document.body ).on( 'price_slider_change', function( e, min, max ) {
        if ( window.priceFilterRange[0] != min || window.priceFilterRange[1] != max ) {
            $( '.widget.woocommerce.widget_price_filter .button[type="submit"]' ).click();
        }
    } );
    
} );

当然，提交按钮还是要隐藏:)

WooCommerce 价格过滤器 - 触发更改而不是提交

WooCommerce Price Filter - trigger on change instead of submit

php

forms

wordpress

submit

woocommerce