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

fathx · March 10, 2023, 4:07pm

For this example, we will do the size variant and for 4 products.

1 - Adding your dropdowns:

In your page builder, you need to add a Form Element of type Select and set it up like the following:

You will then duplicate the same Form Element 4 times (because we will do 4 products in this example), the only thing you need to change is the Data Name (change the others to “pair2_size”, “pair3_size”, “pair4_size”).

2 - Adding the Custom JS code:

Go to Custom Codes > Custom JS(Body), and paste the following code:

<script>
   let DefaultProduct = 1;
   function modifyVariants(variant) {
       var variant1_color = document.querySelector('select[data-name="pair1_color"]');
       var variant2_color = document.querySelector('select[data-name="pair2_color"]');
       var variant3_color = document.querySelector('select[data-name="pair3_color"]');
       var variant4_color = document.querySelector('select[data-name="pair4_color"]');


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

       }
   }

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

PS: DefaultProduct is the index of the selected product by default.

Want to learn how to set up your dynamic variants and link them to Shopify Please see this documentation because that’s a different topic: https://docs.funnelish.com/integrations/shopify/set-up-dynamic-variants.

nominomi · November 20, 2023, 3:28pm

what about 5 variant?

fathx · November 21, 2023, 1:07am

Hi @nominomi,

Please make sure you add all of your dynamic variants and give them the right data Names.

Then use the following Custom Code instead of the one above.

<script>
    let DefaultProduct = 1;
    function modifyVariants(variant) {
        var variant1_color = document.querySelector('select[data-name="pair1_color"]');
        var variant2_color = document.querySelector('select[data-name="pair2_color"]');
        var variant3_color = document.querySelector('select[data-name="pair3_color"]');
        var variant4_color = document.querySelector('select[data-name="pair4_color"]');
 
 
        if (variant == 1) {
                variant1_color.parentNode.parentNode.style.display = 'block';
                variant2_color.parentNode.parentNode.style.display = 'none';
                variant3_color.parentNode.parentNode.style.display = 'none';
                variant4_color.parentNode.parentNode.style.display = 'none';
                variant5_color.parentNode.parentNode.style.display = 'none';
        } else if (variant == 2) {
                variant1_color.parentNode.parentNode.style.display = 'block';
                variant2_color.parentNode.parentNode.style.display = 'block';
                variant3_color.parentNode.parentNode.style.display = 'none';
                variant4_color.parentNode.parentNode.style.display = 'none';
                variant5_color.parentNode.parentNode.style.display = 'none';
        } 
        else if (variant == 3) {
                variant1_color.parentNode.parentNode.style.display = 'block';
                variant2_color.parentNode.parentNode.style.display = 'block';
                variant3_color.parentNode.parentNode.style.display = 'block';
                variant4_color.parentNode.parentNode.style.display = 'none';
                variant5_color.parentNode.parentNode.style.display = 'none';
        } else if (variant == 4) {
                variant1_color.parentNode.parentNode.style.display = 'block';
                variant2_color.parentNode.parentNode.style.display = 'block';
                variant3_color.parentNode.parentNode.style.display = 'block';
                variant4_color.parentNode.parentNode.style.display = 'block';
                variant5_color.parentNode.parentNode.style.display = 'none';
        } else  {
                variant1_color.parentNode.parentNode.style.display = 'block';
                variant2_color.parentNode.parentNode.style.display = 'block';
                variant3_color.parentNode.parentNode.style.display = 'block';
                variant4_color.parentNode.parentNode.style.display = 'block';
                variant5_color.parentNode.parentNode.style.display = 'block';
        }
    }
 
    //init
    modifyVariants(DefaultProduct);
    // Event handler
    document.querySelectorAll('.pl-radio').forEach((r, i) => {
        console.log(r);
        r.addEventListener("change", () => {
            modifyVariants(i+1);
        });
    });
 </script>

Let us know how it goes.

Best,
Fey @Funnelish.

Polar · March 14, 2024, 6:33pm

Hello, how would you do a code for 2 variants and three bundles

Belen_Mallea · March 14, 2024, 6:40pm

Hey there! It will depend on the names of the variants but you can do it as the example below adding it in CUSTOM JS BODY

Remember that you must change what is in bold to the data name you added to the form element
[data-name=“pair1_color1”]’

<script>
   let DefaultProduct = 1;
   function modifyVariants(variant) {
       var variant1_color = document.querySelector('select[data-name="pair1_color1"]');
       var variant1_size = document.querySelector('select[data-name="pair1_size1"]');
       var variant2_color = document.querySelector('select[data-name="pair2_color2"]');
       var variant2_size = document.querySelector('select[data-name="pair2_size2"]');
       var variant3_color = document.querySelector('select[data-name="pair3_size3"]');
       var variant3_size = document.querySelector('select[data-name="pair3_size3"]');

       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';
           variant3_color.parentNode.parentNode.style.display = 'none';
           variant3_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';
           variant3_color.parentNode.parentNode.style.display = 'none';
           variant3_size.parentNode.parentNode.style.display = 'none';
       } 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';
           variant3_color.parentNode.parentNode.style.display = 'block';
           variant3_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>

Polar · March 16, 2024, 9:40pm

how about two variants and two bundles

fathx · March 18, 2024, 9:50pm

@Polar Please use this code instead:

<script>
   let DefaultProduct = 1;
   function modifyVariants(variant) {
       var variant1_color = document.querySelector('select[data-name="pair1_color1"]');
       var variant1_size = document.querySelector('select[data-name="pair1_size1"]');
       var variant2_color = document.querySelector('select[data-name="pair2_color2"]');
       var variant2_size = document.querySelector('select[data-name="pair2_size2"]');

       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>