Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

Isotope: Combination filters, sort and history

Hi,

I need a little help on a side project as I’m more of a designer than coder. I’ve made a codepen of my progress. As you can see I’m using Isotope to filter and sort a list of businesses (suppliers) and articles. There are three filters Type, Location and Medium (on the right) as well as a simple sort.

Task 1: Sort: Isotope sorting functionality needs completing.

Task 2: Combination filters

At the moment the filters (Type, Location and Medium) work independently of each other. Filtering one will override the other. I need the filters to stack. So you’d be able to filter by Hotels in Manchester for example.

Task 3: Medium counts

You’ll notice the medium filters have “0” next to them. I’d like that number to be a total number of suppliers and articles on the page, before any filtering.

Task 4: Hash history

Both the filtering and sorting functionality need to reflect in the URL. In v1 of Isotope there is a an article and a demo of combination filters AND hash history. You can start with those but I have some specific requirements:

I’d like to use the native hashchange event and history, history.pushState etc as opposed to jQuery BBQ which hasn't been updated since 2010.

I’d like to have prettier URLs than the isotope demo. So instead of having: “comboFilters%5Bsize%5D=.wide&comboFilters%5Bshape%5D=.round” I'd like something like: “size=wide&shape=round”. Specifically I’d like the type filter to be a real url and location and medium filters to be hashes. For example: If we filtered by Hotel and London, I’d like the url to be something like http://example.com/hotel#location=london or http://example.com/hotel?location=london.

I’d like to be able to share the link http://example.com/#location=london&medium=article with the items filtered when when the person landed on the page. I understand this wont work with the type filter (e.g. hotel) because that would be a real URL which I will make the page separately.

Thanks

User Gravatar

lkbr

Posted Jun 16 2014 2:33 UTC

$100


  • Assigned To omab
  • Solved
  • jquery
    isotope
    history
  • 2358 Views

12 Replies


Hello lkbr,

Here you can find the most of the functionality that you want: https://www.codersclan.net/ticket/314

I can do full solution for you, tomorrow.

Regards,

Nikola Boychev

User Gravatar

NBoychev

Posted Jun 16 2014 2:39 UTC

Hi Nikola,

Thats true but it will take me 2-3 hours which I don't have, I'm hopeless at JS. I'll wait for your solution tomorrow.

Thanks, Luke

User Gravatar

lkbr

Posted Jun 16 2014 3:02 UTC

Hi lkbr,

Sorry, I'm not able to finish the code for today. I'll make sure that it will be done tomorrow.

Regards,

Nikola Boychev

User Gravatar

NBoychev

Posted Jun 17 2014 15:10 UTC

Here's a working JSFiddle with your listed requirements http://jsfiddle.net/omab/kShpU/.

You can also get the full example from here https://gist.github.com/omab/2a209fcf37e2252b6598 and test it locally.

User Gravatar

omab

Posted Jun 17 2014 22:51 UTC

Hello @omab,

Thanks for your work and sorry for the delay. Its working great apart from a few minor issues.

  1. When you first load the page there is a trailing "?". I don't think that's intended
  2. The back button functionality doesn't work. E.g. If I filter by Hotels, then by Lodges, then press back, the URL changes but no filtering happens.
  3. The medium filter isn't quite working. E.g. I can select both suppliers and articles. If I select one, I want it to deselect the other. You should be able to select either suppliers or articles, not both. You can see it fail in the url if both are selected you have two "&medium=..."
User Gravatar

lkbr

Posted Jun 19 2014 0:24 UTC

Hi @lkbr,

I've updated the gist with the fixes for the issues reported, https://gist.github.com/omab/2a209fcf37e2252b6598 (Revision 4). Also updated the JSFiddle http://jsfiddle.net/omab/kShpU/1/.

User Gravatar

omab

Posted Jun 19 2014 11:15 UTC

Solution

This didn't solve your task? Get your own custom solution.

I've selected the answer because you've done the hard work. But there are still a few minor bugs that I'd like fixing.

  1. Load the page, filter by Type: Hotels. Then press back button. The url changes, but the filters and dropdown are still showing Hotels.

  2. Reload the page. Filter by Type: Hotels, then by Type: All. The trailing "?" is still showing.

  3. I'd like Medium: Suppliers to be the default Medium filter when first loaded.

I believe that is everything. Thank you for your work.

Cheers, Luke

User Gravatar

lkbr

Posted Jun 20 2014 0:23 UTC

@lkbr, I've updated the gist and the JSFiddle again. Links:

User Gravatar

omab

Posted Jun 20 2014 10:14 UTC

Looks good. Thanks @omab.

User Gravatar

lkbr

Posted Jun 23 2014 0:42 UTC

@lkbr, no problem!

User Gravatar

omab

Posted Jun 23 2014 8:13 UTC

Would it be possible to allow the user to select multiple options in one filter, but then only one option in another filter?

In the jsfiddle example, the user could select Hotels AND Lodges from the Type dropdown, but only able to select London from the Location dropdown. Then only results that matched ALL the selected options would be shown?

(Also keeping the history functionality).

User Gravatar

paramaniac

Posted Apr 21 2016 15:17 UTC

Hello !

0down votefavorite

Hello !

I have set up the filterable list on Wordpress that uses Isotope with the combination of filters and the URL Hash : http://ukubi.fr/isotope-url/activites

Everything works but I encounter a problem when I go directly to the URL with selected filters: articles that do not match the filters in the URL do not appear in the code (they are not hidden): http://ukubi.fr/isotope-url/activites/?lieu=lieua&medium=service&sort=name

I have tested the code in static and I do not have this problem

Can you help me understand why Wordpress influences javascript code and how to fix this? Thanks

> code JS : http://ukubi.fr/isotope-url/wp-content/themes/isot...

> Code wordpress :

<?php get_header(); ?>

<nav class="navbar navbar-default" role="navigation">
    <div class="container">

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <div class="btn-group">

            <?php 
                $terms = get_terms("type"); 
                $count = count($terms); 
                echo '<div class="btn-group">
                <button type="button" class="btn navbar-btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
                    <span class="text-muted">Type</span>
                    <strong class="selection">All</strong>
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu js-select-menu js-filter">'; 


                echo '<li class="active"><a href="#" data-filter="all">All</a></li>'; 
                if ( $count > 0 ) { 
                    foreach ( $terms as $term ) { 
                        $termname = ($term->slug); 
                        echo ' <li><a href="#" data-filter=".type-'.$termname.'">'.$term->name.'</a></li>'; 
                    } 
                } 
                echo "</ul></div>"; 
            ?>

            <?php 
                $terms2 = get_terms("lieu"); 
                $count2 = count($terms2); 
                echo '<div class="btn-group">
                <button type="button" class="btn navbar-btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
                    <span class="text-muted">Type</span>
                    <strong class="selection">All</strong>
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu js-select-menu js-filter">'; 


                echo '<li class="active"><a href="#" data-filter="all">All</a></li>'; 
                if ( $count2 > 0 ) { 
                    foreach ( $terms2 as $term2 ) { 
                        $termname2 = ($term2->slug); 
                        echo ' <li><a href="#" data-filter=".lieu-'.$termname2.'">'.$term2->name.'</a></li>'; 
                    } 
                } 
                echo "</ul></div>"; 
            ?>                    

            <?php 
                $terms3 = get_terms("public"); 
                $count3 = count($terms3); 
                echo '<div class="btn-group">
                <button type="button" class="btn navbar-btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
                    <span class="text-muted">Type</span>
                    <strong class="selection">All</strong>
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu js-select-menu js-filter">'; 


                echo '<li class="active"><a href="#" data-filter="all">All</a></li>'; 
                if ( $count3 > 0 ) { 
                    foreach ( $terms3 as $term3 ) { 
                        $termname3 = ($term3->slug); 
                        echo ' <li><a href="#" data-filter=".public-'.$termname3.'">'.$term3->name.'</a></li>'; 
                    } 
                } 
                echo "</ul></div>"; 
            ?>    
            </div>

            <div class="btn-group">
                <button type="button" class="btn navbar-btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown">
                    <span class="text-muted">Sort</span>
                    <strong class="selection">Name</strong>
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu js-select-menu js-sort">
                    <li><a href="#" data-sort="name">Name</a></li>
                    <li><a href="#" data-sort="popularity">Popularity</a></li>
                    <li><a href="#" data-sort="activity">Activity</a></li>
                </ul>
            </div>
            <ul class="nav navbar-nav navbar-right stats js-filter" data-filter-group="medium">
                <li>
                    <a href="#" data-filter=".medium-service">
                        <strong class="stat-count">0</strong>
                        <span class="stat-type">Suppliers</span>
                    </a>
                </li>
                <li>
                    <a href="#" data-filter=".medium-post">
                        <strong class="stat-count">0</strong>
                        <span class="stat-type">Articles</span>
                    </a>
                </li>

           </ul>

        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

<?php if ( have_posts() ) : ?>

    <div class="container activites">
        <div class="isotope">

        <?php 
            //nb = test demo only
            $nb=1; 
            $nb2=-1; 

            /* Start the Loop */
            while ( have_posts() ) : the_post(); 

                $nb=$nb+1;
                $nb2=$nb2-1;

        ?>

        <div id="post-<?php the_ID(); ?>" <?php post_class('item medium-service');"" ?>>

            <?php
                $image_id = get_post_thumbnail_id();
                $image_url = wp_get_attachment_image_src($image_id, 'large');
                $image_url = $image_url[0];
            ?>

            <a href="<?php the_permalink(); ?>">
                <h3 class="name"><?php the_title() ?></h3>
                <p>Popularity: <span class="popularity"><?php echo $nb; ?></span></p>
                <p>Activity <span class="activity"><?php echo $nb2; ?></span></p>
                <?php the_post_thumbnail('medium', array('class' => 'aligncenter photo')); ?>
            </a>

        </div>

        <?php endwhile; ?>

        </div>
    </div>  

    <?php else : ?>

        <div id="post-not-found">
            <section class="post_content">
                <p>No post</p>
            </section>
        </div>

    <?php endif; ?>

<?php get_footer();
User Gravatar

user13652

Posted Oct 6 2017 15:34 UTC

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions