tmiller/pokemon
1
0
Fork 1
Code Issues 4 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

[feat] facet filtering setup

Browse Source
This commit is contained in:
Thad Miller
2026-02-28 17:20:00 -05:00
parent a663641cd5
commit 89a670523b
4 changed files with 44 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/pages/partials/cards.astro
View File

@@ -51,7 +51,8 @@ let searchArray = [{
collection: 'cards',
filter_by: `sealed:false${filterBy ? ` && ${filterBy}` : ''}`,
per_page: 20,
facet_by: Object.keys(facetFields).join(','),
facet_by: '',
max_facet_values: 0,
page: Math.floor(start / 20) + 1,
sort_by: '_text_match:asc, releaseDate:desc, number:asc',
include_fields: '$skus(*)',
@@ -65,6 +66,7 @@ if (start === 0) {
filter_by: facetFilter(facet),
per_page: 0,
facet_by: facet,
max_facet_values: 500,
page: 1,
sort_by: '',
include_fields: '',
@@ -119,28 +121,46 @@ if (start === 0) {
---
{(start === 0) &&
<script define:vars={{ totalHits, filters, facets }} is:inline>
let hits = totalHits;
</script>
<div id="facetContainer" hx-swap-oob="true">
<button type="submit" form="searchform" class="btn btn-secondary">Apply Filters</button>
{facets.map((facet) => (
<div class="mb-4">
<div class="mb-4 facet-group">
<div class="h5">{facetNames(facet.field_name)}</div>
{facet.counts.map((count) => (
<div>
<label class="form-check-label">
<input type="checkbox" name={facet.field_name} value={count.value} checked={filterChecked(facet.field_name, count.value)} class="form-check-input" form="searchform" />
{count.value} ({count.count})
</label>
</div>
))}
{(facet.counts.length > 20) &&
<input class="facet-filter" type="text" id={`filter_${facet.field_name}`} placeholder="search..." />
}
<div class="facet-list">
{facet.counts.map((count) => (
<div class="facet-item" data-facet-value={count.value.toLowerCase()}>
<label class="form-check-label">
<input type="checkbox" name={facet.field_name} value={count.value} checked={filterChecked(facet.field_name, count.value)} class="form-check-input" form="searchform" />
{count.value} ({count.count})
</label>
</div>
))}
</div>
</div>
))}
<button type="submit" form="searchform" class="btn btn-secondary">Apply Filters</button>
</div>
<script define:vars={{ totalHits, filters, facets }} is:inline>
const facetfilters = document.querySelectorAll('.facet-filter');
for (const facetfilter of facetfilters) {
const facetgroup = facetfilter.closest('.facet-group');
const facetlist = facetgroup.querySelector('.facet-list');
const facetitems = facetlist.querySelectorAll('.facet-item');
facetfilter.addEventListener('input', (e) => {
const match = e.target.value.toLowerCase();
for (item of facetitems) {
const text = item.getAttribute('data-facet-value');
if (text.includes(match)) item.style.display = ''; // Show
else item.style.display = 'none'; // Hide
}
});
}
</script>
}
{pokemon.map((card) => (