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>

Dimitrije_Spanovic · October 22, 2024, 11:16am

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>

BelenFunnelishTeam · October 22, 2024, 4:28pm

Hi Dimitrije_Spanovic,

The code itself is fine. However, in order for it to work properly keep in mind the following details:

The design of the checkout form (including product list and variants) has to be within a row (not inside containers)
You must have 4 variant groups (gun_model_1, gun_model_2, gun_model_3 and gun_model_4) and make the forms of gun_model_3 and gun_model_4 hidden in all devices
Lastly, the page has to be with your custom domain (if using the free subdomain, the code won’t load)

Please review the conversation you opened with our Support Team for further details.

Belén @Funnelish