154 lines
4.9 KiB
HTML
154 lines
4.9 KiB
HTML
<html
|
|
xmlns:th="http://www.thymeleaf.org"
|
|
>
|
|
|
|
<head>
|
|
<title>My Cart</title>
|
|
<link rel="stylesheet" href="css/bootstrap.min.css">
|
|
<style>
|
|
.badge-notify{
|
|
background:red;
|
|
position:relative;
|
|
top: -20px;
|
|
right: 10px;
|
|
}
|
|
.my-cart-icon-affix {
|
|
position: fixed;
|
|
z-index: 999;
|
|
}
|
|
/**
|
|
* Print stylesheet for yourwebsite.com
|
|
* @version 1.0
|
|
* @lastmodified 16.06.2016
|
|
*/
|
|
|
|
@media print {
|
|
.hide_product{
|
|
display: none!important;
|
|
}
|
|
body {
|
|
line-height: 1.3;
|
|
background: #fff !important;
|
|
color: #000;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 24pt;
|
|
}
|
|
|
|
h2, h3, h4 {
|
|
font-size: 14pt;
|
|
margin-top: 25px;
|
|
}
|
|
.box{
|
|
margin-bottom: 100px;
|
|
}
|
|
}
|
|
|
|
|
|
</style>
|
|
<link rel="stylesheet" th:href="@{css/bootstrap.min.css}">
|
|
<link rel="stylesheet" th:href="@{css/style.css}">
|
|
</head>
|
|
|
|
<body class="container">
|
|
|
|
<div class="page-header hide_product">
|
|
<h1>Products
|
|
<div style="float: right; cursor: pointer; ">
|
|
<a th:href="@{/login}"><span class="glyphicon glyphicon-user "></span></a>
|
|
</div>
|
|
<div style="float: right; cursor: pointer;">
|
|
<span class="glyphicon glyphicon-shopping-cart my-cart-icon"><span class="badge badge-notify my-cart-badge"></span></span>
|
|
</div>
|
|
</h1>
|
|
</div>
|
|
|
|
<!-- <button type="addNewProduct" class="hide_product" name="addNewProduct" id="addNewProduct">Add New Product</button> -->
|
|
<div class="row card">
|
|
|
|
<div class="col-md-3 text-center box hide_product" th:each="product:${products}">
|
|
<img th:src="'img/'+${product.img}" width="150px" height="150px">
|
|
<h3><span th:text="${product.name}"></span></h3>
|
|
<h4><strong th:text="${#numbers.formatCurrency(product.price)}"></strong></h4>
|
|
|
|
<button style="margin-bottom: 15px;" class="btn btn-primary my-cart-btn" th:attr="data-id=${product.id},data-name=${product.name},data-summary=${product.des},data-price=${product.price},data-image='img/'+${product.img}" data-quantity="1" >Add to Cart</button>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<script th:src="@{js/jquery-2.2.3.min.js}"></script>
|
|
<script type='text/javascript' th:src="@{js/bootstrap.min.js}"></script>
|
|
<script type='text/javascript' th:src="@{js/jquery.mycart.js}"></script>
|
|
<script type="text/javascript">
|
|
$(function () {
|
|
|
|
var goToCartIcon = function($addTocartBtn){
|
|
var $cartIcon = $(".my-cart-icon");
|
|
var $image = $('<img width="30px" height="30px" src="' + $addTocartBtn.data("image") + '"/>').css({"position": "fixed", "z-index": "999"});
|
|
$addTocartBtn.prepend($image);
|
|
var position = $cartIcon.position();
|
|
$image.animate({
|
|
top: position.top,
|
|
left: position.left
|
|
}, 500 , "linear", function() {
|
|
$image.remove();
|
|
});
|
|
}
|
|
|
|
$('.my-cart-btn').myCart({
|
|
currencySymbol: '$',
|
|
classCartIcon: 'my-cart-icon',
|
|
classCartBadge: 'my-cart-badge',
|
|
classProductQuantity: 'my-product-quantity',
|
|
classProductRemove: 'my-product-remove',
|
|
classCheckoutCart: 'my-cart-checkout',
|
|
affixCartIcon: true,
|
|
showCheckoutModal: true,
|
|
numberOfDecimals: 2,
|
|
|
|
|
|
clickOnAddToCart: function($addTocart){
|
|
goToCartIcon($addTocart);
|
|
},
|
|
afterAddOnCart: function(products, totalPrice, totalQuantity) {
|
|
console.log("afterAddOnCart", products, totalPrice, totalQuantity);
|
|
},
|
|
clickOnCartIcon: function($cartIcon, products, totalPrice, totalQuantity) {
|
|
console.log("cart icon clicked", $cartIcon, products, totalPrice, totalQuantity);
|
|
},
|
|
checkoutCart: function(products, totalPrice, totalQuantity) {
|
|
var checkoutString = "Total Price: " + totalPrice + "\nTotal Quantity: " + totalQuantity;
|
|
checkoutString += "\n\n id \t name \t summary \t price \t quantity \t image path";
|
|
$.each(products, function(){
|
|
checkoutString += ("\n " + this.id + " \t " + this.name + " \t " + this.summary + " \t " + this.price + " \t " + this.quantity + " \t " + this.image);
|
|
|
|
});
|
|
alert(checkoutString)
|
|
console.log("checking out", products, totalPrice, totalQuantity);
|
|
},
|
|
getDiscountPrice: function(products, totalPrice, totalQuantity) {
|
|
console.log("calculating discount", products, totalPrice, totalQuantity);
|
|
return totalPrice * 0.5;
|
|
}
|
|
});
|
|
|
|
$("#addNewProduct").click(function(event) {
|
|
var currentElementNo = $(".row").children().length + 1;
|
|
$(".row").append('<div class="col-md-3 text-center"><img src="images/img_empty.png" width="150px" height="150px"><br>product ' + currentElementNo + ' - <strong>$' + currentElementNo + '</strong><br><button class="btn btn-danger my-cart-btn" data-id="' + currentElementNo + '" data-name="product ' + currentElementNo + '" data-summary="summary ' + currentElementNo + '" data-price="' + currentElementNo + '" data-quantity="1" data-image="images/img_empty.png">Add to Cart</button><a href="#" class="btn btn-info">Details</a></div>')
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html>
|