Filtering by two categories

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.

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