0

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>
0

Try to replace

    $tax_query = array();

with

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

in your functions.php file.

| improve this answer | |
  • Just perfect. I have some trouble with pagination but I think I will create a new answer for that. Thank you for your help Ivan ! – Jandon Jul 2 at 10:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.