chore: update icons and fix shopping cart numeric update

telerik · Aug 15, 2024 · 43783fd · 43783fd
1 parent c52a70d
commit 43783fd
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 42 deletions.
diff --git a/EShop/Web/Views/Account/ShoppingCart.cshtml b/EShop/Web/Views/Account/ShoppingCart.cshtml
@@ -93,16 +93,6 @@
 </script>
 
 <script id="quantityEditor-template" type="text/html">
-	@(Html.Kendo().NumericTextBox()
-		.Name("quantityEditor_#=ShoppingCartItemId#")
-		.HtmlAttributes(new { data_bind = "value: Quantity", @class = "quantity-editor" })
-		.Decimals(0)
-		.Format("\\#")
-		.Min(1)
-		.Max(100)
-		.Rounded(Rounded.None)
-		.Events(e => e.Change("updateShoppingCartChanges"))
-		.ToClientTemplate()
-	)
+    <input class="quantity-editor" data-bind="value: #:Quantity#" id="quantityEditor_#=ShoppingCartItemId#" name="quantityEditor_#=ShoppingCartItemId#" value="" />
 </script>
 
diff --git a/EShop/Web/Views/Products/_ListViewHeader.cshtml b/EShop/Web/Views/Products/_ListViewHeader.cshtml
@@ -37,7 +37,7 @@
 			.Items(i =>
 			{
 				i.Add().Icon("group").Selected(true);
-				i.Add().Icon("list-bulleted");
+				i.Add().Icon("list-unordered-square");
 			})
 			.HtmlAttributes(new { @class="toggle-view" })
 		)

diff --git a/EShop/Web/wwwroot/js/favorites.js b/EShop/Web/wwwroot/js/favorites.js
@@ -12,9 +12,8 @@ function addProductToFavorites(e) {
 				getFavoritesCount();
 				if ($(element[0]).find(".k-button-text")) {
 					$(element[0]).find(".k-button-text").text("Added to favorites");
-                }
-				icon.removeClass("k-i-heart-outline");
-				icon.addClass("k-i-heart");
+				}
+				kendo.ui.icon(icon, { icon: "heart" });
 			});
 		}
 		else {
@@ -23,11 +22,10 @@ function addProductToFavorites(e) {
 				if ($(element[0]).find(".k-button-text")) {
 					$(element[0]).find(".k-button-text").text("Add to favorites");
 				}
-				icon.removeClass("k-i-heart");
-				icon.addClass("k-i-heart-outline");
+				kendo.ui.icon(icon, { icon: "heart-outline" });
 			});
 		}
-	});	
+	});
 }
 
 function removeProductFromFavorites(e) {

diff --git a/EShop/Web/wwwroot/js/other.js b/EShop/Web/wwwroot/js/other.js
@@ -29,8 +29,7 @@ function distinguishFavorites() {
 				if (currentButton.find(".k-button-text")) {
 					currentButton.find(".k-button-text").text("Added to favorites");
 				}
-				icon.removeClass("k-i-heart-outline");
-				icon.addClass("k-i-heart");
+				kendo.ui.icon(icon, { icon: "heart" });
 			}
 		});
 	});
@@ -136,7 +135,7 @@ function changeUserCountry(e) {
 	} else {
 		stateDDL.value("");
 		stateDDL.enable(false);
-    }
+	}
 }
 
 function productCatalogClick() {

diff --git a/EShop/Web/wwwroot/js/shopping_cart.js b/EShop/Web/wwwroot/js/shopping_cart.js
@@ -2,47 +2,53 @@ function getShoppingCartGrid() {
 	return $("#shoppingCartGrid").data("kendoGrid");
 }
 
-function shoppingCartGridOnDataBound() {
-	$(".templateCell").each(function () {
-		eval($(this).children("script").last().html());
-	});
-
-	var rows = this.tbody.children();
-	var dataItems = this.dataSource.view();
-	for (var i = 0; i < dataItems.length; i++) {
+function shoppingCartGridOnDataBound(e) {
+	var grid = e.sender;
+	var items = e.sender.items();
 
+	items.each(function (e) {
+		var dataItem = grid.dataItem(this);
+		var ntb = $(this).find('.quantity-editor');
 		var ntbComponent = $(this).find('.quantity-editor[data-role="numerictextbox"]')
 		if (ntbComponent.data("kendoNumericTextBox")) {
 			return;
 		}
-		kendo.bind(rows[i], dataItems[i]);
-	}
+		$(ntb).kendoNumericTextBox({
+			change: updateShoppingCartChanges,
+			value: dataItem.Quantity,
+			"decimals": 0,
+			"format": "\\#",
+			"max": 100,
+			"min": 1,
+			"rounded": "none"
+		});
+	});
 
 	calculateShoppingCartTotal();
 	getShoppingCartItemsCount();
 }
 
 function removeItemFromShoppingCart(itemId) {
-	var rowToRemove = $("#remove_" + itemId).parent().parent();
+	var rowToRemove = $("#remove_" + itemId).closest('tr');
 	var grid = getShoppingCartGrid();
 
 	grid.removeRow(rowToRemove);
 	grid.dataSource.sync();
-
-	grid.dataSource.bind("sync", function (e) {
-		if (e.sender.data().length == 0) {
-			location.href = window.location.href.indexOf('eshop') > 0 ? "/aspnet-core/eshop/Account/ShoppingCart" : "/Account/ShoppingCart";
-		}
-	});
 }
 
-function updateShoppingCartChanges() {
+function updateShoppingCartChanges(e) {
+	var shoppingCartGrid = $('#shoppingCartGrid').data('kendoGrid');
+	var currentRow = $(e.sender.element).closest('tr');
+	var editDataItem = shoppingCartGrid.dataItem(currentRow);
+	var newQtyValue = e.sender.value();
+	editDataItem.set('Quantity', newQtyValue);
+	editDataItem.set('Total', newQtyValue * editDataItem.ProductPrice);
 	getShoppingCartGrid().dataSource.sync();
 }
 
 function checkoutShoppingCart() {
 	kendo.ui.progress($("#checkoutButton"), true);
-	location.href = window.location.href.indexOf('eshop') > 0 ?  "/aspnet-core/eshop/Account/CheckoutShoppingCart" : "/Account/CheckoutShoppingCart";
+	location.href = window.location.href.indexOf('eshop') > 0 ? "/aspnet-core/eshop/Account/CheckoutShoppingCart" : "/Account/CheckoutShoppingCart";
 }
 
 function calculateShoppingCartTotal() {
@@ -60,14 +66,14 @@ function calculateShoppingCartTotal() {
 function addProductToShoppingCart(e) {
 	var productId = e.sender.element[0].id.split('_')[1];
 	let getUrl = window.location.href.indexOf('eshop') > 0 ? "/aspnet-core/eshop/Account/AddProductToShoppingCart?productId=" : "/Account/AddProductToShoppingCart?productId=";
+
 	$.post(getUrl + productId, function () {
 		getShoppingCartItemsCount();
 	});
 }
-
 function getShoppingCartItemsCount() {
 	let getUrl = window.location.href.indexOf('eshop') > 0 ? "/aspnet-core/eshop/Account/GetShoppingCartItemsCount" : "/Account/GetShoppingCartItemsCount";
 	$.get(getUrl, function (data) {
-		$("#shoppingCartBadge").data("kendoBadge").text(data);
+		$('#shoppingCartBadge').data('kendoBadge').text(data);
 	});
 }