User-257070954 posted
Hi mgebhard,
As per your requesting i am giving my code
<body>
<div style="width:1536px; height:864px">
<input type="text" id="txtSearch" />
<input type="button" id="btnSearch" value="Search" />
<input type="button" id="btnViewCart" value="ViewCart" />
<input type="button" id="btnAddOrder" value="Add Order" />
<div id="divListProduct" style="width:900px; height:850px;"></div>
<div id="divCart" style="width:300px; height:500px ; background-color:yellow;float:right; margin-top:50px; margin-right:250px"></div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
var CartArray = [];
var CartCout = 0
var TotalAmount=0
$(document).ready(function () {
GetAllProduct(); // Page load All products loading
});
function GetAllProduct() {
var search = $("#txtSearch").val()
$.ajax({
type: "GET",
url: "https://localhost:44360/api/Product/GetSearchProduct?Products=" + $("#txtSearch").val() ,
dataType: "json",
success: function (result, status, xhr) {
ListProduct(result)
},
error: function (xhr, status, error) {
alert("Result: " + status + " " + error + " " + xhr.status + " " + xhr.statusText)
}
});
}
$("#btnSearch").click(function () {
GetAllProduct() // Loading product based on product name entered in search textbox
});
$("#btnViewCart").click(function () {
ViewCart() // To show all product added to his cart
});
//$("#btnAddOrder").click(function () {
// alert("Hi")
//});
function ListProduct(Product) { //Ui creation of product list once we received data from API
var obj = jQuery.parseJSON(Product.items);
var ProductHtml=''
$.each(obj, function (key, value) {
ProductHtml += "<div id=divParenList" + key + ";style=width:300px;height:200px;background-color:aqua;1px solid red>"
+ "<span id = spnProdListProdName" + key + ">" + value.ProductName + "</span> "
+ "<span id = spnProdListBarnd" + key + ">" + value.Brand + "</span> "
+ "<span id = spnProdListPrice" + key + ">" + value.Price + "</span> <br>"
+ "<img src=data:image/jpeg;base64," + value.Image2 + " width=200 height=80 /><br>"
+ "<span id = spnProdListQty" + key + " > <input type=text id=txtProdListQty" + key + " class=allownonlyumeric /></span> <br>"
+ "<input type=button id=btnAddCart-" + key + " value = Add onClick = AddToCart(this.id) />"
+ "<input type=hidden id=hdnProdListProductId" + key + " value = " + value.Id+" />"
+"</div > ";
});
$("#divListProduct").html(ProductHtml)
}
function AddToCart(id) { //Adding to CartArray When we click Add to cart button
var res = id.split('-');
var ProdId = res[1]
var CartArrayData = {};
CartArrayData.Id = $("#hdnProdListProductId" + ProdId).val()
CartArrayData.ProductName = $("#spnProdListProdName" + ProdId).html()
CartArrayData.BrandName = $("#spnProdListBarnd" + ProdId).html()
CartArrayData.ProdPrice = $("#spnProdListPrice" + ProdId).html()
CartArrayData.Qty = $("#txtProdListQty" + ProdId).val()
CartArrayData.TotalPrice = parseInt($("#spnProdListPrice" + ProdId).html()) * parseInt($("#txtProdListQty" + ProdId).val())
CartArray.push(CartArrayData);
}
function ViewCart() { //Ui creation of Basket(ViewCart) When we click on ViewCart Button
$.each(CartArray, function (key, value) {
TotalAmount += value.TotalPrice
$("#divCart").append("<div id=divCartParentList;style=width:300px;height:200px;background-color:orange>"
+ "<span id=spnCartProdName" + key + ">" + value.ProductName + "</span>"
+ " <span id=spnCartProdBrand" + key + ">" + value.BrandName + "</span>"
+ " <span id=spnCartProdPrice" + key + ">" + value.ProdPrice + "</span>"
+ " <span id=spnCartProdQty" + key + ">" + value.Qty + "</span>"
+ " <input type=hidden id=hdnCartProdId" + key + " value=" + value.Id + "/>"
+ " <span id=spnCartItemPTotalrice" + key + ">" + parseInt(value.Qty) * parseInt(value.ProdPrice) + "</span> "
+ TotalAmount + " </div >"
)
});
}
</script>
