Just saw this after seeing your post in the other thread. Replying here because itâs more relevant to the example link you provided. But, this is a solution that isnât Kirby-specific, and doesnât use filterBy.
If you are filtering results that are already in the DOM (like the nimbus lighting page), youâd be doing this with javascript. I have a similar filter in another project that works this way - I have a list of attorneys that can be filtered by position, location, and areas of practice. You can dig into the code to see how itâs working, but one thing I can point out which might help, are these lines in the template:
<option class="filter-button" value="any">Any Position</option>
<option class="filter-button" value="partner" <?= (param('p') == 'partner' ? 'selected="selected"' : ''); ?>>Partner</option>
<option class="filter-button" value="associate" <?= (param('p') == 'associate' ? 'selected="selected"' : ''); ?>>Associate</option>
<option class="filter-button" value="counsel" <?= (param('p') == 'counsel' ? 'selected="selected"' : ''); ?>>Counsel</option>
You can mark an option in a select menu as selected="selected"
.
When this page loads, it runs get_filters()
. When the page /attorneys/
is loaded, all of the options are set to âanyâ, and it runs the filtering function but nothing gets filtered out. But /attorneys/p:associate
will mark the Associate select option as selected
, the function will pick up on this, and apply the filter.
More posted below ~ if you have any specific questions, let me know.
// Template
<section id="filter" class="all-attorneys">
<div class="attorney-filter cf">
<h4 class="filter-categories-title">Filter results by:</h4>
<div class="filter-categories">
<div class="filter-category" tabindex="10">
<select name="position-filter" id="position-filter" data-filter="position" class="filter-menu">
<option class="filter-button" value="any">Any Position</option>
<option class="filter-button" value="partner" <?= (param('p') == 'partner' ? 'selected="selected"' : ''); ?>>Partner</option>
<option class="filter-button" value="associate" <?= (param('p') == 'associate' ? 'selected="selected"' : ''); ?>>Associate</option>
<option class="filter-button" value="counsel" <?= (param('p') == 'counsel' ? 'selected="selected"' : ''); ?>>Counsel</option>
</select>
</div>
<div class="filter-category" tabindex="11">
<select name="location-filter" id="location-filter" data-filter="location" class="filter-menu">
<option class="filter-button" value="any">Any Location</option>
<option class="filter-button" value="los_angeles">Los Angeles</option>
<option class="filter-button" value="newport">Newport Beach</option>
</select>
</div>
<div class="filter-category" tabindex="12">
<select name="area-filter" id="area-filter" data-filter="areas" class="filter-menu">
<option class="filter-button" value="any">Any Area of Practice</option>
<option class="filter-button" value="antitrust">Antitrust</option>
<option class="filter-button" value="class_action">Class Action Defense</option>
<option class="filter-button" value="commercial_litigation">Commercial Litigation</option>
<option class="filter-button" value="entertainment">Entertainment</option>
<option class="filter-button" value="environment">Environment</option>
<option class="filter-button" value="financial">Financial Industry & Securities</option>
<option class="filter-button" value="health">Health Care</option>
<option class="filter-button" value="intellectual">Intellectual Property</option>
<option class="filter-button" value="pro_bono">Pro Bono</option>
<option class="filter-button" value="white_collar">White Collar Defense</option>
</select>
</div>
</div>
</div>
<div class="attorney-list">
<div class="list-header">
<p class="filter-first-name"><img src="/assets/images/icons_sort-toggle.png" alt="" class="sort-toggle" data-sort="first-name" data-sort-direction="asc"></p>
<p class="filter-last-name"><img src="/assets/images/icons_sort-toggle.png" alt="" class="sort-toggle last-clicked" data-sort="last-name" data-sort-direction="asc"></p>
<p class="filter-position"><img src="/assets/images/icons_sort-toggle.png" alt="" class="sort-toggle" data-sort="position" data-sort-direction="asc"></p>
<p class="filter-location"><img src="/assets/images/icons_sort-toggle.png" alt="" class="sort-toggle" data-sort="location" data-sort-direction="asc"></p>
<p class="filter-phone"></p>
<p class="filter-email"></a></p>
<p class="filter-vcard"></p>
</div>
<?php foreach ($pages->find('attorneys')->children()->visible() as $attorney): ?>
<div class="attorney-filter-item visible"
data-first-name="<?= $attorney->first_name() ?>"
data-last-name="<?= $attorney->last_name() ?>"
data-position="<?= $attorney->position() ?>"
data-areas="<?= str_replace(',', '', $attorney->areas())?>"
data-location="<?= str_replace(',', '', (string)$attorney->locations()) ?>">
<p class="filter-first-name"><a href="<?= $attorney->url() ?>"><?= $attorney->first_name() ?></a></p>
<p class="filter-last-name"><a href="<?= $attorney->url() ?>"><?= $attorney->last_name() ?></a></p>
<p class="filter-position"><?= ucwords($attorney->position()) ?></p>
<p class="filter-location"><?= $attorney->print_locations() ?></p>
<p class="filter-phone"><?= $attorney->phone() ?></p>
<p class="filter-email"><a href="mailto:<?= $attorney->email() ?>"><?= $attorney->email() ?></a></p>
<p class="filter-vcard"><a href="<?= $attorney->get_vcf() ?>"><img src="/assets/images/icons_filter-vcard.png" alt="" class="sidebar-icon"></a></p>
</div>
<?php endforeach ?>
</div>
</section>
// Javascript
$(document).ready(function() {
var container = $('#filter');
var attorneys = container.find('.attorney-filter-item');
var attorney_filters = container.find('.filter-category');
var menus = attorney_filters.find('.filter-menu');
var filters = [];
get_filters();
menus.change(function() {
get_filters();
})
function get_filters() {
filters = [];
menus.each(function() {
var new_filter = {};
new_filter.context = $(this).attr('data-filter');
new_filter.value = $(this).val();
filters.push(new_filter);
})
apply_filters();
}
function apply_filters() {
attorneys.addClass('visible');
$.each(filters, function() {
var filter = $(this)[0];
if (filter.value == "any") return;
attorneys.each(function(index) {
// console.log($(this).attr('data-' + filter.context).indexOf(filter.value));
if ($(this).attr('data-' + filter.context).indexOf(filter.value) < 0) {
$(this).removeClass('visible');
};
})
})
}
function sort_by(field, direction) {
console.log(direction);
jQuery.fn.reverse = [].reverse;
attorneys.sort(function(a, b) {
return $(a).attr(field).localeCompare($(b).attr(field));
})
if (direction == 'desc') attorneys.reverse();
$.each(attorneys, function(idx, itm) { container.append(itm); });
}
$(".to-filter").click(function() {
var filter = $(this).attr('data-filter');
console.log(filter);
$("#position-filter").val(filter);
get_filters();
})
})