Filtering by two categories
-
Hi!
I’ve followed this example to build my current filtering -> https://connekthq.com/plugins/ajax-load-more/examples/filtering/ and it works great!
But now I have a request to filter my custom post by two different custom categories instead of one. I need two groups of filter buttons (alm-filter-nav) that are somehow connected so that I can filter posts by two statements from different groups.
Is this possible in some way?
Thank you for your help!
Kind regards
Katarina
-
Hi @katarinahansson,
Do you mean filtering by multiple categories in the same instance?If so, that is possible.
What does your current set up look like and what type of element are you trying to filter?Hi!
It gets a bit messy when I’m trying to explain.. I’m trying to filter posts, and they will have two kinds of categories. Let´s say it would be author and genre. I would like to have two groups of filter buttons so that the user can choose one author and one genre and then get the result. All posts should also be able to have for example several genres and therefore show whenever there is a match between the two choices the user make.
this is my setup right now in my js-file ->
/* global jQuery */ (function ($) { // Filter Ajax Load More var alm_is_animating = false $('#alm-filter-nav li').eq(0).addClass('active') // Set the initial button "all" active state $('#alm-filter-nav2 li').eq(0).addClass('active') // Set the initial button "all" active state // Nav btn click event $('#alm-filter-nav li a, #alm-filter-nav2 li a').on('click', function (e) { e.preventDefault() var el = $(this) // Our selected element if (!el.hasClass('active') && !alm_is_animating) { // Check for active and !alm_is_animating alm_is_animating = true el.parent().addClass('active').siblings('li').removeClass('active') // Add active state var data = el.data(), // Get data values from selected menu item transition = 'fade', // 'slide' | 'fade' | null speed = '300' // in milliseconds //In the if-statement below I get all filter choices but I need to figure out how to pass them through in the var data if (el.find('li.active')) { $('li.active a').each(function () { console.log($(this).data('taxonomy-terms')) }) } $.fn.almFilter(transition, speed, data) // reset Ajax Load More (transition, speed, data) } }) $.fn.almFilterComplete = function () { alm_is_animating = false // clear alm_isanimating flag } })(jQuery)
Does this make my question clearer?
/Katarina
- This reply was modified 7 years, 5 months ago by katarinahansson.
- This reply was modified 7 years, 5 months ago by katarinahansson.
I see what you mean.
I’m actually building an example for this… not sure when it will be completed.Basically what you need to do is on click loop over your navigation and build an array of selected items to pass to Ajax Load More as an object.
Note – the following is completely 100% untested.
JS
/* global jQuery */ (function ($) { // Filter Ajax Load More var alm_is_animating = false $('#alm-filter-nav li').eq(0).addClass('active') // Set the initial button "all" active state $('#alm-filter-nav2 li').eq(0).addClass('active') // Set the initial button "all" active state // Nav btn click event $('#alm-filter-nav li a, #alm-filter-nav2 li a').on('click', function (e) { e.preventDefault() var el = $(this) // Our selected element if (!el.hasClass('active') && !alm_is_animating) { // Check for active and !alm_is_animating alm_is_animating = true el.parent().addClass('active').siblings('li').removeClass('active') // Add active state var obj= {}, cats = '', count = 0; $('#alm-filter-nav li.category').each(function(i){ count++; var el = $('a', $(this)); if(el.hasClass('active')){ if(count > 1){ cats += ','+el.data('category'); }else{ cats += el.data('category'); } } obj['category'] = cats; }); var data = obj, // Get data values from selected menu item transition = 'fade', // 'slide' | 'fade' | null speed = '300' // in milliseconds //In the if-statement below I get all filter choices but I need to figure out how to pass them through in the var data if (el.find('li.active')) { $('li.active a').each(function () { console.log($(this).data('taxonomy-terms')) }) } $.fn.almFilter(transition, speed, data) // reset Ajax Load More (transition, speed, data) } }) $.fn.almFilterComplete = function () { alm_is_animating = false // clear alm_isanimating flag } })(jQuery)
Your HTML
<ul id="alm-filter-nav"> <li><a href="#" data-category="author" class="active">Author</a></li> <li><a href="#" data-category="genre" class="active">Author</a></li> </ul>
- This reply was modified 7 years, 5 months ago by Darren Cooney.
Hi again!
Thank you so much for your help!
I have continued working with this and so far I’m able to loop through my filter-buttons that are active and pass the info into the object. But I still can’t get it to work correctly..My code right now:
/* global jQuery */ (function ($) { // Filter Ajax Load More var alm_is_animating = false $('#alm-filter-nav li').eq(0).addClass('active') // Set the initial button active state $('#alm-filter-nav2 li').eq(0).addClass('active') // Set the initial button active state // Nav btn click event $('#alm-filter-nav li a, #alm-filter-nav2 li a').on('click', function (e) { e.preventDefault() var el = $(this) // Our selected element if (!el.hasClass('active') && !alm_is_animating) { // Check for active and !alm_is_animating alm_is_animating = true el.parent().addClass('active').siblings('li').removeClass('active') // Add active state var obj = {} var taxterm = '' var tax = '' var repeater = '' var taxonomy_operator = '' var post_type = '' var scroll = '' var posts_per_page = '' if (el.find('li.active')) { $('li.active a').each(function () { var $this = $(this) taxterm += $this.data('taxonomy-terms') + ':' tax = $this.data('taxonomy') repeater = $this.data('repeater') taxonomy_operator = $this.data('taxonomy-operator') post_type = $this.data('post-type') scroll = $this.data('scroll') posts_per_page = $this.data('posts-per-page') obj['taxonomy-terms'] = taxterm obj['taxonomy'] = tax obj['repeater'] = repeater obj['taxonomy-operator'] = taxonomy_operator obj['post-type'] = post_type obj['scroll'] = scroll obj['posts-per-page'] = posts_per_page }) } var data = obj, // Get data values from selected menu item transition = 'fade', // 'slide' | 'fade' | null speed = '300' // in milliseconds console.log(data) if (el.find('li.active')) { $('li.active a').each(function () { console.log($(this).data('taxonomy-terms')) }) } $.fn.almFilter(transition, speed, data) // reset Ajax Load More (transition, speed, data) } }) $.fn.almFilterComplete = function () { alm_is_animating = false // clear alm_isanimating flag } })(jQuery)
My output of the Object:
Object { post-type: "books" posts-per-page: 9 repeater: "default" scroll: false taxonomy: "author:genre" taxonomy-operator: "IN" taxonomy-terms: "person1:drama" }
It only filter by the first value in det taxonomy “group” in my object. If I put author in first it only filter by author and vice versa. Do you have any tips on how to solve that?
/Katarina
I just solved it! I missed to set my taxonomy-operator to IN:IN instead of just IN. 🙂
Thank you again for you help!
/Katarina
- This reply was modified 7 years, 5 months ago by katarinahansson.
Nice work here… I might have to borrow some of this for the new filter example i’m putting together!
If you were happy with the support I provided please consider leaving a review 🙂
hey dcooney, did you ever manage to complete the example you mentioned in the thread?
having a bit of trouble setting up a child-category filter menu for the blogposts on the homepage.
EDIT – woops, sorry got it fixed. will post a new thread if i have problems again. cheers
- This reply was modified 7 years, 3 months ago by mfk.
- The topic ‘Filtering by two categories’ is closed to new replies.