MixItUp checkbox filter from another page

Community resources Webflow Tips
1

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
2

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`)
3

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?

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
5

Thank you! I got it to work :slight_smile:

1 Like
6

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

7

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.

8

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!

9

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

10

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!

11

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

12

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

1 Like