Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Here is the page I'm working on
I want to run this script when the price gets updated so the discount table will also update, I'm assuming I would need a loop so the most up to date price gets plugged into the formula.
Thanks for any assistance.
<script>
var price = document.querySelector('#productPrice-alternate2 > span').innerText
var price2 = price.replace( /^\D+/g, ''); // replace all leading non-digits with nothing
document.getElementById("20%").innerHTML = "$" + (price2-price2*.20);
document.getElementById("30%").innerHTML = "$" + (price2-price2*.30);
document.getElementById("40%").innerHTML = "$" + (price2-price2*.40);
document.getElementById("50%").innerHTML = "$" + (price2-price2*.50);
document.getElementById("60%").innerHTML = "$" + (price2-price2*.60);
</script>
Solved! Go to the solution
This is an accepted solution.
For supply go to theme.js.liquid and search for
productVariantCallback: function(variant)
scroll down a little bit and you see the closing "}," just add your code above it and you can get the variant price with
variant.price
make your calculations and input the data the same way you were doing before.
It depends on which theme you are using. But before you start, save a backup of your theme and don't work on your live theme.
I would go to the main javascript file, usually it's called theme.js or global.js, make sure it is the javascript file that updates your variant information.
Find the part that activates on variant change. in Dawn it's called onVariantChange() or in Debut it is _onSelectChange: function().
Now, look how the functions are called (something like this.updateMedia();) and just create another one just like those. Lastly, put your code inside the function that you just created and you can get the price using variant.price and put it in your calculations.
Also, I would round up my price to the nearest cent too just so it looks more appealing and accurate, your 40% off price is $2.9699999999999998 which in reality is $2.97 when added to cart.
I'm not a programmer, just learned some tweaks when customizing my themes, so I can't tell you exactly what to write.
Hope this helps
This is an accepted solution.
For supply go to theme.js.liquid and search for
productVariantCallback: function(variant)
scroll down a little bit and you see the closing "}," just add your code above it and you can get the variant price with
variant.price
make your calculations and input the data the same way you were doing before.
Do the contents of the script get moved into the theme.js.liquid? When doing so, the code that should insert something into the table does not work. the code is searching for an html tag with a specified id to be able to insert the results.
document.getElementById("20%").innerHTML = "$" + (price2-price2*.20);
document.getElementById("30%").innerHTML = "This Text Should Be in the table";
I got my initial code working I had to include a script asking for the location of the .js file. I just need to now find the variable that changes and updates so the table updates.
Hey Community 👋 Did you know that March 15th is National Everything You Think Is W...
By JasonH Apr 1, 2025Discover how to increase the efficiency of commerce operations with Shopify Academy's l...
By Jacqui Mar 26, 2025Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025