Ценовой фильтр WooCommerce — срабатывает при изменении, а не при отправке
Кто-нибудь знает, как я могу настроить виджет ценового фильтра WooCommerce для фильтрации по триггеру «изменить» вместо кнопки отправки?
Он находится в templates/content-widget-price-filter.php, но, поскольку он сделан в виде формы, означает ли это, что я ДОЛЖЕН использовать кнопку отправки для запуска события?
Ответы 3
В вашей дочерней теме вы можете создать скрипт 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;
}
Проверено, работает :)
Принятый ответ работает, но его можно улучшить. Например, он отправляет форму, даже если пользователь нажимает на фильтр без изменения ценового диапазона.
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();
}
} );
} );
Конечно, кнопку отправки все равно нужно скрыть :)
Ни одно из этих решений jquery не сработало для меня, поэтому то, что я сделал, может быть, кому-то поможет.
jQuery('body').on('price_slider_change'),function(event, min, max){
jQuery('.widget_price_filter form').trigger('submit');
});