MixItUp checkbox filter from another page

Community resources Webflow Tips
4

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