Dropdown for Selecting a Variant for All Products

[D2RGEAR]

Hello,

My site: https://d2rgear.com/

Other site: https://d2stock.com/

I'm trying to implement a dropdown menu, similar to the "Select Realm" on d2stock.com (without the RGB).

I created a snippet and applied it to the the bottom of the page. The dropdown appears, but a variant is selected and applied, there are no changes made to the selection of the variant on the product pages.

Here is the snippet:

<select id="variant-selector">
<option value="Ladder - Softcore">Ladder - Softcore</option>
<option value="Non Ladder - Softcore">Non Ladder - Softcore</option>
</select>
<button id="apply-variant">Select Realm</button>

<script>
document.addEventListener("DOMContentLoaded", function () {
var variantSelector = document.getElementById("variant-selector");
var applyButton = document.getElementById("apply-variant");

applyButton.addEventListener("click", function () {
var selectedVariant = variantSelector.value;

// Loop through all product forms on the page
var productForms = document.querySelectorAll("form[action='/cart/add']");
productForms.forEach(function (form) {
// Find the product variant option with the selected value
var variantOption = form.querySelector(`[name="id"][value="${selectedVariant}"]`);

if (variantOption) {
// Select the variant option
variantOption.checked = true;
// Trigger a click event to update the product variant
variantOption.dispatchEvent(new Event("click"));
}
});
});
});
</script>

Any help is much appreciated.

Thanks.

[ayan_ali]

I would love to help for that i have to look at how your theme is selecting the variant inside a form element, and I read the javascript you shared, I also have a solution in mind, I can only fully make a functioning code while working on the store, if are interested please look at the bottom of the post and share your website URL (.myshopify.com) so I could help you.

Regards,

Ayan