DopeyCode/marmeladenladen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ordersubmit

Browse Source
This commit is contained in:
StockiP
2022-06-02 08:09:40 +02:00
parent dd12b3f6ee
commit bd5e702782
5 changed files with 538 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
components/checkout.html Normal file
View File

@@ -0,0 +1,135 @@
<div class="container wrapper maincontent">
<div class="row g-5">
<div class="col-md-5 col-lg-4 order-md-last">
<h4 class="d-flex justify-content-between align-items-center mb-3">
<span class="text-success">Dein Einkaufswagen</span>
<span class="badge bg-success rounded-pill" id="gesamtMengeCart"></span>
</h4>
<ul class="list-group mb-3" id="productListSideways">
</ul>
<form class="card p-2">
<div class="input-group">
<input type="text" class="form-control" placeholder="Promo code">
<button type="submit" class="btn btn-secondary">Redeem</button>
</div>
</form>
</div>
<div class="col-md-7 col-lg-8">
<h4 class="mb-3">Ihre angegebene Adresse:</h4>
<form class="needs-validation" novalidate="">
<div class="row g-3">
<div class="col-sm-6">
<label for="firstName" class="form-label">Vorname</label>
<input type="text" class="form-control" id="firstName" placeholder="" required="">
<div class="invalid-feedback">
Valid first name is required.
</div>
</div>
<div class="col-sm-6">
<label for="lastName" class="form-label">Nachname</label>
<input type="text" class="form-control" id="lastName" placeholder="" required="">
<div class="invalid-feedback">
Valid last name is required.
</div>
</div>
<div class="col-12">
<label for="address" class="form-label">Address</label>
<input type="text" class="form-control" id="address" placeholder="1234 Main St" required="">
<div class="invalid-feedback">
Please enter your shipping address.
</div>
</div>
<div class="col-md-4">
<label for="state" class="form-label">Stadt</label>
<input type="text" class="form-control" id="city" placeholder="" required="">
<div class="invalid-feedback">
Please provide a valid state.
</div>
</div>
<div class="col-md-3">
<label for="zip" class="form-label">Zip</label>
<input type="text" class="form-control" id="zip" placeholder="" required="">
<div class="invalid-feedback">
Zip code required.
</div>
</div>
</div>
<hr class="my-4">
<!--
<div class="form-check">
<input type="checkbox" class="form-check-input" id="same-address">
<label class="form-check-label" for="same-address">Shipping address is the same as my billing
address</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="save-info">
<label class="form-check-label" for="save-info">Save this information for next time</label>
</div>
-->
<h4 class="mb-3">Bezahlung</h4>
<div class="my-3">
<div class="form-check">
<input id="credit" name="paymentMethod" type="radio" checked="checked" required="" onclick="javascript:paymentTypeClicked()">
<label class="form-check-label" for="credit">Kreditkarte</label>
</div>
<div class="form-check">
<input id="lieferung" name="paymentMethod" type="radio" required="" onclick="javascript:paymentTypeClicked()">
<label class="form-check-label" for="lieferung">Bei Lieferung (Bar oder Karte)</label>
</div>
</div>
<div class="row gy-3" id="creditCardData">
<div class="col-md-6">
<label for="cc-name" class="form-label">Name auf der Karte</label>
<input type="text" class="form-control" id="cc-name" placeholder="" required="">
<small class="text-muted">Vor und Nachname wie auf der Karte ersichtlich</small>
<div class="invalid-feedback">
Name on card is required
</div>
</div>
<div class="col-md-6">
<label for="cc-number" class="form-label">Kreditkartennummer</label>
<input type="text" class="form-control" id="cc-number" placeholder="" required="">
<div class="invalid-feedback">
Credit card number is required
</div>
</div>
<div class="col-md-3">
<label for="cc-expiration" class="form-label">Ablaufdatum</label>
<input type="text" class="form-control" id="cc-expiration" placeholder="" required="">
<div class="invalid-feedback">
Expiration date required
</div>
</div>
<div class="col-md-3">
<label for="cc-cvv" class="form-label">CVV</label>
<input type="text" class="form-control" id="cc-cvv" placeholder="" required="">
<div class="invalid-feedback">
Security code required
</div>
</div>
</div>
<hr class="my-4">
<button class="w-100 btn btn-success btn-lg" id="submitOrder">Bestellung aufgeben</button>
</form>
</div>
</div>
</div>
<script src="../js/checkout.js"></script>