Streaming live at 10am (PST)

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!

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)

https://codepen.io/patrickkunka/pen/sjlBG

https://www.kunkalabs.com/tutorials/filtering-with-mixitup/

If parameter = a - filter a
B…filter b
C…c

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

1 Like

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!