3

This one maybe a bit tricky, but currently I have a page that is using categories and isotope.js filtering to arrange channel entries.

Current Layout

The filtering using the check-boxes works well. However one thing I'd like to do to extend it further is this;

Using the above image for reference, lets say Entry #1 has categories of Commercial and Construction set. If I click on the Commercial checkbox, then Entry #1 appear in the filter. Likewise if I check Construction, the entry will show, regardless of whether Commercial is checked or not.

What I'd like to happen is if I check the Commercial check-box, then every box except Construction would disappear because hypothetically, only Entry #1 has been assigned to a category in that list (ie. Construction).

Proposed layout

Likewise if I clicked on Construction, is it possible to grey out the top list of categories with the exception of Commercial because only Entry#1 'theoretically' has a category assigned in that list.

I apologize in advance as this is quite a difficult problem to word into a question. I hope someone out there is able to get a grip of what I mean and maybe help me out a bit.

*Obviously I would like to post a JSFiddle to better illustrate the request, but because its currently reliant on EE's channel entries and categories, I'm unable to do so.

Markup

<section>
<div class="container">    
    <div class="row">
        <div class="col-xs-12 col-sm-3">
            <div id="filters">
                <h3>Market</h3><br/>    
                {exp:channel:categories category_group="7" style="linear" show_empty="no"}
                    <input type="checkbox" name="{category_name}" value=".{category_name}" id="{category_name}"><label for="{category_name}">&nbsp;{display_name_sectors}</label><br>
                {/exp:channel:categories}<hr/>
                <h3>Capabilities</h3><br/>    
                {exp:channel:categories category_group="9" style="linear"}
                    <input type="checkbox" name="{category_name}" value=".{category_name}" id="{category_name}"><label for="{category_name}">&nbsp;{display_name_capabilities}</label><br>
                {/exp:channel:categories}<hr/>
                <h3>Region</h3><br/>
                {exp:channel:categories category_group="10" style="linear"}
                    <input type="checkbox" name="{category_name}" value=".{category_name}" id="{category_name}"><label for="{category_name}">&nbsp;&nbsp;{display_name_regions}</label><br>
                {/exp:channel:categories}
            </div>
        </div>
        <div class="col-xs-12 col-sm-9">
            <h3>Filtered Projects</h3><br/>
            <div id="blocks-container">
                {exp:channel:entries dynamic="off" channel="projects" status="not closed"}

                    <div class="iso-block {categories}{category_name} {/categories}">

                        <p>{title}<br/><em>{categories backspace="2"}{category_name}, {/categories}</em></p></div>
                {/exp:channel:entries}
            </div> <!--#blocks-container-->
        </div>
    </div>
</div><!--container-->
</section>


<script src="http://isotope.metafizzy.co/v1/jquery.isotope.min.js"></script>
<script>
$(function(){

  var $container = $('#blocks-container'),
  $checkboxes = $('#filters input');

  $container.isotope({
  itemSelector: '.iso-block',
  masonry: {
  columnWidth: 100
  }
  });

 $checkboxes.change(function(){
 var filters = [];
// get checked checkboxes values
 $checkboxes.filter(':checked').each(function(){
  filters.push( this.value );
 });

filters = filters.join(', ');
$container.isotope({ filter: filters });
});

});
</script>
4
  • Does your scope need to filter across multiple category groups or is that just arbitrary? – rchrdg Jun 11 '14 at 20:02
  • @rchrdg At the moment it's just across two category groups. It may increase in the future but here and now it's just a couple. – Adam Jun 11 '14 at 20:30
  • Perhaps you could use an array that lists the category ids of all the entries once that filter was selected. Then you could pipe those ids to set the show parameter so it includes those other in the category list. I think that would get you to your goal but Im not entirely sure what you want to happen with the other categories in the list. – rchrdg Jun 11 '14 at 23:14
  • @rchrdg I wouldn't have any idea where to start on something like that. Do you know of anyone who could write/code something like this? – Adam Jun 12 '14 at 11:05
3

Should be pretty straight-forward, though it's really more of a JS question than EE...

In the Isotope callback (ie, after it has finished filtering), you'll need to create a function that fetches all the class names of all visible (filtered) items (jQuery's :visible selector should work there), then pass those class names to a jQuery selection to toggle a class on the associated checkboxes to grey them out - maybe using something like $($checkboxes).not($classes).toggleClass('nope').

You'll just need to format the class list to make a string like: [name=...],[name=...],[name=...].

4
  • Thanks for your answer and sorry for the delay in reply. Unfortunately my java skills are pretty novice right now. How feasible would it be for you to code something like this? for a fee obviously, I wouldn't want it for nothing. – Adam Jun 16 '14 at 8:20
  • @Adam Sure, can do this for you if you like. Feel free to contact me at jamessmith.co.uk/contact ... Alternatively there are 100s of friendly EE devs who could also probably help if you send a tweet with the #eecms hash tag (this is not really the appropriate place to solicit commercial work!). – James Smith Jun 16 '14 at 14:37
  • Thank you James, I have sent you a message via your website. No confirmation so I hope it will reach you OK. – Adam Jun 16 '14 at 14:52
  • No worries, I'll send it there – Adam Jun 16 '14 at 15:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.