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

5
src/assets/css/main.scss
View File

@@ -373,6 +373,11 @@ $tiers: (
} }
} }
.facet-list {
max-height: 240px;
overflow-y: auto;
}
/* -------------------------------------------------- /* --------------------------------------------------
Circles (Header, Buttons, etc.) Circles (Header, Buttons, etc.)
-------------------------------------------------- */ -------------------------------------------------- */

3
src/assets/js/main.js Normal file
View File

@@ -0,0 +1,3 @@
const filterfacet = (event) => {
console.log(event);
}

5
src/layouts/Main.astro
View File

@@ -5,11 +5,11 @@ import '/src/assets/css/main.scss';
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" data-bs-theme="dark"> <html lang="en" data-bs-theme="dark">
<head> <head>
<script> <script is:inline>
window.dataLayer = window.dataLayer || []; window.dataLayer = window.dataLayer || [];
</script> </script>
<!-- Google Tag Manager --> <!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': <script is:inline>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
@@ -54,5 +54,6 @@ import '/src/assets/css/main.scss';
// import 'bootstrap/js/dist/tooltip'; // import 'bootstrap/js/dist/tooltip';
</script> </script>
<script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.8/dist/htmx.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.8/dist/htmx.min.js"></script>
<script is:inline src="/src/assets/js/main.js"></script>
</body> </body>
</html> </html>

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

@@ -51,7 +51,8 @@ let searchArray = [{
collection: 'cards', collection: 'cards',
filter_by: `sealed:false${filterBy ? ` && ${filterBy}` : ''}`, filter_by: `sealed:false${filterBy ? ` && ${filterBy}` : ''}`,
per_page: 20, per_page: 20,
facet_by: Object.keys(facetFields).join(','), facet_by: '',
max_facet_values: 0,
page: Math.floor(start / 20) + 1, page: Math.floor(start / 20) + 1,
sort_by: '_text_match:asc, releaseDate:desc, number:asc', sort_by: '_text_match:asc, releaseDate:desc, number:asc',
include_fields: '$skus(*)', include_fields: '$skus(*)',
@@ -65,6 +66,7 @@ if (start === 0) {
filter_by: facetFilter(facet), filter_by: facetFilter(facet),
per_page: 0, per_page: 0,
facet_by: facet, facet_by: facet,
max_facet_values: 500,
page: 1, page: 1,
sort_by: '', sort_by: '',
include_fields: '', include_fields: '',
@@ -119,28 +121,46 @@ if (start === 0) {
--- ---
{(start === 0) && {(start === 0) &&
<script define:vars={{ totalHits, filters, facets }} is:inline>
let hits = totalHits;
</script>
<div id="facetContainer" hx-swap-oob="true"> <div id="facetContainer" hx-swap-oob="true">
<button type="submit" form="searchform" class="btn btn-secondary">Apply Filters</button> <button type="submit" form="searchform" class="btn btn-secondary">Apply Filters</button>
{facets.map((facet) => ( {facets.map((facet) => (
<div class="mb-4"> <div class="mb-4 facet-group">
<div class="h5">{facetNames(facet.field_name)}</div> <div class="h5">{facetNames(facet.field_name)}</div>
{facet.counts.map((count) => ( {(facet.counts.length > 20) &&
<div> <input class="facet-filter" type="text" id={`filter_${facet.field_name}`} placeholder="search..." />
<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" /> <div class="facet-list">
{count.value} ({count.count}) {facet.counts.map((count) => (
</label> <div class="facet-item" data-facet-value={count.value.toLowerCase()}>
</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>
))}
</div>
</div> </div>
))} ))}
<button type="submit" form="searchform" class="btn btn-secondary">Apply Filters</button> <button type="submit" form="searchform" class="btn btn-secondary">Apply Filters</button>
</div> </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) => ( {pokemon.map((card) => (