Scenario:
I want my navigation links to load up a filter option and have it set when the user lands on that article or shop page.
Problem:
I’m using @Finsweet CMS filter which works great for actually filtering the page itself but linking it up to the navigation has been a challenge getting the code right. The links in the navigation are going to the page but not preloading the filters. I’m currently just working on one portion of these links to get it to work before linking up the rest of the navigation.
My code in the project settings before the
<script>
const filterURLDetails = [
{
filterBtnClass: ".is--reviews-all", // The button to which we'll add the URL
url: "https://tqe-2-0.webflow.io/articles-page", // URL to the page which will be loaded already filtered
filters: ["Reviews"]
},
{
filterBtnClass: ".is--reviews-forhim", // The button to which we'll add the URL
url: "https://tqe-2-0.webflow.io/articles-page", // URL to the page which will be loaded already filtered
filters: ["For-Him_Reviews"]
},
{
filterBtnClass: ".is--reviews-pets", // The button to which we'll add the URL
url: "https://tqe-2-0.webflow.io/articles-page", // URL to the page which will be loaded already filtered
filters: ["Pets_Reviews"]
},
{
filterBtnClass: ".is--reviews-fashion", // The button to which we'll add the URL
url: "https://tqe-2-0.webflow.io/articles-page", // URL to the page which will be loaded already filtered
filters: ["Fashion_Reviews"]
},
{
filterBtnClass: ".is--reviews-foodbev", // The button to which we'll add the URL
url: "https://tqe-2-0.webflow.io/articles-page", // URL to the page which will be loaded already filtered
filters: ["Food-Bev_Reviews"]
},
{
filterBtnClass: ".is--reviews-home", // The button to which we'll add the URL
url: "https://tqe-2-0.webflow.io/articles-page", // URL to the page which will be loaded already filtered
filters: ["Home_Reviews"]
},
{
filterBtnClass: ".is--reviews-wellness", // The button to which we'll add the URL
url: "https://tqe-2-0.webflow.io/articles-page", // URL to the page which will be loaded already filtered
filters: ["Wellness_Reviews"]
},
{
filterBtnClass: ".is--reviews-parenting", // The button to which we'll add the URL
url: "https://tqe-2-0.webflow.io/articles-page", // URL to the page which will be loaded already filtered
filters: ["Parenting_Reviews"]
}
];
// Add url to buttons
// For each button
for (const filterBtn of filterURLDetails) {
const button = document.querySelector(filterBtn.filterBtnClass); // define the url and add to a variable
let url = new URL(filterBtn.url); // For each filter
for (const filter of filterBtn.filters) {
let filterParams; // Assign the filter as a query param to the URL
if (filterBtn.filters.indexOf(filter) === 0) {
filterParams = "?filter0=" + filter;
} else {
filterParams =
"&filter" + filterBtn.filters.indexOf(filter) + "=" + filter;
}
url = url + filterParams;
} // Add the final URL to the button
button.href = url;
}
</script>
My code on the article page itself(the page in which I want the filters to preload before the user lands on that page)
<script>
<!-- Add filter params to links that apply filters on page load - pt. 2-->
const filterTriggers = [
{
wrapperClass: '.filter-option-container',
buttonsClass: '.is--reviews-all',
buttonsClass: '.is--reviews-forhim',
buttonsClass: '.is--reviews-pets',
buttonsClass: '.is--reviews-fashion',
buttonsClass: '.is--reviews-foodbev',
buttonsClass: '.is--reviews-home',
buttonsClass: '.is--reviews-wellness',
buttonsClass: '.is--reviews-parenting'
}
]
// Get params from the URL
var getParamsArray = function (url) {
var params = {};
var parser = document.createElement('a');
parser.href = url;
var query = parser.search.substring(1);
var vars = query.split('&');
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split('=');
params[pair[0]] = decodeURIComponent(pair[1]);
}
const valuesArray = Object.values(params);
return valuesArray;
};
const filterArrays = getParamsArray(window.location.href);// If there are filter params
if(filterArrays) {
// For each filterArray item
for (const filterParam of filterArrays) {
// For each defined trigger
for (const singleTrigger of filterTriggers) {
const elems = document.querySelector(singleTrigger.wrapperClass);
buttons = elems.querySelectorAll(singleTrigger.buttonsClass);
// If button exists get the button
filterButton = Array.from(buttons).find(v => v.innerText.toLowerCase().replace(/\s/g,'') === filterParam.toLowerCase().replace(/\s/g,''));
// If the button exists, click it
if (filterButton) { filterButton.click(); }
}
}
}
</script>
Here is my read-only link
Link to my live site
https://tqe-2-0.webflow.io/
If anyone knows how javascript works and can help me out I would be stoked.
Here is my public share link: LINK
(how to access public share link)