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

Question

有谁知道如何自定义 WooCommerce 价格过滤器小部件以过滤“更改”触发器而不是使用提交按钮？

它位于 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();
        }
    } );
    
} );

当然，提交按钮仍然需要隐藏:)

Answer 3

这些 jquery 解决方案都不适合我，所以我所做的可能会对某人有所帮助。

jQuery('body').on('price_slider_change'),function(event, min, max){ 
    jQuery('.widget_price_filter form').trigger('submit');
});

Answer 4

这是这个问题的解决方案

https://offgalaxy.com/filtr-ceny-woocommerce-zapusk-pri-izmenenii-polzunka/