Trigger Mixitup Filters OnLoad

Question

I'm using the Mixitup (https://mixitup.kunkalabs.com) utility on an ExpressionEngine site. The page is a listing of real estate properties, and the Mixitup filter is to narrow down those properties by region, features, etc.

I want to be able to pass some values via url_segment to trigger the filters. So, for example, if a user clicks the listings from a map divided into various markets, they'll see only the properties in those markets first, as if they had selected it from the main page.

For example, the default view is this:

If they click on Central Indiana, the other regions go away, and a submarket menu opens:

If they further click on South, only the properties in that submarket are displayed. At any time, they can deselect those options, and the hidden properties are revealed.

What I want to do is have the ability for users to visit that page with some options already selected:

I tried using a javascript to click the elements, after all other calls were made:

<script>
     $(document).ready(function(e){
          setTimeout(function() {
               $("li.central-indiana").click();
          },10);
     });
</script>

That expanded the menus, but didn't filter the properties (or apply the "active" class, but that's not really the problem).

I also tried using Mixitup's showOnLoad function at the end of the page, and also with a delay timer:

<script type="text/javascript">
    $("document").ready(function() {
        setTimeout(function() {
             $('#filter').mixitup(
                {'showOnLoad': 'central-indiana'}
             ); 
        },10);   
    });
</script>

That momentarily filtered the properties, but then mixitup reset itself, and displayed them all. It also did not expand the menus or apply the "active" class.

What am I missing here?

Thanks,

ty

Answer 1

You need to set something to be filtered on load, like this:

$(function() {
    $('#filter').mixItUp({
        load: {
            filter: '.central-indiana'
        }
    });
});