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

admin管理员组

文章数量:1332383

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>

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>

• filters
• ajax

Share Improve this question asked Jul 2, 2020 at 9:26 JandonJandon 14711 silver badge99 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Try to replace

    $tax_query = array();

with

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

in your functions.php file.

本文标签： Ajax filtershow all results that contain at least one filter