T
T
trenton2021-04-29 06:47:38
AJAX
trenton, 2021-04-29 06:47:38

How to make two mandatory conditions for one event?

There is an ajax filter, it works separately.
There are two lists with checkboxes for it. By default, in any of them, if you mark a value, it searches for products by taxonomies.
The catch is that in this case, one of these checkboxes should be inactive until something in the first one is checked. Then the second one becomes active and filtering is already taking place in these two checkboxes.
Separately, both the deletion of the inactive class occurs, and the filtering. And together they do not get along, because everything is connected with changes in the input. How to make them work together?
The part that makes the input active

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');   
    });

Inactive class
.filter-heading-unset{
    filter: opacity(0.3);
    cursor: no-drop;
    pointer-events: none;
}

AJAX filter, works great when there is no previous part, I'm an incurable plug-in phobe.
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>');
            }
        });
    }

});

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question