Preisberechnung basierend auf Abmessungen auf der WooCommerce-Einzelproduktseite

Bezogen auf “Ausgewählten Variationspreis in jQuery für Woocommerce Variable Produkte erhalten” Antwortcode,
In meinem Code unten habe ich ein Problem mit der Preisberechnung eines variablen WooCommerce-Produkts.

Der Preis wird mit 10 oder 1000 multipliziert, je nachdem, welche Option in einem Dropdown ausgewählt wurde, was nicht passieren soll und ich weiß nicht, warum es passiert.

Hier ist mein Code:

<script>
    jQuery(function($) {
        var jsonData = <?php echo json_encode($variations_data); ?>,
            inputVID = 'input.variation_id';

        $('input').change( function(){
            if( '' != $(inputVID).val() ) {
                var vid      = $(inputVID).val(), // VARIATION ID
                    length   = $('#cfwc-title-field').val(), // LENGTH
                    diameter = $('#diameter').val(),  // DIAMETER
                    ene_enden = $('#id_dropdown_one_end').find('option:selected').attr("value_one_end"),
                    vprice=""; // Initilizing

                // Loop through variation IDs / Prices pairs
                $.each( jsonData, function( index, price ) {
                    if( index == $(inputVID).val() ) {
                        vprice = price; // The right variation price
                    }
                });
                var rope_price = (length*vprice) + ene_enden;
                if (rope_price != 0){
                    $('.price').html(rope_price+',-');
                }

                alert('variation Id: '+vid+' || Lengde: '+length+' || Diameter: '+diameter+' || Variantpris: '+vprice+ ' || Rope price: '+rope_price+' || ene_enden = '+ene_enden);

            }
        });
    });
</script>

Aus irgendeinem Grund wird rope_price mit 10 multipliziert oder mit 0 verkettet, wenn die für „I enden av tauet“ ausgewählte Option „Ingenting“ ist (ihr Wert ist 0). Wenn ich die ausgewählte Option in eine der anderen ändere, wird rope_price mit 1000 multipliziert oder mit 00 verkettet. Ich weiß nicht, warum das passiert. Irgendwelche Ideen?

Weil Sie Zeichenfolgen verketten. Ist nicht das Gleiche 1 + 0 als "1" + "0"wie Sie hier überprüfen können:

console.log("1 + 0 =", 1 + 0);
console.log('"1" + "0" =', "1" + "0");

Wenn Sie einen Wert von einem HTML-Objekt erhalten, erhalten Sie ihn als Zeichenfolge. Wenn Sie es als Zahl verwenden möchten, müssen Sie es vorher konvertieren. Sie können beide verwenden Number oder parseFloat (eben parseIntentfernt aber Dezimalstellen).

var oneNumber = 1;
var oneString = "1";
var oneConverted = Number(oneString);

console.log("typeof oneNumber:", typeof oneNumber);
console.log("typeof oneString:", typeof oneString);
console.log("typeof oneConverted:", typeof oneConverted);

console.log("oneNumber + oneNumber =", oneNumber + oneNumber);
console.log('oneString + oneString =', oneString + oneString);
console.log('oneConverted + oneConverted =', oneConverted + oneConverted);

Das genaue Problem, das Sie haben, ist Ihr ene_enden Variable ist ein String in der Zeile var rope_price = (length*vprice) + ene_enden;. Wenn Sie zwei Zeichenfolgen multiplizieren, werden sie automatisch in eine Zahl umgewandelt (Ihre (length*vprice)), aber wenn Sie diese Zahl mit einer anderen Zeichenfolge verketten, werden sie automatisch wieder in eine Zeichenfolge konvertiert (Ihre + ene_enden), also müssen Sie zuerst konvertieren ene_enden in eine Zahl umwandeln, oder besser alle erwarteten Zahlenvariablen in eine Zahl umwandeln.