Dynamic Variants on Checkout for different products (bundle options)

1

Hey, I’m looking to create 3 product options on Checkout that have different amount of my product in each. And based on the products they get, I need them to be able to pick variants for each: color and sizes. Like this:
variant options

I know you need to make Dynamic Variants through something like this:

But the support said I need JS code to make it work.

2

my friend, let me know how you did it?.
i am also struggling with creating a bundle like you showed
thanks

3

For this example, we will do the size variant and for 3 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:

image
image414×1444 47.1 KB

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

Finally, add three more form Elements for the Color variants (the data name should be something like this pair2_color).

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 variant1_size = document.querySelector('select[data-name="pair1_size"]');
        var variant2_size = document.querySelector('select[data-name="pair2_size"]');
        var variant3_size = document.querySelector('select[data-name="pair3_size"]');

       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 {
               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) => {
       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.

4

So the “pair” refers to product number right. So pair1_size and pair1_color go together to refer to first product option. pair2_size and pair2_color refer to 2nd product option and so on correct?

1 Like
5

yeah indeed,
the code was made for a pair of shoes and I made modifications that will make it fit you specifications.

6

Hi, i embedded the code below and it only shows the first dropdown field when i select the different radio buttons in my product list. It seems like the code is not connected to the product list variants. Any idea on how to fix it?

To clarify: I have one product and 3 different bundle options in my product list (1x, 2x and 3x) and the product comes in sizes XS,S,M,L and XL. The data name for the “select” form element are set to “pair1_size”, “pair2_size” and “pair3_size”.

 <script>
   let DefaultProduct = 1;
   function modifyVariants(variant) {

        var variant1_size = document.querySelector('select[data-name="pair1_size"]');
        var variant2_size = document.querySelector('select[data-name="pair2_size"]');
        var variant3_size = document.querySelector('select[data-name="pair3_size"]');

       if (variant == 1) {
               variant1_size.parentNode.parentNode.style.display = 'block';
               variant2_size.parentNode.parentNode.style.display = 'none';
               variant3_size.parentNode.parentNode.style.display = 'none';
       } else if (variant == 2) {
               variant1_size.parentNode.parentNode.style.display = 'block';
               variant2_size.parentNode.parentNode.style.display = 'block';
               variant3_size.parentNode.parentNode.style.display = 'none';
       } 
       else {
               variant1_size.parentNode.parentNode.style.display = 'block';
               variant2_size.parentNode.parentNode.style.display = 'block';
               variant3_size.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>
7

Hello Guys, it works for me but I don’t know how to connect the varation from the code with shopify variation? anyone has an idea ? Thanks