Jump to content

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

Go to solution Solved by Beyondspace,

Recommended Posts

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)

Link to comment
  • Solution
7 minutes ago, Ciodensky said:

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)

You can use change event of the variant select

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

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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!

 

Link to comment
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() {

})

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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>	
})

 

Link to comment
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!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.