Есть ajax-фильтр, отдельно он работает.
Есть два списка с чекбоксами для него. По умолчанию в любом из них если отметить значение, он ищет товары по таксономиям.
Загвоздка в том, что в данном случае один из этих списков с чекбоксами должен быть не активным до того момента, пока не отмечено что-то в первом. Тогда второй становится активным и по выборам в этих двух чекбоксах уже происходит фильтрация.
По отдельности и удаление неактивного класса происходит, и фильтрация. А вместе они не уживаются, потому что все связано с изменениями в инпуте. Как сделать, чтоб они работали вместе?
Часть, делающая инпут активным
jQuery('.brands-filtration .fa-arrow-down').click(function(event) {
jQuery('.brands-filtration-list').toggleClass('d-none d-block');
});
jQuery('.model-filtration .fa-arrow-down').click(function(event) {
jQuery('.model-filtration-list').toggleClass('d-none d-block');
});
jQuery('.brands-filtration input').on('change',function(e){
e.preventDefault();
jQuery('.categories.side-nav.log.model-filtration h5').removeClass('filter-heading-unset');
});
Неактивный класс
.filter-heading-unset{
filter: opacity(0.3);
cursor: no-drop;
pointer-events: none;
}
AJAX-фильтр, великолепно работает, когда нет предыдущей части, я неизлечимый плагинофоб.
jQuery(function($)
{
//Запускают фильтр
$('input').on('change',function(e){
e.preventDefault();
themename_get_posts();
jQuery('html, body').animate({scrollTop:0}, 1);
});
$(document).on("click",".ajax-page-numbers .page-numbers",function(e){
e.preventDefault();
var url = $(this).attr('href'); //Grab the URL destination as a string
var paged = url.split('&paged='); //Split the string at the occurance of &paged=
if(~url.indexOf('&paged=')){
paged = url.split('&paged=');
} else {
paged = url.split('/page/');
}
themename_get_posts(paged[1]); //Load Posts (feed in paged value)
});
//Получают данные
function getCats()
{
var cats = []; //Setup empty array
$(".themename_filter_check input:checked").each(function() {
var val = $(this).val();
cats.push(val); //Push value onto array
});
return cats; //Return all of the selected genres in an array
}
function getTags()
{
var tags = []; //Setup empty array
$(".themename_filter_check input:checked").each(function() {
var val = $(this).val();
cats.push(val); //Push value onto array
});
return tags; //Return all of the selected genres in an array
}
function themename_get_posts(paged)
{
var paged_value = paged; //Store the paged value if it's being sent through when the function is called
var ajax_url = woocommerce_params.ajax_url; //Get ajax url (added through wp_localize_script)
$.ajax({
type: 'GET',
url: ajax_url,
data: {
action: 'themename_filter',
category: getCats,
tags: getTags,
paged: paged_value //If paged value is being sent through with function call, store here
},
beforeSend: function ()
{
$('.container-wall').html('<div class="text-center" style="height:90vh;">Waiting</div>');
},
success: function(data)
{
//Hide loader here
$('.container-wall').html(data);
$('.container-wall .products').addClass('row');
$('.container-wall .products .product').addClass('col-lg-2 col-sm-3 col-4 mark-item');
},
error: function()
{
//If an ajax error has occured, do something here...
$(".container-wall").html('<p>There has been an error</p>');
}
});
}
});
