I’ve already spent a few days on this, but I’m still pretty new to javascript, so I’ve been struggling with getting this to work.
For a client, I need to display the entire price calculation formula live on the single product page when the user selects a different variation of the product from the dropdown and/or when a different product length is entered (number field). In order to get the variation price, I’ve been using this:
$( ".single_variation_wrap" ).on( "show_variation", function ( event, variation ) {
var preis_variation = variation.display_regular_price;
var gewicht_variation = variation.weight;
} );
My issue is that I’m unable to access these two variables in the function that follows. I also tried setting global variables at the beginning, but these are not updated with the above code.
This is the full code:
<script>
jQuery( function( $ ) {
var preis_variation = 0;
var gewicht_variation = 0;
window.onload = function () {
// initiate function grundkosten on dropdown change
document.getElementById("pa_durchmesser").addEventListener('change', grundkosten);
// initiate function grundkosten on number field change
document.getElementById("wck_laenge").addEventListener('change', grundkosten);
// get variation price and weight
$( ".single_variation_wrap" ).on( "show_variation", function ( event, variation ) {
var preis_variation = variation.display_regular_price;
var gewicht_variation = variation.weight;
} );
// get additional information and display the calculation within a given html structure
function grundkosten() {
var uebertrag_laenge = document.getElementById("wck_laenge").value;
document.getElementById("facon").innerHTML = preis_variation;
document.getElementById("kosten_laenge").innerHTML = uebertrag_laenge;
document.getElementById("total_grundkosten").innerHTML = uebertrag_laenge * 0.50;
var uebertrag_goldpreis = document.getElementById("gold_preis_hidden").value;
document.getElementById("goldpreis_laenge").innerHTML = uebertrag_laenge;
document.getElementById("gewicht").innerHTML = gewicht_variation;
document.getElementById("goldpreis_aktuell").innerHTML = uebertrag_goldpreis;
document.getElementById("total_goldpreis").innerHTML = uebertrag_laenge * uebertrag_goldpreis;
}
}
} );
</script>
I tried moving this block
$( ".single_variation_wrap" ).on( "show_variation", function ( event, variation ) {
var preis_variation = variation.display_regular_price;
var gewicht_variation = variation.weight;
} );
into the function grundkosten hoping to get access to the variables, but no change. The function grundkosten still does not allow access to preis_variation and gewicht_variation.
I would greatly appreciate some help in how I can transfer the variables to the function grundkosten. Thanks a lot in advance!