Ajax filter – show all results that contain at least one filter

For a project I use Timber (TWIG) with WordPress.

I’m trying to implement ajax filter with tags on a video template. But it doesn’t work like I would like. For the moment my system is too strict. Filters combine in the wrong way.

Example :

• Video 1
  tags : media // digital // health
• Video 2
  tags : media // clinical // private sector

For the moment if I choose media and digital in my filters I only got Video 1 as a result because this is the only video which get these two tags, however Video 2 get media too.

I would like to display all videos which contain at least one filter. I would like to cumulate Video 1 and Video 2 as result because Video 2 contains at least one filter (media).

Can I have some help please ?

Here is my code :

tpl_video.php

$context['get_page'] = empty($_GET['get_page']) ? 1 : $_GET['get_page'];
$context['cards_per_page'] = empty($_GET['cards_per_page']) ? 10 : $_GET['cards_per_page'];

$context['videos'] = Timber::get_posts(array(
    'post_type' => 'videos',
    'post_status' => 'publish',
    'posts_per_page' => $context['cards_per_page'],
    'paged' => $context['get_page'],
    'orderby' => 'menu_order',
    'order' => 'ASC'
));

$context['nb_videos'] = Timber::get_posts(array(
    'post_type' => 'videos',
    'post_status' => 'publish',
    'posts_per_page' => -1
));

$context['thematiques_list'] = get_terms( array(
    'taxonomy' => 'thematique',
    'hide_empty' => true
));

script.js

function filters_video() {
    if ($('.page-videos').size() > 0) {
        if($('.page-videos .aside .aside__list').size() > 0) {
            $('.page-videos .aside .module-tags__item').click(function(e) {
                e.preventDefault();
                $(this).toggleClass('active');
                $('.module-pagination .module-pagination__link.active').removeClass('active');
                $('.module-pagination .module-pagination__link').eq(0).addClass('active');
                load_videos();
            });
        }

        if($('.page-videos .module-pan__list .aside__list-list').size() > 0) {
            $(document).on('click', '.page-videos .module-pan__list .aside__list-item', function(e) {
                e.preventDefault();
            });
        }

        if($('.module-pagination').size() > 0) {
            $(document).on('click', '.module-pagination .module-pagination__link', function(e) {
                e.preventDefault();
                if(!$(this).hasClass('inactive')) {
                    $('.module-pagination .module-pagination__link.active').removeClass('active');
                    $(this).addClass('active');

                    load_videos();
                }
            });
        }
    }
}

function load_videos() {
    var page = parseInt($('.module-pagination .module-pagination__link.active').eq(0).text());
    var cats = [];
    $('.page-videos .module-tags .module-tags__item.active').each(function(i) {
        cats.push($(this).attr('data-term-id'));
    });

    $('.list__ajax').html("");
    $('.page-videos .module-pan__list').prev('.loader__wrapper').find('.loader').clone().appendTo('.list__ajax');

    $.ajax({
        type: 'POST',
        url: '/wp-admin/admin-ajax.php',
        dataType: 'html',
        data: {
            'action' : 'load_videos',
            'cats' : cats.join(','),
            'get_page' : page
        },
        success: function(data) {
            $('.list__ajax').html(data);
        },
        error: function(data) {
            console.log(data);
        }
    });
}

functions.php

add_action( 'wp_ajax_nopriv_load_videos', 'load_videos' );
add_action( 'wp_ajax_load_videos', 'load_videos' );
function load_videos() {
    $context = Timber::get_context();

    $cats = explode(',', empty($_POST['cats']) ? array() : $_POST['cats']);
    $context['cards_per_page'] = 6;
    $context['get_page'] = empty($_POST['get_page']) ? 1 : $_POST['get_page'];

    $tax_query = array();
    foreach($cats as $id) {
        array_push($tax_query, array(
            'taxonomy' => 'thematique',
            'field' => 'term_id',
            'terms' => $id
        ));
    }

    $context['videos'] = Timber::get_posts(array(
        'post_type' => 'videos',
        'post_status' => 'publish',
        'posts_per_page' => $context['cards_per_page'],
        'paged' => $context['get_page'],
        'tax_query' => $tax_query
    ));

    $context['nb_videos'] = Timber::get_posts(array(
        'post_type' => 'videos',
        'post_status' => 'publish',
        'posts_per_page' => -1,
        'tax_query' => $tax_query
    ));

    Timber::render( 'bloc_video.twig', $context );

    die();
}

tpl_videos.twig

<div class="video-list__list">
    <div class="list__ajax">
        {% include "bloc_video.twig" with {'posts': posts, 'nb_videos': nb_videos, 'cards_per_page': cards_per_page, 'get_page': get_page} %}
    </div>
</div>

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Try to replace

    $tax_query = array();

with

    $tax_query = array( 'relation' => 'OR' );

in your functions.php file.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0