ajax - jquery

import $ from "jquery";

/******************************************/
/*************** PUBLICATIONS *************/
/******************************************/
$(function() {
    var $publications = $('#container_loadResult_js');    
    var $seeMore = $("#load_more_js");    
    var $filterCategories = $('#filter_category_js');
    var $filterTag = $('#filter_tag_js');
    var $filterType = $('#filter_type_js');
    var $filterTerritory = $('#filter_territory_js');
    
    var page = 1;
    let loadPublications = function(reset){
        if(reset === true)
            page = 1;
        $publications.addClass('loading');        
        var data = {
            'action': 'load_publications',
            'page': page,
            'lang' : _lang
        };
        
        //categories
        if($filterCategories.find('input[type=checkbox]:checked')){
            data.categories = [];
            $filterCategories.find('input[type=checkbox]:checked').each(function(){
                data.categories.push($(this).val());                
            });
        }

        // mots clés
        if($filterTag.find('select').val() !== 0){
            data.tag = $filterTag.find('select').val();
        }
        // type
        if($filterType.find('select').val() !== 0){
            data.type = $filterType.find('select').val();
        }
        // territoire
        if($filterTerritory.find('select').val() !== 0){
            data.territory = $filterTerritory.find('select').val();
        }
        $.post(ajaxurl, data, function(response) {     
            if(reset === true){
                $seeMore.prevAll().remove();
            }          
            $(response.publications).insertBefore($seeMore);
            $seeMore.toggle(response.more);
            $publications.removeClass('loading');
        });
    }    
    // ----- infinite scroll    
    $seeMore.click(function(e){
        e.preventDefault();
        page++;
        loadPublications(false);        
    });     
    // ----- filtre catégorie
    $filterCategories.find('input[type=checkbox]').change(function(){
        loadPublications(true);
    });
    // ------ filtres mots clés
    $filterTag.find('select').change(function(){
        loadPublications(true);
    });
    // filtres type
    $filterType.find('select').change(function(){
        loadPublications(true);
    });
    // filtres type
    $filterTerritory.find('select').change(function(){
        loadPublications(true);
    });
    //--- chargement de la page
    if($publications.length > 0)
        loadPublications(false);
});

enqueue

   wp_add_inline_script( 'theme-bundle-js', 'var ajaxurl = "'.admin_url( 'admin-ajax.php' ).'"');
   
   
      // pass Ajax Url to ajax.js
        // wp_localize_script('theme-bundle-js', 'ajaxurl', admin_url('admin-ajax.php'));

function

/******************************************/
/*************** PUBLICATIONS *************/
/******************************************/

function load_publications()
{
    $count = 8;
    $page = $_POST['page'];

    // filtres
    $categories = isset($_POST['categories']) ? $_POST['categories'] : [];
    $tag = isset($_POST['tag']) ? $_POST['tag'] : null;
    $type = isset($_POST['type']) ? $_POST['type'] : null;
    $territory = isset($_POST['territory']) ? $_POST['territory'] : null;

    $posts = getPublications($page, $count, $categories, $tag, $type, $territory);

    $more = $page < ($posts->found_posts / $count);

    ob_start();
    if ($posts->have_posts()) {
        while ($posts->have_posts()) : $posts->the_post();
            get_template_part('parts/publication.item');
        endwhile;
    } else if ($page == 1) {
        echo "<p>";
        _e('Aucune publication', 'traduction');
        echo "</p>";
    }
    $publications = ob_get_clean();

    wp_send_json([
        'more' => $more,
        'publications' => $publications
    ]);
    wp_die(0);
}
add_action('wp_ajax_load_publications', 'load_publications');
add_action('wp_ajax_nopriv_load_publications', 'load_publications');

function getPublications($page, $count, $categories = [], $tag = null, $type = null, $territory = null)
{
    $args = [
        'post_type' => 'cpt_publication',
        'posts_per_page' => $count,
        'paged' => $page,
        'orderby' => 'post_date',
        'order' => "DESC",
        'post_status' => 'publish',
    ];
    $tax_query = [];
    if (!empty($categories)) {
        $tax_query[] =  [
            'taxonomy' => 'tax_category',
            'field' => 'id',
            'terms' => $categories,
            'operator' => 'IN'
        ];
    }
    if ($tag) {
        $tax_query[] =  [
            'taxonomy' => 'post_tag',
            'field' => 'id',
            'terms' => $tag,
            'operator' => 'IN'
        ];
    }
    if ($type) {
        $tax_query[] =  [
            'taxonomy' => 'tax_type',
            'field' => 'id',
            'terms' => $type,
            'operator' => 'IN'
        ];
    }
    if ($territory) {
        $tax_query[] =  [
            'taxonomy' => 'tax_territory',
            'field' => 'id',
            'terms' => $territory,
            'operator' => 'IN'
        ];
    }
    $args['tax_query'] = $tax_query;
    return new WP_Query($args);
}

loading

.loading {
    min-height:50px;
    pointer-events: none;
    position:relative;
    
    & > *{    
        -webkit-filter: blur(5px);
        -moz-filter: blur(5px);
        -o-filter: blur(5px);
        -ms-filter: blur(5px);
        filter: blur(5px);
        pointer-events: none;
    }
    
    &:before {
        content:'';
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: $purple;
        opacity: 0.6;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
        animation: sk-bounce 2.0s infinite ease-in-out;
        z-index:99;
    }
    &:after {
        -webkit-animation-delay: -1.0s;
        animation-delay: -1.0s;
    }
}
@-webkit-keyframes sk-bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}
@keyframes sk-bounce {
  0%, 100% { 
    transform: translate(-50%, -50%) scale(0.0);
    -webkit-transform: translate(-50%, -50%) scale(0.0);
  } 50% { 
    transform: translate(-50%, -50%) scale(1.0);
    -webkit-transform: translate(-50%, -50%) scale(1.0);
  }
}

page-archive

<div id="section-filtres">
    <div id="filter_category_js" class="filtres-group filtres-category">
        <div class="wrapper filter-style-tag">
            <span id="openFilteCategory" class="filter-title-tag"><?php echo __('Catégories', 'traduction') ?><b class="button">▾</b></span>
            <div class="filter-category-container-tag">
                <?php terms_list('tax_category', 'menu-order', 'asc', false, "checkbox"); ?>
            </div>
        </div>
    </div>
    <div class="row wrapper-selects">
        <div id="filter_territory_js" class="col-sm-6 col-md-4 filtres-group filtres-territory">
            <div class="wrapper filter-style-select">
                <?php terms_list('tax_territory', 'menu-order', 'asc', false, "select"); ?>
            </div>
        </div>
        <div id="filter_tag_js" class="col-sm-6 col-md-4 filtres-group filtres-tag">
            <div class="wrapper filter-style-select">
                <?php terms_list('post_tag', 'menu-order', 'asc', false, "select"); ?>
            </div>
        </div>
        <div id="filter_type_js" class="col-sm-6 col-md-4 filtres-group filtres-type">
            <div class="wrapper filter-style-select">
                <?php terms_list('tax_type', 'menu-order', 'asc', false, "select"); ?>
            </div>
        </div>
    </div>
</div>
<div id="listPublication">    
    <div id="container_loadResult_js" class="row align-items-stretch loading">
        <div class="col-12 text-center" id="load_more_js" style="display:none;">
            <button class="btn btn-outline-primary btn-plus"><?= _e('Voir plus de publication', 'traduction'); ?></button>
        </div>
    </div>
</div>
<?php
    /*$the_query = load_publications();   
    if ($the_query->have_posts()) {        
?>
    <div id="listPublication">
        <div id="container_loadResult_js" class="row align-items-stretch">
            <?php
                while ($the_query->have_posts()) : $the_query->the_post();
                    get_template_part('parts/item.publication');
                endwhile;
            ?>
            <div class="col-12 text-center" id="load_more_js" style="display:none;">
                <button class="btn btn-outline-primary btn-plus"><?= _e('Voir plus de publication', 'traduction'); ?></button>
            </div>
        </div>
    </div>
<?php } else { ?>
    <p><?php _e('Aucune publication', 'traduction'); ?></p>
<?php }*/ ?>
<?php wp_reset_query(); ?>

taxonomies filters

function terms_list($taxonomy, $orderby, $order, $empty = true, $type = "radio")
{
  

    $term_args = array(
        'orderby' => $orderby,
        'order' => $order,
        'hide_empty' => $empty,
    );

    $terms = get_terms($taxonomy, $term_args);

    $label = get_taxonomy($taxonomy);

 
    if( is_archive()){
        $queryObject = get_queried_object();
        if( isset ( $queryObject->term_id )){
            $queryObjectID = $queryObject->term_id;
        }
    }
 
    if ($type == 'radio') {
        if ($terms) {
            foreach ($terms as $term) {
                $color =  get_field('cat_color', 'term_' . $term->term_id);

                $style = "";
                if (!empty($color)) {
                    $style =  'style="color:' . $color . ';"';
                };

                $checked='';
                if( !empty( $queryObjectID ) &&  $queryObjectID == $term->term_id ){
                    $checked = 'checked';
                }
                echo '<div class="form-group" ' . $style . '>';
                echo '<input type="radio" '.$checked.' name="'. $taxonomy.'" value="' . $term->term_id . '" id="filter-' . $term->slug . '">';
                echo '<label for="filter-' . $term->slug . '"><span>' . $term->name . '</span></label>';
                echo '</div>';
            }
        }
    }
    
    if ($type == 'checkbox') {
        if ($terms) {
            foreach ($terms as $term) {
                $color =  get_field('cat_color', 'term_' . $term->term_id);

                $style = "";
                if (!empty($color)) {
                    $style =  'style="color:' . $color . ';"';
                };

                $checked='';
                if( !empty( $queryObjectID ) &&  $queryObjectID == $term->term_id ){
                    $checked = 'checked';
                }
                echo '<div class="form-group" ' . $style . '>';
                echo '<input type="checkbox" '.$checked.' name="'. $taxonomy.'" value="' . $term->term_id . '" id="filter-' . $term->slug . '">';
                echo '<label for="filter-' . $term->slug . '"><span>' . $term->name . '</span></label>';
                echo '</div>';
            }
        }
    }


    if ($type == 'select') { ?>
        <select name="<?= $taxonomy; ?>" id="<?= $taxonomy; ?>">
            <option value=""><?= $label->label; ?></label>
                <?php
                if ($terms) {
                    foreach ($terms as $term) {
                        $color =  get_field('cat_color', 'term_' . $term->term_id);

                        $style = "";
                        if (!empty($color)) {
                            $style =  'style="color:' . $color . ';"';
                        };
                        
                        $selected='';
                        if( !empty( $queryObjectID ) &&  $queryObjectID == $term->term_id ){
                            $selected = 'selected';
                        }

                        echo '<option  ' . $style . ' value=' . $term->term_id . ' '.$selected.'><span>' . $term->name . '</span></label>';
                    }
                }
                ?>
        </select>
<?php

    }
}