Personalized checkout and custom promotions with Shopify Scripts
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.
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
This blog post is a recap of the webinar Getting Ready For BFCM: How To Run A Flash Sal...
By Jacqui Oct 3, 2023Explore the 30-30-30 rule, a dynamic social media strategy for new businesses. Learn how t...
By Trevor Sep 20, 2023Discover how to leverage the often overlooked footer of your ecommerce site to gain custom...
By Skye Sep 15, 2023