Wordpress Ajax Load More advanced filtering with multiple custom taxonomies

alm-filtering.js

// Advanced Filtering
$(document).ready(function () {

	var alm_is_animating = false; // Animating flag
	var buttons = $('.filter-tag .btn');

	// Btn Click Event
	$(document).on('click', '.filterTrigger .btn', function (e) {
			e.preventDefault();
			// Prevent any action while animating or with disabled class
			if (alm_is_animating || $(this).hasClass('disabled')) {
					e.stopPropagation();
					return false;
			}
	});
	
	// Onchange input
	$(document).on('change', 'input[name="filter_term"]', function () {
			dataUpdate();
	});

	// Complete filter
	$.fn.almFilterComplete = function () {
			alm_is_animating = false; // clear animating flag
			buttons.removeClass('disabled');
	};

	// If empty
	$.fn.almEmpty = function (alm) {
			var message = 'Nous n\'avons trouvé aucun résultat.';
			$(alm.content).append('<li class="filter-error">' + message + '</li>'); // Append to ALM
	};

	// Update filters data
	function dataUpdate() {
			alm_is_animating = true; // Animating flag
			buttons.addClass('disabled');

			var post_type = 'news',
					taxonomy_1 = 'category',
					taxonomy_2 = 'technology';

			// Data
			var data = {};
			data['post-type'] = post_type;
			data['taxonomy'] = taxonomy_1 + ':' + taxonomy_2;
			data['taxonomy-operator'] = 'IN:IN';
			data['taxonomy-relation'] = 'OR'; // OR||AND

			// Terms 1
			var terms_taxonomy_1 = $("[data-taxonomy='" + taxonomy_1 + "']").find('input:checked').map(function () {
					return $(this).val();
			}).get().join(',');

			// Terms 2
			var terms_taxonomy_2 = $("[data-taxonomy='" + taxonomy_2 + "']").find('input:checked').map(function () {
					return $(this).val();
			}).get().join(',');

			data['taxonomy-terms'] = terms_taxonomy_1 + ':' + terms_taxonomy_2;

			console.log(data['taxonomy']);
			console.log(data['taxonomy-terms']);

			almUpdate(data); // Update Ajax Load More
	}

	// Update Ajax Load More
	function almUpdate(data) {
			var transition = 'fade', // 'slide' | 'fade' | null
					speed = '300'; //in milliseconds
			$.fn.almFilter(transition, speed, data); // Run the filter
	}

});

archive-news.php

<?php

$context = Timber::get_context();
$context['title'] = 'Title here';

$news_posts = get_posts(
    [
        'post_type'      => 'news',
        'posts_per_page' => -1,
        'fields'         => 'ids',
    ]
);

$terms_args = [
    'hide_empty' => true,
    'object_ids' => $news_posts,
];

$context['posts'] = Timber::get_posts();
$context['categories'] = Timber::get_terms('category', $terms_args);
$context['technologies'] = Timber::get_terms('technology', $terms_args);

Timber::render('views/pages/archive-news.twig', $context);

archive-news.twig

{% block content %}
    <section class="page-content" role="main">
        <div class="container">
           
            <h1>{{ title }}</h1>
            
            {#Filter#}
            <nav class="filter-tag__nav">
                <ul data-toggle="buttons"
                    {#Data taxonomy#}
                    data-taxonomy="category"
                >
                      {% if categories %}
                        {#Hide non-classes category#}
                        {% for category in categories if category.id != 1 %}
                            <li class="filterTrigger filter-tag">
                                <label
                                    class="filter-tag__btn-filter btn btn-lg ">
                                    <input name="filter_term"
                                           value="{{ category.slug }}"
                                           class="hidden"
                                           type="checkbox">
                                    {{ category.name }}
                                    <i class="filter-tag__icon icon-custom-cancel"></i>
                                </label>
                            </li>
                        {% endfor %}
                        {% if technologies %}
                            <li class="filter-tag">
                                <a class="filter-tag__btn-more btn btn-lg"
                                   data-toggle="collapse"
                                   data-target="#collapseChildren"
                                   href="javascript:void(0)">
                                    <i class="icon-custom-plus"></i>
                                    {{ __('more filters') }}
                                </a>
                            </li>
                        {% endif %}
                    {% endif %}
                </ul>

                {% if technologies %}
                    <div id="collapseChildren" class="collapse">
                        <ul data-toggle="buttons"
                            {#Data taxonomy#}
                            data-taxonomy="technology">
                            {% for technology in technologies %}
                                <li class="filterTrigger filter-tag">
                                    <label
                                        class="filter-tag__btn-filter btn btn-lg">
                                        <input name="filter_term"
                                               value="{{ technology.slug }}"
                                               class="hidden"
                                               type="checkbox">
                                        {{ technology.name }}
                                        <i class="filter-tag__icon icon-custom-cancel"></i>
                                    </label>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>

                {% endif %}
            </nav>

        </div>

        {% filter shortcodes %}
            [ajax_load_more post_type="news" taxonomy="category:technology" taxonomy_terms=":" taxonomy_relation="OR" taxonomy_operator="IN:IN" button_label="Load More" posts_per_page="5" button_loading_label=". . ." ]
        {% endfilter %}

    </section><!--/.page-page-->
{% endblock %}

filter-tag.scss

$filter-tag__icon--size: 48px;
$filter-tag__icon--color: $black;
$filter-tag__icon--border-color: $gray-border;

$filter-tag__btn-more--color: $white;
$filter-tag__btn-more--bg-color: $brand-primary;

$filter-tag__nav--spacing: 5px;

.filter-tag {
	position: relative;
	&__nav {
		@include clearfix;
		margin-bottom: 50px;
		text-align:    center;
		ul {
			@include list-unstyled;
			margin-left: -$filter-tag__nav--spacing;
			li {
				display:       inline-block;
				margin-bottom: $filter-tag__nav--spacing*2;
				padding-left:  $filter-tag__nav--spacing;
				padding-right: $filter-tag__nav--spacing;
			}
		}
	}

	.btn {
		@include box-shadow(none);
		font-family: $font-family-3;
		font-size:   12px;
		font-weight: 800;
		line-height: $filter-tag__icon--size;
		outline:     0 !important;
		padding:     0 30px;
		i {
			display:        inline-block;
			font-size:      18px;
			vertical-align: middle;
			&:before {
				@include transition-content(all, 250ms, $cubic-bezier-3);
			}
		}

		&[aria-expanded='true'] {
			i:before {
				@include rotate(45deg);
			}
		}
	}

	&__btn-filter {
		@include button-variant-custom($filter-tag__icon--color, transparent, $filter-tag__icon--border-color);
	}

	&__btn-more {
		@include button-variant-custom($filter-tag__btn-more--color, $filter-tag__btn-more--bg-color, $filter-tag__btn-more--bg-color);
	}

	&__icon {
		@include border-radius($btn-border-radius-large + 2);
		@include transition-content(all, 150ms, $cubic-bezier-3);
		border:             1px solid $filter-tag__icon--border-color;
		border-right-width: 0;
		color:              $filter-tag__icon--border-color;
		margin-right:       -1px;
		// hide close icon
		& {
			@include opacity(0);
			display: none;
			width:   0;
		}
	}

	.active {
		&.btn {
			padding-right: 0;
			// Show close icon
			.filter-tag__icon {
				@include opacity(1);
				display:     inline-block;
				margin-left: 5px;
				width:       $filter-tag__icon--size;
			}
		}
	}
}