List Js Filter with Get Parameter Set and Search
list.js: https://github.com/javve/list.js
The following is possible via GET parameters:
https://example.com/page?listcategory=Versand
https://example.com/page?listheading=Finanzen
https://example.com/page?listdescription=Vero
And for the search input:
https://example.com/page?query=Testbeispiel
if the entered search query is a actual filter, then the filter is set and the search input cleared.
https://example.com/page?query=Finanzen
Filtering is pushing to History as well with changing document.title and the actual URL
References:
https://billbee.webflow.io/anbindungen?listcategory=Versand
by Patrick Ludewig
November 11, 2019
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
<link rel="stylesheet" href="https://uploads-ssl.webflow.com/5d10d8ab778c1f665b814437/css/billbee.webflow.9d940b5f0.min.css">
<input class="listsearch" placeholder="Search" />
<button id="help-button">Go</button>
<div class="wrapper" id="filterList">
<div class="cat-navigation">
<h6 class="cat-nav-heading">Kategorien</h6>
<div class="w-form">
<form id="email-form" name="email-form" data-name="Email Form">
<div class="div-block wf-grid">
<label class="w-checkbox cat-nav-field">
<div class="w-checkbox-input w-checkbox-input--inputType-custom cat-nav-checkbox w--redirected-checked"></div>
<input type="checkbox" id="Alle" name="Alle" data-name="Alle" checked="" style="opacity: 0; position: absolute; z-index: -1;"><span for="Alle" data-w-id="a3fe38b6-eea7-3834-257d-78c2aaab1747" data-wf-id="["a3fe38b6-eea7-3834-257d-78c2aaab1747"]" class="cat-nav-link w-form-label">Alle</span>
</label>
<label class="w-checkbox cat-nav-field">
<div class="w-checkbox-input w-checkbox-input--inputType-custom cat-nav-checkbox"></div>
<input type="checkbox" id="Kanäle" name="Kan-le" data-name="Kanäle" style="opacity: 0; position: absolute; z-index: -1;"><span for="Kanäle" class="cat-nav-link w-form-label">Kanäle</span>
</label>
<label class="w-checkbox cat-nav-field">
<div class="w-checkbox-input w-checkbox-input--inputType-custom cat-nav-checkbox" data-w-id="7d73801d-51f4-41be-6b17-1f209714142b"></div>
<input type="checkbox" id="Versand" name="Versand" data-name="Versand" style="opacity: 0; position: absolute; z-index: -1;"><span for="Versand" data-w-id="7d73801d-51f4-41be-6b17-1f209714142c" class="cat-nav-link w-form-label">Versand</span>
</label>
...
SCSS
body {
background: #eaeaea;
&.show-loader {
background: red;
}
}
.wrapper {
max-width: 90em;
margin: 0 auto;
background: #eaeaea;
}
.list-cards {
line-height: 20px;
font-family: Lato, sans-serif;
color: #2c3340;
font-size: 14px;
-webkit-box-direction: normal;
box-sizing: border-box;
display: flex;
width: 100%;
margin-bottom: -40px;
-webkit-box-pack: center;
justify-content: center;
flex-wrap: wrap;
}
.list {
line-height: 20px;
font-family: Lato, sans-serif;
color: #2c3340;
font-size: 14px;
box-sizing: border-box;
width: 100%;
display: flex;
margin-bottom: 40px;
padding: 16px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
flex-wrap: nowrap;
align-content: stretch;
border: 1px solid #e1e6ee;
border-radius: 10px;
background-color: #eaeeae;
}
.list-card {
line-height: 20px;
font-family: Lato, sans-serif;
color: #2c3340;
font-size: 14px;
box-sizing: border-box;
text-align: center;
margin-right: 15px;
margin-left: 15px;
border-radius: 10px;
background-color: #fff;
-webkit-box-direction: normal;
display: flex;
margin-bottom: 40px;
padding: 48px 4%;
-webkit-box-orient: vertical;
flex-direction: column;
-webkit-box-align: center;
align-items: center;
flex: 270px;
box-shadow: 0 1px 3px 0 rgba(89, 98, 115, 0.12);
transition: box-shadow 0.3s ease;
}
.cat-nav-field {
.cat-nav-link.is-active {
background: red;
}
}
.list-search {
.show-loader & {
background:red;
}
}
.cat-nav-field {
input {
opacity: 1 !important;
z-index: 2 !important;
position: relative !important;
}
}
JavaScript
var sortableClassValues = ["listcategory", "listdescription", "listheading"],
activeFilters = [];
var options = {
valueNames: sortableClassValues
};
var mq = window.matchMedia('(max-width: 700px)');
var body = $("body");
var searchInput = $(".listsearch");
var searchBtn = $('.help-button');
var listContainer = $(".list-container").find(".loader-container");
var filterList = new List("filterList", options);
let filterableEntries = [];
var noItemsOriginal = document.getElementById("emptycontainer").outerHTML;
var noItemsCopy = noItemsOriginal;
$('#emptycontainer').remove();
var assembleCategoryClasses = function() {
var listCard = $(".list-card");
listCard.each(function() {
var category = $(this).find(".listcategory").text();
$(this).addClass(category);
});
};
assembleCategoryClasses();
// Reset list on input start
searchInput.on("input", function() {
listContainer.fadeIn(150);
setTimeout(function() {
unsetActiveStates();
filterList.filter();
}, 150);
});
searchBtn.on("click", function(e) {
e.preventDefault()
document.querySelector('#filterList').scrollIntoView({
behavior: 'smooth'
})
});
// Filter list
searchInput.on("keyup", function() {
var searchString = $(this).val();
filterList.search(searchString);
// On mobile, wait after textinput and scroll down
if (mq.matches) {
setTimeout(function() {
document.querySelector('#filterList').scrollIntoView({
behavior: 'smooth'
})
}, 2000);
}
});
// Show Loader when list is successfully updated
filterList.on("updated", function(list) {
if (list.matchingItems.length == 0) {
$(list.list).append(noItemsCopy);
}
setTimeout(function() {
listContainer.fadeOut(150);
}, 300);
});
// Remove active states from category filter
var unsetActiveStates = function(el) {
var activeEl = $(".cat-nav-link.is-active");
$(".cat-nav-field input").not(el).prop("checked", false);
activeEl.removeClass("is-active");
};
// Add active...