Using query parameters with Foxy product variants

Design help Custom code
1

I am using Foxy for my ecommerce site. I have multiple product variants on a page and they are selected by clicking. In accordance with google standards I need to meet, I’m seeking help in adding/changing a url query parameter when the variant is changed. Additionally, when a url with a product variant query parameter is loaded, it should load with the referenced product variant selected.

I’m using $('#ID').click(function() to swap values in the Foxy add-to-cart HTML embed. I’m having trouble with the necessary code to modify query parameters on the same click. More so, I don’t know where to begin as far as parsing any query parameter that may be present on page load and triggering a click to select the corresponding product variant.

I greatly appreciate any help.

2

Okay, after many hours of study/trial, I have a working solution for the first part: adding/modifying a query value on click…

<script>
function addParam(url, param, value) {
      let a = document.createElement('a'), regex = /(?:\?|&amp;|&)+([^=]+)(?:=([^&]*))*/g;
      let match, str = []; a.href = url; param = encodeURIComponent(param);
      while (match = regex.exec(a.search))
          if (param != match[1]) str.push(match[1]+(match[2]?"="+match[2]:""));
      str.push(param+(value?"="+ encodeURIComponent(value):""));
      a.search = str.join("&");
      return a.href;
   };
 var newUrl = window.location.href;

$('#object_ID').click(function() {
	let nextUrl = addParam(newUrl, "variant", "blue");
    let stateObj = {};
    window.history.replaceState(stateObj,'',nextUrl);
});
</script>

This solution was found here: javascript - How to add parameters to a URL that already contains other parameters and maybe an anchor - Stack Overflow + History.replaceState() - Web APIs | MDN

I havent yet figured out how to trigger a product variant selection when a variant is specified in the query on page load, but it seems I should have most of what I need now to figure it out. If anyone has any comments/suggestions/problems with the solution above, I’d be grateful to hear them. Or, of course, a solution to this second part of the problem.

3

Okay I’ve figured out how to parse the url on page load and select the corresponding variant by clicking on its selector.

<script>
$(document).ready(function() {
	let loadedUrl = new URL(window.location.href);
	let variantSearch = loadedUrl.search;
  
  if (variantSearch.includes('variant1')) {
  	$('#variant1_selector').click();
} else if (variantSearch.includes('variant2')) {
  	$('#variant2_selector').click();
} else {
  	$('#variant1_selector').click();
}
        });
</script>

In this case, if there is no url query variant specified, I want variant1 to be selected. Otherwise I’d just leave the ‘else’ condition off.

I coded the entirety of this second solution myself, so even though it’s quite simple, I’d appreciate any comments about its quality/robustness and whether there’s a better way to do it.

My sources: (in addition to the sources from solution 1 above)