Jump to content

html text replace weirdly work

Go to solution Solved by Ciodensky,

Recommended Posts

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

Below is my code for replacing the text on the product-price. It works smoothly with non-subscription product while on the subscription product it works only on the ready function but when on selecting the variant it is not reading.

<!-- change the text "every 12 months" to "billed annually" in the price -->
<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("every 12 months", "<span style=\"color:#4D4D4D;font-size:14px;font-weight:normal;display:block;margin-top:8px\">— billed annually</span>");
    });
  });
</script>

 

Here's the screenshots of the one that is working. The "Billed annually" changed the "Every 12 months" that is default of the template.

459332453_ScreenShot2021-12-19at7_15_01AM.thumb.png.55b75207edb2d60c29c9c2b9ba5952f6.png

 

Here's now the other screenshot that is not working.

772448565_ScreenShot2021-12-19at7_21_42AM.thumb.png.295663d06632605b51949151d79dcc69.png

You may want to check my website for more details:

https://www.xystema.com/pricing

password: 030774

 

Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

  • Solution

I found the solution!

I added the html on.change javascript right next to my code which was intended only for ready function. Here's my additional code:

<!-- change the text "every 12 months" to "billed annually" in the price -->
<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("every 12 months", "<span style=\"color:#4D4D4D;font-size:14px;font-weight:normal;display:block;margin-top:8px\">— billed annually</span>");
    });
  });
  
  $(document).on("change", ".variant-select-wrapper > select", function() {  
    $(".product-price").html(function() { 
      return $(this).html().replace("every 12 months", "<span style=\"color:#4D4D4D;font-size:14px;font-weight:normal;display:block;margin-top:8px\">— billed annually</span>");
    });
  });
</script>

 

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.