Html Angaben variieren?
Hallo,
wir müssen in der Ausbildung eine Shopseite erstellen. Nun ist es so, dass ich Futter anbieten möchte und der Preis sich natürlich mit Anzahl und Menge ändert, also z.B.
2,50€ - 200g - 1 stück ,
5€ - 400g - 1 stück oder 5€ - 200g - 2 stück,
habt ihr Tipps, wie man das löst? ich finde im Internet nichts dazu...
1 Antwort
Für die reine Darstellung kann man an der Stelle JavaScript nutzen.
Einfaches Beispiel:
<!doctype html>
<title>Example</title>
<body>
<form>
<table>
<tr>
<th>Futtermittel</th>
<th>Menge</th>
<th>Preis</th>
</tr>
<tr>
<td>Hirse</td>
<td><input data-price="2.5" max="100" min="1" type="range"></td>
<td></td>
</tr>
<tr>
<td>Gerste</td>
<td><input data-price="1.5" max="100" min="1" type="range"></td>
<td></td>
</tr>
</table>
</form>
<script>
function getPrice(pricePerUnit, quantity) {
return pricePerUnit * quantity;
}
function updatePrice(inputElement) {
const pricePerUnit = parseFloat(inputElement.dataset.price);
const quantity = parseFloat(inputElement.value);
const priceColumn = inputElement.parentElement.nextSibling;
priceColumn.textContent = getPrice(pricePerUnit, quantity);
}
const products = document.querySelectorAll("input[data-price]");
for (const product of products) {
product.addEventListener("input", evt => updatePrice(evt.currentTarget));
updatePrice(product);
}
</script>
</body>
Jede Tabellenzeile besteht hier aus drei Spalten. Die zweite Spalte beinhaltet einen Regler für die Mengenangabe, die dritte Spalte bekommt den Preis.
Das Skript sucht alle Regler im Dokument, berechnet je Vorkommen den Preis für die dritte Spalte und stattet zudem jeden Regler mit einem Event Handler aus. Sollte der Wert des Reglers geändert werden, wird der Preis neu berechnet und neu gesetzt.
Die tatsächliche Preisberechnung bei einer Shopseite (insbesondere im Warenkorb/Checkout) sollte allerdings über ein Backend laufen. Das heißt, der Browser schickt lediglich die Menge und eine Produkt-ID an eine Anwendung, die auf Serverseite ausgeführt wird. Diese berechnet den Preis und gibt diese Information zurück an den Browser. Auf diese Weise wird eine Manipulation seitens des Nutzers verhindert.
Du kannst auch input-Felder mit dem Typ number oder text verwenden. Bei denen musst du allerdings auch das value-Attribut auf bspw. 0 setzen, andernfalls erhältst du für den Preis NaN. Es wäre wohl generell gut, 0 als Fallbackwert zu nutzen.
priceColumn.textContent = getPrice(pricePerUnit, quantity) || 0;
Geht das auch mit Zahlen? der Regler ist etwas... problematisch