How do I loop a script when user selects a different variant?

Solved
allsignsTyler
Tourist
6 0 1

Here is the page I'm working on

https://nationalsignsource.com/collections/customizable-signs/products/rectangle-stickers-customize-...

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>

 

Accepted Solution (1)

Accepted Solutions
Ardi94
Pathfinder
101 2 26

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.

View solution in original post

Replies 5 (5)
Ardi94
Pathfinder
101 2 26

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

allsignsTyler
Tourist
6 0 1
We are using the Supply theme not sure if it is the same, or if you know
but I will look into this.
Ardi94
Pathfinder
101 2 26

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.

View solution in original post

allsignsTyler
Tourist
6 0 1

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";

 

allsignsTyler
Tourist
6 0 1

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.