Callback function to change product price color

Highlighted
New Member
1 0 0

Hey all, 

 

First time posting here and I'm a bit new to coding so I hope this isn't too silly of a question.

I'm trying to setup a callback function to change the color of my product price depending on if it's on special or not. I originally setup a if statement that checked if compare_at_price > price and that worked but wouldn't update when variant wad changed. I then found this page which is about defining a callback. Below I'll put the attempts I tried to get it to work - I tried to use both of these in product-template.liquid.

<script>
  //Variables for schema settings
  var saleTextColor = {{ settings.sale_text }};
  var colorTextBody = {{ settings.color_body_text }};
  
  //Callback function
  var selectCallback = function(variant, selector) {
 
  //ifelse statement to change text color
  if (variant) {
  if (variant.compare_at_price > variant.price) {
document.getElementById("ProductPrice").style.color = "saleTextColor";
  } else {
document.getElementById("ProductPrice").style.color = "colorTextBody";
    }
    }
};
</script>
 
The other one:
 
<script>
  //Variables for schema settings
  $saleTextColor: {{ settings.sale_text }};
  $colorTextBody: {{ settings.color_body_text }};
  
  //Callback function
  var selectCallback = function(variant, selector) {
  //ifelse statement to change text color
  if (variant.compare_at_price > variant.price) {
          $("#ProductPrice").css({"color": saleTextColor});
  } else {
  $("#ProductPrice").css({"color": colorTextBody});
    }
};
</script>
 
Neither attempt did anything at all so I was hoping someone could point me in the right direction for how to resolve this. I feel like it's something simple but I could also be totally off point hahaha
 
Thanks heaps for you help in adavnce
0 Likes