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

【问题标题】：WooCommerce Price Filter - trigger on change instead of submitWooCommerce 价格过滤器 - 触发更改而不是提交
【发布时间】：2021-03-22 17:02:44
【问题描述】：

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

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

【问题讨论】：

标签： php wordpress forms woocommerce submit

【解决方案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;
}

经过测试，它可以工作:)

【讨论】：

【解决方案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();
        }
    } );
    
} );

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

【讨论】：