Streaming live at 10am (PST)

Problems with PASS FILTERS PARAMS TO URL AND LOAD PAGE WITH FILTERS PRE-SELECTED

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

https://preview.webflow.com/preview/tqe-2-0?utm_medium=preview_link&utm_source=designer&utm_content=tqe-2-0&preview=e529d2eb4a70c58af828306c22adf956&workflow=preview

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)