From 4fbd8c4daa8eb0ce990fdc19c564981d124fd665 Mon Sep 17 00:00:00 2001 From: Galip Tolga Erdem Date: Fri, 15 Sep 2023 18:12:42 -0400 Subject: [PATCH] Fixed product list page --- .../EShopOnAbp.PublicWeb/Pages/Index.cshtml | 87 +++++++++---------- .../src/EShopOnAbp.PublicWeb/Pages/index.css | 57 ++++++++++-- .../src/EShopOnAbp.PublicWeb/Pages/index.js | 8 +- 3 files changed, 99 insertions(+), 53 deletions(-) diff --git a/apps/public-web/src/EShopOnAbp.PublicWeb/Pages/Index.cshtml b/apps/public-web/src/EShopOnAbp.PublicWeb/Pages/Index.cshtml index d7609e36..731b9f42 100644 --- a/apps/public-web/src/EShopOnAbp.PublicWeb/Pages/Index.cshtml +++ b/apps/public-web/src/EShopOnAbp.PublicWeb/Pages/Index.cshtml @@ -9,17 +9,16 @@ @inject IOptions options @{ - const int productsColumnSize = 4; // TODO: update abp-column helper to plain html for proper row and columns css string pageHeader = L["OurProducts"]; } @section styles{ - + } @section scripts { - - + + } @if (Model.HasRemoteServiceError) @@ -27,50 +26,50 @@ pageHeader = L["CatalogServiceNotAvailable"]; } -
-
-

@pageHeader

+
+

@pageHeader

+
- @for (int i = 0; i < Math.Ceiling(Model.Products.Count / (double)productsColumnSize); i++) + @foreach (var product in Model.Products) { - - @for (int j = 0; j < productsColumnSize; j++) - { - - @if ((i * productsColumnSize) + j < Model.Products.Count) + var productPrice = product.Price.ToString("C", new CultureInfo("en-US")); + string productImage = !product.ImageName.IsNullOrEmpty() ? $"{options.Value.RemoteServices.Default.BaseUrl}product-images/{product.ImageName}" : $"{options.Value.RemoteServices.Default.BaseUrl}product-images/@product.ImageName"; + string buyText = L["Index:AddToBasket"]; +
+
+ +
+ +
@product.Name
+ @product.Code + +
+
+ +
+
+ @L["StockCount"]: @product.StockCount +
+ +
+
+
+ Added to cart +
+ @if (product.StockCount > 0) { - var product = Model.Products[(i * productsColumnSize) + j]; - var productPrice = product.Price.ToString("C", new CultureInfo("en-US")); - string productImage = !product.ImageName.IsNullOrEmpty() ? $"{options.Value.RemoteServices.Default.BaseUrl}product-images/{product.ImageName}" : $"{options.Value.RemoteServices.Default.BaseUrl}product-images/@product.ImageName"; - string buyText = L["Index:AddToBasket"]; -
- -
-
-
@product.Name
- @product.Code - @L["StockCount"]: @product.StockCount -
-
- - -
- @if (product.StockCount > 0) - { - - } - else - { - - } -
- @productPrice -
-
-
+ } - - } - + else + { + + } +
+ @productPrice +
+
+
+
}
diff --git a/apps/public-web/src/EShopOnAbp.PublicWeb/Pages/index.css b/apps/public-web/src/EShopOnAbp.PublicWeb/Pages/index.css index 9b2c3929..6551935a 100644 --- a/apps/public-web/src/EShopOnAbp.PublicWeb/Pages/index.css +++ b/apps/public-web/src/EShopOnAbp.PublicWeb/Pages/index.css @@ -5,20 +5,54 @@ a, a:hover, a:visited, a:active { color: inherit; text-decoration: none; + padding-bottom: 1em; } -.product-list-item { +.product-list { + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 1em 2em; /* row-gap column gap */ +} + +.product-container { + text-align: center; background-color: #fff; - padding: 2em; + padding: 2em 2em 1em 2em; border: 1px solid #eee; border-radius: 3px; box-shadow: 0 0 10px rgba(0, 0, 0, .05); margin-bottom: 2em; transition: all .2s; + display: flex; + flex: 0 0 20%; + flex-direction: column; +} + +.product-list-item { + display: flex; + flex-direction: column; +} + +.product-item-bottom { + display: flex; + flex-direction: column; + min-height: 70px; +} + +.product-title { + min-height: 70px; + padding-bottom: 1em; } -.product-list-item:hover { - box-shadow: 0 0 20px rgba(0, 0, 0, .1); +.product-count { + display: flex; + justify-content: center; + padding: 1em 0 1em 0em; +} + +.product-container:hover { + box-shadow: 1px 1px 20px rgba(0, 0, 0, .2); cursor: pointer; } @@ -30,10 +64,6 @@ a, a:hover, a:visited, a:active { opacity: .8 } -.product-info-box { - min-height: 80px; -} - .add-basket-button { display: none; font-weight: 500; @@ -41,6 +71,11 @@ a, a:hover, a:visited, a:active { .product-list-item:hover .add-basket-button { display: inline-block; + width: -webkit-fill-available; +} + +.info-section { + text-align: center; } .product-list-item:hover .info-section { @@ -51,4 +86,10 @@ a, a:hover, a:visited, a:active { font-weight: bolder; font-size: larger; line-height: 40px; +} + +.item-added { + display: none; + justify-content: center; + align-items: baseline; } \ No newline at end of file diff --git a/apps/public-web/src/EShopOnAbp.PublicWeb/Pages/index.js b/apps/public-web/src/EShopOnAbp.PublicWeb/Pages/index.js index 89ca351d..1615c87c 100644 --- a/apps/public-web/src/EShopOnAbp.PublicWeb/Pages/index.js +++ b/apps/public-web/src/EShopOnAbp.PublicWeb/Pages/index.js @@ -17,7 +17,13 @@ .data('abp-widget-manager') .refresh(); - abp.notify.success("Added product to your basket.", "Successfully added"); + abp.notify.success("Added product to your basket.", "Successfully added"); //TODO: localize the msg + var $itemAdded = $this.parent(".product-item-bottom").find(".item-added"); + $($itemAdded).css({display: "flex"}); + $this.css({opacity: 0.5}); + $this.animate({opacity: 1}, 2000); + }).catch(err => { + abp.notify.error(err.message, "Failed while adding item"); //TODO: localize the msg }); }); });