Formular mit Auswertung


Warenkorb


Bild Ambi

von Hans Busch

500.00
500.00
Bild Life

von Hans Busch

800.00
800.00
1300.00
200.00
10.00
1510.00

Quellcode

<html>
<head>
<script src="https://cpwebassets.codepen.io/assets/editor/iframe/iframeConsoleRunner-7549a40147ccd0ba0a6b5373d87e770e49bb4689f1c2dc30cccc7463f207f997.js"></script>
<script src="https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-5e03f34e38152f20eb79c96b0b89c2d99c5085e9ae9386dc71e2f0b3c30bf513.js"></script>
<script src="https://cpwebassets.codepen.io/assets/editor/iframe/iframeRuntimeErrors-4f205f2c14e769b448bcf477de2938c681660d5038bc464e3700256713ebe261.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"/>

<style type="text/css">
.product-image {float: left; width: 20%;}
.product-details {float: left; width: 37%;}
.product-price {float: left; width: 12%;}
.product-quantity {float: left; width: 10%;}
.product-removal {float: left; width: 9%;}
.product-line-price {float: left; width: 12%; text-align: right;}
.group:before, .shopping-cart:before, .column-labels:before, .product:before, .totals-item:before, .group:after, .shopping-cart:after, .column-labels:after,
.product:after, .totals-item:after {content: ''; display: table;}
.group:after, .shopping-cart:after, .column-labels:after, .product:after, .totals-item:after {clear: both;}
.group, .shopping-cart, .column-labels, .product, .totals-item {zoom: 1;}
.product .product-price:before, .product .product-line-price:before, .totals-value:before {content: '€';}
h1 {font-weight: 100;}
label {color: #aaa;}
.shopping-cart {margin-top: -45px;}
.column-labels label {padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid #eee;}
.column-labels .product-image, .column-labels .product-details, .column-labels .product-removal {text-indent: -9999px;}
.product {margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #eee;}
.product .product-image {text-align: center;}
.product .product-image img {width: 100px; height:auto}
.product .product-details .product-title {margin-right: 20px; font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif; float:left}
.product .product-details .product-description {margin: 5px 20px 5px 0; line-height: 1.4em;float:left}
.product .product-quantity input {width: 40px;}
.product .remove-product {border: 0; padding: 4px 8px; background-color: #c66; color: #fff; font-family: "HelveticaNeue-Medium", "Helvetica Neue Medium"; font-size: 12px; border-radius: 3px;}
.product .remove-product:hover {background-color: #a44;}
.totals .totals-item {float: right; clear: both; width: 100%; margin-bottom: 10px;}
.totals .totals-item label {float: left; clear: both; width: 79%; text-align: right;}
.totals .totals-item .totals-value {float: right; width: 21%; text-align: right;}
.totals .totals-item-total {font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;}
.checkout {float: right; border: 0; margin-top: 20px; padding: 6px 25px; background-color: #6b6; color: #fff; font-size: 25px; border-radius: 3px;}
.checkout:hover {background-color: #494;}
@media screen and (max-width: 650px) {
.shopping-cart {margin: 0; padding-top: 20px; border-top: 1px solid #eee;}
.column-labels {display: none;}
.product-image {float: right; width: auto;}
.product-image img {margin: 0 0 10px 10px;}
.product-details {float: left; margin-bottom: 10px; width: auto;}
.product-price {clear: both; width: 70px;}
.product-quantity {width: 100px;}
.product-quantity input {margin-left: 20px;}
.product-quantity:before {content: 'x';}
.product-removal {width: auto;}
.product-line-price {float: right; width: 70px;}}
@media screen and (max-width: 350px) {
.product-removal {float: right;}
.product-line-price {float: right; clear: left; width: auto; margin-top: 10px;}
.product .product-line-price:before {content: 'Item Total: €';}
.totals .totals-item label {width: 60%;}
.totals .totals-item .totals-value {width: 40%;}}
</style>
</head>

<body >
<table align="center" cellpadding="0" cellspacing="0" class="auto-style28" style="width: 70%">
<tr><td>
<center>
<h1>Warenkorb</h1><br/>
<div class="shopping-cart">
<div class="column-labels">
<label class="product-image">Bild</label>
<label class="product-details">Produkt</label>
<label class="product-price">Preis</label>
<label class="product-quantity">Menge</label>
<label class="product-removal">Storno</label>
<label class="product-line-price">Gesamt</label></div>
<div class="product">
<div class="product-image"><img src="../Bilder/ambi.jpg"/></div>
<div class="product-details"><div class="product-title">Bild Ambi</div><br/><p class="product-description">von Hans Busch</p> </div>
<div class="product-price">500.00</div><div class="product-quantity"><input type="number" value="1" min="1"/></div>
<div class="product-removal"><button class="remove-product">Storno</button></div>
<div class="product-line-price">500.00</div></div>
<div class="product">
<div class="product-image"><img src="../Bilder/life.jpg"/></div>
<div class="product-details"><div class="product-title">Bild Life</div><br/><p class="product-description">von Hans Busch</p> </div>
<div class="product-price">800.00</div>
<div class="product-quantity"><input type="number" value="1" min="1"/></div>
<div class="product-removal">
<button class="remove-product">Storno</button></div>
<div class="product-line-price">800.00</div></div>
<div class="totals">
<div class="totals-item">
<label>Summe</label><div class="totals-value" id="cart-subtotal">1300.00</div></div>
<div class="totals-item"><label>Mehrwertsteuer (19%)</label><div class="totals-value" id="cart-tax">200.00</div></div>
<div class="totals-item"><label>Versandkosten</label><div class="totals-value" id="cart-shipping">10.00</div></div>
<div class="totals-item totals-item-total"><label>Zahlbetrag</label><div class="totals-value" id="cart-total">1510.00</div></div></div>
<button class="checkout">Checkout</button></div>
</td></tr>
</table><br/>
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdpn.io/cpe/boomboom/pen.js?key=pen.js-fa3dcfb9-554a-0e31-2eac-a5f855391fdf" crossorigin></script>
<script>
var taxRate = 0.19;
var shippingRate = 15.00;
var fadeTime = 300;
$('.product-quantity input').change( function() { updateQuantity(this);});
$('.product-removal button').click( function() { removeItem(this);});
function recalculateCart() { var subtotal = 0;
$('.product').each(function () { subtotal += parseFloat($(this).children('.product-line-price').text()); });
var tax = subtotal * taxRate;
var shipping = (subtotal > 0 ? shippingRate : 0);
var total = subtotal + tax + shipping;
$('.totals-value').fadeOut(fadeTime, function() {
$('#cart-subtotal').html(subtotal.toFixed(2));
$('#cart-tax').html(tax.toFixed(2));
$('#cart-shipping').html(shipping.toFixed(2));
$('#cart-total').html(total.toFixed(2));
if(total == 0){ $('.checkout').fadeOut(fadeTime);
}else{ $('.checkout').fadeIn(fadeTime); }
$('.totals-value').fadeIn(fadeTime); }); }
function updateQuantity(quantityInput)
{ var productRow = $(quantityInput).parent().parent();
var price = parseFloat(productRow.children('.product-price').text());
var quantity = $(quantityInput).val();
var linePrice = price * quantity;
productRow.children('.product-line-price').each(function () {
$(this).fadeOut(fadeTime, function() {
$(this).text(linePrice.toFixed(2));
recalculateCart();
$(this).fadeIn(fadeTime); }); }); }
function removeItem(removeButton)
{ var productRow = $(removeButton).parent().parent();
productRow.slideUp(fadeTime, function() {
productRow.remove();
recalculateCart(); });}
</script>
</body>

</html>