MixItUp checkbox filter from another page

Hi everyone,

I’ve been playing around with MixItUp using the tutorials that @sabanna made, and I absolutely love it, it was exactly what I needed. That being said, there is one thing I’m trying to do, and I don’t know if it is possible.

Imagine you have two pages in your Webflow project. Page 1 is for example the homepage (or any other page, doesn’t really matter). Page 2 is the page where the MixItUp filtering happens. There are three filters on page 2, A B and C, resulting in 4 checkboxes (A, B, C and ‘All’).

I know you can select which checkboxes you want to be applied when a page loads. What I want to do is place three buttons on page 1. If you press button A, you will go to page 2 where filter A is immediately applied/checkbox A is checked. If you press button B on page 1, you will go to page 2 where filter B is immediately applied. If you press button C on page 1, you will go to page 2 where filter C is immediately applied.

Can anyone help me out? :slight_smile: Thanks in advance!

1 Like

By cockles maybe. Or by url parameters.
By parameters its easier. Mixitup api - The idea of filter on load is build-in in idea (easy to set)

$(function(){
  $('#Container').mixItUp({
    load: {
      filter: '.category-1'
    }
  });
});

Maybe simple code scenraio:

if some parameter 
(from URL parameter or any other idea == A
Load mixitup with filter `A`)

Thanks! I see the filter on load part, but as far as I can see, there’s nothing about loading from another page… Could it work by adding something like this to the custom code:

<if button A is pressed
go to page 2
apply filter A>

?
And if so, what would be the best way to code something like that?

From another pages - the idea is very simple.

Webflow designer side: Under “base page” (Page A) - add 3 buttons:
paris url => /about/?filter=paris
new york url => /about/?filter=ny
london url => /about/?filter=london

Get the param (How to? A lot of ways - google it). One way:

And than use this param as var to filter the list.

<script>
function getQueryVariable(variable)
{
       var query = window.location.search.substring(1);
       var vars = query.split("&");
       for (var i=0;i<vars.length;i++) {
               var pair = vars[i].split("=");
               if(pair[0] == variable){return pair[1];}
       }
       return(false);
}

// url:
// http://www.example.com/about?filter=paris //
var filterParam = getQueryVariable("filter"); // return paris for this url;

$(function(){
  $('#Container').mixItUp({
    load: {
      filter: 'filterParam'; /* paris */
    }
  });
});
</script>

All major sites use parameters for filtering. Will work fine.

canonical and params

Small issue when you use params - set rel canonical for “page 2”

<link rel="canonical" href="http://example.com/about" />

Like this - you point this URL (And other):
http://example.com/about/?filter=paris

To (The page you want to index - “clean URL”):
href="http://example.com/about

2 Likes

Thank you! I got it to work :slight_smile:

1 Like

Hey Tessa! Would you mind sharing the code you used to make this work. I can’t seem to integrate it into my project…

This is a while ago now, but I believe my solution consisted of two parts:

  1. Give the checkbox on the target page a custom attribute of data-value=."filtername"
    22

  2. Give the button/link from the begin page a url of folder/page/?filtername=1
    15

Let me know if that doesn’t do it, I will dig a little deeper to see if I did anything else.

Hey Tessa! Thanks fo the quick response. That didn’t work for me, but I’m using a little more of a complicated setup. I pinged Sabanna on another post. Hoping she can help!

Hey Tessa, do you happen to have the code you used here? I’m trying to do the same exact thing as you were except using a normal filter control button instead of a checkbox. Basically click a filter control button on Page 1, and use a URL parameter to autoload that filter on Page 2 in a mixitup collection. I can’t seem to get it to work using the explanation Siton posted above.

Thx

Hi eliodegaard,

I have the following script on the target page (where the filtering is happening):

    <script>
// Reusable function to convert any string/text to css-friendly format
  var conv = function (str) {
    if (!str) {
        str = 'empty';
        }
    return str.replace(/[!\"#$%&'\(\)\*\+,\.\/:;<=>\?\@\[\\\]\^`\{\|\}~]/g, '')
              .replace(/ /g, "-")
              .toLowerCase()
              .trim();
  }; 


// Creating dynamic elements classes from categories:
  var catArray = document.querySelectorAll('.w-dyn-item .categ');
  
  for (var i = 0; i<catArray.length; i++) {
     var elem = catArray[i];
     var text = elem.innerText || elem.innerContent;
     var className = conv(text);
     if (!isNaN(parseInt(className.charAt(0), 10))) {
          className = ("_" + className);
          }
     elem.parentElement.classList.add(className);
 
  };
  

// Creating a custom data-order attributes from blog titles:
  var sortArray = document.querySelectorAll('.w-dyn-item .title');
  var sortElem;
  for (var i=0; i<sortArray.length; i++) {
    sortElem = sortArray[i];
    var sortText = sortElem.innerText || sortElem.innerContent;
    sortElem.parentElement.setAttribute('data-order', sortText);
  };
  
//
    var filterGroups = document.querySelectorAll('.data-filter-group');
    for (var i=0; i<filterGroups.length; i++) {
      filterGroups[i].setAttribute('data-filter-group','');
    };
  
//
  var containerEl = document.querySelector('.container');
  var checkboxGroup = document.querySelector('.filter_wrap');
  var checkboxes = checkboxGroup.querySelectorAll('input[type="checkbox"]');
  
  for (var i = 0; i < checkboxes.length; i++) {
  var elem = checkboxes[i];
      var dataValue = elem.getAttribute("data-value");
      elem.setAttribute('value', dataValue);
  }
  
//
  var allCheckbox = checkboxGroup.querySelector('input[value="all"]');
  
  
// Enable mixitup and multifilter
  var mixer = mixitup(containerEl, {
       multifilter: {
         enable: true                 
       }
  });
 
//
  checkboxGroup.addEventListener('change', function(e) {
    var selectors = [];
    var checkbox;
    var i;
    
    if (e.target === allCheckbox && e.target.checked) {
      for (i = 0; i < checkboxes.length; i++) {
        checkbox = checkboxes[i];
          if (checkbox !== allCheckbox) checkbox.checked = false;
      }
    } else {
          allCheckbox.checked = false;
      }
    for (i = 0; i < checkboxes.length; i++) {
      checkbox = checkboxes[i];
        if (checkbox.checked) selectors.push(checkbox.value);
    }
    var selectorString = selectors.length > 0 ?
    selectors.join(',') :  'all';
    mixer.filter(selectorString);
  });
   
</script>

I hope that helps!

Thank you Tessa, that’s helpful to see what script you used.

Hi Siton - Love this solution. Any ideas how to implent this with Finsweet CMS filtering?

1 Like