How to trigger jquery from the selection of the product-variant

Site URL: https://www.xystema.com/pricing

I have a script that works during initialization of the page. This script pertains to the changing the style of the product-price and it has many variants.

However, when I changed the variant, my script does not work. I think I need to trigger the script somewhere near the selection of the product-variant.

How would I do that?

I tried already all code injection (header, footer, store, code block) but still not working.

Help please... thanks.

P.S. my website password 061298 (see the Enterprise category)

12 minutes ago, bangank36 said:

$(document).on("change", ".variant-select-wrapper > select", function() {
	
})

Thanks!

But I tried it in settings > advanced > code injection > page header and it is not working.

Where should I put the code practically?

20 minutes ago, bangank36 said:

You can use change event of the variant select

$(document).on("change", ".variant-select-wrapper > select", function() {
	
})

 

What a coincidence! You just answered my question here.

https://forum.squarespace.com/topic/207716-change-the-style-of-the-product-variant-combobox-in-the-product-block/

I saw your code here that you put ">" on the "select" and I copied it, and IT WORKS!

In courtesy with you, can you just quickly answer the link above so I can mark it as a solution.

Many many thanks!

20 minutes ago, Ciodensky said:

Thanks!

But I tried it in settings > advanced > code injection > page header and it is not working.

Where should I put the code practically?

All jquery script should be wrap inside

$(document).ready(function() {

})

8 minutes ago, Ciodensky said:

What a coincidence! You just answered my question here.

https://forum.squarespace.com/topic/207716-change-the-style-of-the-product-variant-combobox-in-the-product-block/

I saw your code here that you put ">" on the "select" and I copied it, and IT WORKS!

In courtesy with you, can you just quickly answer the link above so I can mark it as a solution.

Many many thanks!

 

did it

7 minutes ago, bangank36 said:

All jquery script should be wrap inside

$(document).ready(function() {

})

Here's my code actually after inserting you code:

$(document).on("change", ".variant-select-wrapper > select", function() {
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
  <script>
    $(document).ready(function() {  
      $(".product-price").html(function() { 
        return $(this).html().replace("2,625.00", "<span style=\"font-size:50px;font-weight:bolder\">2,625<br></span>");
    });
  });
  </script>	
})

17 minutes ago, bangank36 said:

All jquery script should be wrap inside

$(document).ready(function() {

})

Got it now! I missed something in the code but it is now working. Here's the corrected code you suggested:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
  $(document).on("change", ".variant-select-wrapper > select", function() {  
    $(".product-price").html(function() { 
      return $(this).html().replace("2,625.00", "<span style=\"font-size:50px;font-weight:bolder\">2,625<br></span>");
    });
  });
</script>

Thank you!