How to add/update query string link to end of exisiting URL

Question

I have existing product filters on my side bar, although I'm trying to have functional links that can update or add to the filters on the products. snippet of current page

Currently I have the links with < a href="?filter_caster-type=swivel" > although when using that link it removes the current queries. Is there an easy way to have a link that updates or adds to the current queries?

Answer 1

If you are able to use URLSearchParams :

// assumes the URL already contains a query string, better checking will be needed if this isn't always the case
var paramsFromURL = new URLSearchParams(document.location.search.substring(1));

paramsFromURL.set("WhateverYouNeedToAdd", "TheValueYouWant")

// gives something like http://example.com/path/?ExistingThing=foo&WhateverYouNeedToAdd=TheValueYouWant
var updatedURL = document.location.origin + document.location.pathname + "?" + URLSearchParams.toString();

Answer 2

To add the query into your current URL, you can doing by a javascript function, something like this:

$(function(){
  $('a').on('click', function(e){
       e.preventDefault();
       window.location.replace(window.location.href + $(this).attr('href'));
  });
}); 

This function take your current URL and append the filter that you have in your a tag and then reload.