Code for Dynamic variant Drop Down

Ask the community
1

Hello Guys,

I need your support.
I am selling leggings and when offering a BOGO I need to have a setup so that the customers can select different colors and size for the 2nd pair of legging.

I have 6 sizes (S,M, L, XL and 2XL) and 6 Colors (Black, Bray, Blue, Rose, Green and Beige)

Please I am waiting for your support. And Where exactly do i need to paste the code?

Thx

2

Hi @Basil_Miguehe !

Please see this loom which has a step by step guide: Dynamic Variants - 4 Variant Groups | Loom

This is the code you will need to add in your page:

<script>
   let DefaultProduct = 1;
   function modifyVariants(variant) {
       var variant1_color = document.querySelector('select[data-name="Size_1"]');
       var variant1_size = document.querySelector('select[data-name="Color_1"]');
       var variant2_color = document.querySelector('select[data-name="Size_2"]');
       var variant2_size = document.querySelector('select[data-name="Color_2"]');

       if (variant == 1) {
           variant1_color.parentNode.parentNode.style.display = 'block';
           variant1_size.parentNode.parentNode.style.display = 'block';
           variant2_color.parentNode.parentNode.style.display = 'none';
           variant2_size.parentNode.parentNode.style.display = 'none';
       } else if (variant == 2) {
           variant1_color.parentNode.parentNode.style.display = 'block';
           variant1_size.parentNode.parentNode.style.display = 'block';
           variant2_color.parentNode.parentNode.style.display = 'block';
           variant2_size.parentNode.parentNode.style.display = 'block';
       } else if (variant == 3) {
           variant1_color.parentNode.parentNode.style.display = 'block';
           variant1_size.parentNode.parentNode.style.display = 'block';
           variant2_color.parentNode.parentNode.style.display = 'block';
           variant2_size.parentNode.parentNode.style.display = 'block';
       }
   }

   //init
   modifyVariants(DefaultProduct);
   // Event handler
   document.querySelectorAll('.pl-radio').forEach((r, i) => {
       r.addEventListener("change", () => {
           modifyVariants(i+1);
       });
   });
</script>