Html Quellcode für M2 und Preis Rechner

ID: 517583
L
5 März 2023
5
0
Hallo liebe Gemeinschaft,

ich möchte in meiner Website ein Rechner einbauen der den Kunden die Möglichkeit bieten tut, länge mal breite und denn den Preis anzugeben.

Wie kann ich den Code mit Woocommerce verknüpfen ?

Hier ein Beispiel von einer Seite die ein Ähnliches Konzept haben, aber mit Sachen wie Sichtschutz und keine Tischlerarbeiten.

HTML:
<html>
  <head>
<title>Flächenberechnung und Preis</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Flächenberechnung und Preis</h1>
<form>
<label for="laenge">Länge in Metern:</label>
<input type="number" id="laenge" name="laenge" required>
<br>
<label for="breite">Breite in Metern:</label>
<input type="number" id="breite" name="breite" required>
<br>
<label for="preis">Preis pro Quadratmeter:</label>
<input type="number" id="preis" name="preis" required>
<br>
<button type="button" onclick="berechne()">Berechnen</button>
</form>
<br>
<div id="ergebnis"></div>
<script>
function berechne() {
// Eingabefelder auslesen
const laenge = document.getElementById("laenge").value;
const breite = document.getElementById("breite").value;
const preis = document.getElementById("preis").value;

// Fläche berechnen
const flaeche = laenge * breite;

// Preis berechnen
const gesamtpreis = flaeche * preis;

// Ergebnis ausgeben
document.getElementById("ergebnis").innerHTML = "Fläche: " + flaeche + " m²<br>Preis: " + gesamtpreis.toFixed(2) + " €";
      }
    </script>
</body>
</html>