How To Add Dynamic Variants Drop Downs to Select Size Or Color?

Ask the community
8

hello, I have two variants and 4 bundles. The first variant should work for all bundles, but the second one should show only if bundle 3 or bundle 4 is selected. Can you help what code would work for that?

I used your previous code and chat gpt to adjust it, and got this but it’s not working:

<script>
   let DefaultProduct = 1;
   
   function modifyVariants(variant) {
       // First selection for all bundles: gun_model_1
       var variant1 = document.querySelector('select[data-name="gun_model_1"]');
       // Second selection for Bundle 3 and Bundle 4: gun_model_2
       var variant2 = document.querySelector('select[data-name="gun_model_2"]');
       
       // Logic to show/hide the second selection element
       if (variant == 1 || variant == 2) {
           // Show only the first selection for Bundle 1 and Bundle 2
           variant1.parentNode.parentNode.style.display = 'block'; 
           variant2.parentNode.parentNode.style.display = 'none'; // Hide second variant
       } else if (variant == 3 || variant == 4) {
           // Show both selections for Bundle 3 and Bundle 4
           variant1.parentNode.parentNode.style.display = 'block'; 
           variant2.parentNode.parentNode.style.display = 'block'; // Show second variant
       }
   }

   // Initialize with the default product
   modifyVariants(DefaultProduct);
   
   // Event handler for radio buttons to switch between bundles
   document.querySelectorAll('.pl-radio').forEach((r, i) => {
       r.addEventListener("change", () => {
           modifyVariants(i+1);
       });
   });
</script>