Hi Charlie,
I trust you are well. Been having a few thoughts on a new project and filtering via loopers is a thought - rather than having to go down the WPFacet / Search and Filter route. Loopers are already immensely powerful, so how simple (or not!) would it be to use them for front-end filtering?
An idea of this is:
<!-- Filter Controls -->
<div class="project-filters">
<select id="filter-type" data-looper-param="project_type">
<option value="">All Types</option>
<option value="residential">Residential</option>
<option value="heritage">Heritage & Listed</option>
<option value="sustainable">Sustainable</option>
<option value="commercial">Commercial</option>
</select>
<select id="filter-location" data-looper-param="location">
<option value="">All Locations</option>
<option value="bath">Bath</option>
<option value="frome">Frome</option>
<option value="wells">Wells</option>
</select>
<button id="reset-filters">Reset</button>
</div>
<!-- Cornerstone Looper -->
<!-- How do we make this looper respond to the filter changes above? -->
<div class="projects-grid">
[Looper Provider - filtered by parameters?]
[Looper Consumer - project cards]
[/Looper]
</div>
<script>
// When filter changes, how do we update the looper query?
document.querySelectorAll('.project-filters select').forEach(select => {
select.addEventListener('change', function() {
// Update looper here - what's the Cornerstone way?
updateLooper();
});
});
</script>
Is this something, which could be done either as a new CS feature, or by us, end users, in some way?
Many thanks,
Christopher