Custom JS for Product Variations

Hello,

I’m using custom JS to update my site’s URL based on the product variation a customer selects. It only updates the link when a change is made using the dropdown options. I am using colour swatches to change the product color variation but the link does not update when changed. How can I update my URL when a colour swatch is selected?

Checking the logs, I see that ‘els’ contains both the colour and size of the product. However, when I check ‘el’ inside the forEach loop, only the size is passed on.

JS:
const els = document.querySelectorAll(‘.variations select’)

// add el.name and el.value as query parameters to the URL
function updateURL(el) {
const url = new URL(window.location.href)
url.searchParams.set(el.name, el.value)
window.history.pushState({}, ”, url.href)
}

// update the URL when the user changes the select
els.forEach(el => el.addEventListener(‘change’, () => updateURL(el)))