From 9e1e937f96c09eef4f729055386c000ea4e2af86 Mon Sep 17 00:00:00 2001 From: Galip Tolga Erdem Date: Tue, 4 Jan 2022 21:57:14 +0300 Subject: [PATCH 1/5] updated empty basket message --- .../Components/Basket/Default.cshtml | 21 ++++++++++----- .../components/basket/basket-widget.css | 26 +++++++++---------- .../Localization/EShopOnAbp/en.json | 3 +++ .../Localization/EShopOnAbp/tr.json | 3 +++ 4 files changed, 33 insertions(+), 20 deletions(-) diff --git a/apps/public-web/src/EShopOnAbp.PublicWeb/Components/Basket/Default.cshtml b/apps/public-web/src/EShopOnAbp.PublicWeb/Components/Basket/Default.cshtml index 37762811..18ee4e45 100644 --- a/apps/public-web/src/EShopOnAbp.PublicWeb/Components/Basket/Default.cshtml +++ b/apps/public-web/src/EShopOnAbp.PublicWeb/Components/Basket/Default.cshtml @@ -8,11 +8,18 @@ @if (!Model.Items.Any()) {
-

- - Your basket is empty. Click to a product to add it! - -

+ + + +

@L["EmptyBasket"]

+
+
+ @L["CheckOtherProducts"] @L["ContinueShopping"] +
+ + + +
} else @@ -47,8 +54,8 @@
- @await Component.InvokeAsync(typeof(PurchaseWidgetViewComponent), - new { Basket = Model, ButtonDescription = "CompletePurchase"}) + @await Component.InvokeAsync(typeof(PurchaseWidgetViewComponent), + new {Basket = Model, ButtonDescription = "CompletePurchase"})
} diff --git a/apps/public-web/src/EShopOnAbp.PublicWeb/wwwroot/components/basket/basket-widget.css b/apps/public-web/src/EShopOnAbp.PublicWeb/wwwroot/components/basket/basket-widget.css index 44989ae5..de933106 100644 --- a/apps/public-web/src/EShopOnAbp.PublicWeb/wwwroot/components/basket/basket-widget.css +++ b/apps/public-web/src/EShopOnAbp.PublicWeb/wwwroot/components/basket/basket-widget.css @@ -1,17 +1,17 @@ -.basket-list -{ - background-color: #fff; - padding: 1em; - border: 1px solid #666; - border-radius: 3px; - box-shadow: 0 0 10px rgba(0, 0, 0, .05); - margin-bottom: 0.5em; - transition: all .2s; -} +/*.basket-list*/ +/*{*/ +/* background-color: #fff;*/ +/* padding: 1em;*/ +/* border: 1px solid #666;*/ +/* border-radius: 3px;*/ +/* box-shadow: 0 0 10px rgba(0, 0, 0, .05);*/ +/* margin-bottom: 0.5em;*/ +/* transition: all .2s;*/ +/*}*/ -.basket-list:hover { - box-shadow: 0 0 20px rgba(0, 0, 0, .1); -} +/*.basket-list:hover {*/ +/* box-shadow: 0 0 20px rgba(0, 0, 0, .1);*/ +/*}*/ .basket-list-item { margin-top: 1em; diff --git a/shared/EShopOnAbp.Shared.Localization/Localization/EShopOnAbp/en.json b/shared/EShopOnAbp.Shared.Localization/Localization/EShopOnAbp/en.json index c6389ed1..40b6aee0 100644 --- a/shared/EShopOnAbp.Shared.Localization/Localization/EShopOnAbp/en.json +++ b/shared/EShopOnAbp.Shared.Localization/Localization/EShopOnAbp/en.json @@ -4,6 +4,9 @@ "Menu:Home": "Home", "Login": "Login", "YourBasket": "Your Basket", + "EmptyBasket": "Empyt basket", + "CheckOtherProducts": "You can check the recommended products below or", + "ContinueShopping": "continue shopping.", "Total": "Total", "OurProducts": "Our Products", "CatalogServiceNotAvailable": "Catalog Service is unavailable right now! Try again later...", diff --git a/shared/EShopOnAbp.Shared.Localization/Localization/EShopOnAbp/tr.json b/shared/EShopOnAbp.Shared.Localization/Localization/EShopOnAbp/tr.json index 7b0c9f7e..37259af1 100644 --- a/shared/EShopOnAbp.Shared.Localization/Localization/EShopOnAbp/tr.json +++ b/shared/EShopOnAbp.Shared.Localization/Localization/EShopOnAbp/tr.json @@ -4,6 +4,9 @@ "Menu:Home": "Ana Sayfa", "Login": "Giriş", "YourBasket": "Sepetiniz", + "EmptyBasket": "Sepetiniz boş", + "CheckOtherProducts": "Aşağıdaki önerilen öğeleri takip edebilirsiniz veya", + "ContinueShopping": "alışverişe devam edin.", "Total": "Toplam", "OurProducts": "Ürünlerimiz", "CatalogServiceNotAvailable": "Ürün servisine şu anda ulaşılamıyor! Lütfen sonra tekrar deneyiniz...", From 24e70c276ccee3a583c5528d56a9d03f387e3c63 Mon Sep 17 00:00:00 2001 From: Galip Tolga Erdem Date: Wed, 5 Jan 2022 16:56:57 +0300 Subject: [PATCH 2/5] added purchase total localization --- .../EShopOnAbp.PublicWeb/Components/Purchase/Default.cshtml | 5 ++++- .../Localization/EShopOnAbp/en.json | 1 + .../Localization/EShopOnAbp/tr.json | 1 + 3 files changed, 6 insertions(+), 1 deletion(-) diff --git a/apps/public-web/src/EShopOnAbp.PublicWeb/Components/Purchase/Default.cshtml b/apps/public-web/src/EShopOnAbp.PublicWeb/Components/Purchase/Default.cshtml index f8a60683..cc029b09 100644 --- a/apps/public-web/src/EShopOnAbp.PublicWeb/Components/Purchase/Default.cshtml +++ b/apps/public-web/src/EShopOnAbp.PublicWeb/Components/Purchase/Default.cshtml @@ -6,7 +6,10 @@
-

Total Selected (@Model.Basket.Items.Count)

+ @{ + var totalCount = Model?.Basket.Items.Count ?? 0; + } +

@L["TotalSelected", totalCount]

$@Model.Basket.TotalPrice.ToString("0.00")

diff --git a/shared/EShopOnAbp.Shared.Localization/Localization/EShopOnAbp/en.json b/shared/EShopOnAbp.Shared.Localization/Localization/EShopOnAbp/en.json index 40b6aee0..2ed0c823 100644 --- a/shared/EShopOnAbp.Shared.Localization/Localization/EShopOnAbp/en.json +++ b/shared/EShopOnAbp.Shared.Localization/Localization/EShopOnAbp/en.json @@ -8,6 +8,7 @@ "CheckOtherProducts": "You can check the recommended products below or", "ContinueShopping": "continue shopping.", "Total": "Total", + "TotalSelected": "Total Selected ({0})", "OurProducts": "Our Products", "CatalogServiceNotAvailable": "Catalog Service is unavailable right now! Try again later...", "StockCount": "Stock Count", diff --git a/shared/EShopOnAbp.Shared.Localization/Localization/EShopOnAbp/tr.json b/shared/EShopOnAbp.Shared.Localization/Localization/EShopOnAbp/tr.json index 37259af1..f01cb1dc 100644 --- a/shared/EShopOnAbp.Shared.Localization/Localization/EShopOnAbp/tr.json +++ b/shared/EShopOnAbp.Shared.Localization/Localization/EShopOnAbp/tr.json @@ -8,6 +8,7 @@ "CheckOtherProducts": "Aşağıdaki önerilen öğeleri takip edebilirsiniz veya", "ContinueShopping": "alışverişe devam edin.", "Total": "Toplam", + "TotalSelected": "Seçilen Ürünler ({0})", "OurProducts": "Ürünlerimiz", "CatalogServiceNotAvailable": "Ürün servisine şu anda ulaşılamıyor! Lütfen sonra tekrar deneyiniz...", "StockCount": "Stokta", From 02fff9b6430e9344a84941a5d5488fd297c04506 Mon Sep 17 00:00:00 2001 From: Galip Tolga Erdem Date: Wed, 5 Jan 2022 23:01:25 +0300 Subject: [PATCH 3/5] updated basket ui and added increase-decrease quantity functionality --- .../Components/Basket/Default.cshtml | 62 ++++++--- .../components/basket/basket-widget.css | 131 ++++++++++++++---- .../components/basket/basket-widget.js | 44 +++++- 3 files changed, 180 insertions(+), 57 deletions(-) diff --git a/apps/public-web/src/EShopOnAbp.PublicWeb/Components/Basket/Default.cshtml b/apps/public-web/src/EShopOnAbp.PublicWeb/Components/Basket/Default.cshtml index 18ee4e45..49a7966e 100644 --- a/apps/public-web/src/EShopOnAbp.PublicWeb/Components/Basket/Default.cshtml +++ b/apps/public-web/src/EShopOnAbp.PublicWeb/Components/Basket/Default.cshtml @@ -14,7 +14,9 @@

@L["EmptyBasket"]


- @L["CheckOtherProducts"] @L["ContinueShopping"] + + @L["CheckOtherProducts"] @L["ContinueShopping"] +
@@ -26,31 +28,47 @@ {
-
+
@foreach (var item in Model.Items) { -
- @if (!item.ImageName.IsNullOrEmpty()) - { - - } - else - { - - } - @item.ProductName - @if (item.Count > 1) - { - (@("x" + item.Count)) - } - - $@item.TotalPrice.ToString("0.00") - + string imageName = item.ImageName.IsNullOrEmpty() ? "/product-images/noimage.jpg" : $"/product-images/{item.ImageName}"; + var price = (item.TotalPrice * item.Count).ToString("0.00"); +
+
+
+
+ +
+
+
+
+ @item.ProductName +
+
+ $@price +
+
+
+
+ +
+
+ + + + @item.Count + + @{ + string removeIcon = item.Count <= 1 ? "fa-trash" : "fa-minus-circle"; + } + + +
+
+
+
} -
-
- @L["Total"]: $@Model.TotalPrice.ToString("0.00") -
diff --git a/apps/public-web/src/EShopOnAbp.PublicWeb/wwwroot/components/basket/basket-widget.css b/apps/public-web/src/EShopOnAbp.PublicWeb/wwwroot/components/basket/basket-widget.css index de933106..af34c285 100644 --- a/apps/public-web/src/EShopOnAbp.PublicWeb/wwwroot/components/basket/basket-widget.css +++ b/apps/public-web/src/EShopOnAbp.PublicWeb/wwwroot/components/basket/basket-widget.css @@ -1,42 +1,117 @@ -/*.basket-list*/ -/*{*/ -/* background-color: #fff;*/ -/* padding: 1em;*/ -/* border: 1px solid #666;*/ -/* border-radius: 3px;*/ -/* box-shadow: 0 0 10px rgba(0, 0, 0, .05);*/ -/* margin-bottom: 0.5em;*/ -/* transition: all .2s;*/ -/*}*/ - -/*.basket-list:hover {*/ -/* box-shadow: 0 0 20px rgba(0, 0, 0, .1);*/ -/*}*/ +.basket-list { + +} .basket-list-item { - margin-top: 1em; + width:-webkit-fill-available; + background-color: #fff; + border: 1px solid #eee; + border-radius: 3px; + box-shadow: 0 0 10px rgba(0, 0, 0, .05); + transition: all .2s; + cursor: default; +} + +.basket-list-item:hover { + box-shadow: 0 0 20px rgba(0, 0, 0, .1); +} + +.flex-container { + display: flex; + justify-content: space-between; + align-items: center; +} + +.horizontal { + flex-direction: row; + width: 100%; +} + +.horizontal .flex-item { + flex: 1; +} + +.vertical { + flex-direction: column; +} + +.flex-item { + /*background: tomato;*/ + padding: 5px; + max-width: 100vh; + margin: 5px; + font-size: 3em; + text-align: center; } -.basket-list-item:first-child{ - margin-top: 0; +.image-container { + border: 2px solid #ccc !important; + border-radius: 10px; + background-color: white; + max-width: 3em; } -.basket-list-item img { - height: 1em; +.basket-item-image { + min-width: 1em; + width: 2em; + max-width: 80%; } -.basket-total-area -{ - margin-bottom: 1em; +.description-container { + align-items: baseline; +} + +.description-header { + line-height: 50px; + text-align: left; + font-weight: 500; + font-size: 1.2rem; + margin-bottom: 0.5rem; + overflow: hidden; +} + +.description-header > span { + line-height: 20px; + vertical-align: top; +} + +.description-price { + text-align: center; + font-size: 1.1rem; font-weight: bold; + line-height: 30px; + color: rgb(72, 72, 72); } -.basket-item-remove { - cursor: pointer; - color: red; - opacity: 0.25; +.description-price > span { + line-height: 20px; + vertical-align: top; } -.basket-list-item:hover .basket-item-remove { +.remove-container { + color: #bb2d3b; + max-width: 2em; + font-size: 1.5rem; + line-height: initial; +} + +.actions-container { + font-weight: 600; + color: #523e02; + max-width: 2em; + font-size: 1.25rem; + line-height: 40px; +} + +.hide { + opacity: 0; + -webkit-transition: all 500ms ease-in-out; + -moz-transition: all 500ms ease-in-out; + -ms-transition: all 500ms ease-in-out; + -o-transition: all 500ms ease-in-out; + transition: all 500ms ease-in-out; +} + +.basket-list-item:hover .hide { opacity: 1.0; -} \ No newline at end of file +} diff --git a/apps/public-web/src/EShopOnAbp.PublicWeb/wwwroot/components/basket/basket-widget.js b/apps/public-web/src/EShopOnAbp.PublicWeb/wwwroot/components/basket/basket-widget.js index 688a0158..f368e8da 100644 --- a/apps/public-web/src/EShopOnAbp.PublicWeb/wwwroot/components/basket/basket-widget.js +++ b/apps/public-web/src/EShopOnAbp.PublicWeb/wwwroot/components/basket/basket-widget.js @@ -1,8 +1,6 @@ (function () { - let anonymousId = abp.utils.getCookieValue("anonymous_id"); - abp.widgets.BasketWidget = function ($wrapper) { var widgetManager = $wrapper.data('abp-widget-manager'); @@ -10,23 +8,55 @@ $wrapper .find('.basket-item-remove') .click(function () { - var $this = $(this); - var productId = $this.parent('.basket-list-item').attr('data-product-id'); + let $this = $(this); + let productId = $this.parents('.basket-list-item').attr('data-product-id'); eShopOnAbp.basketService.basket.removeProduct({ productId: productId, anonymousId: anonymousId }).then(function () { - widgetManager.refresh(); - $('.abp-widget-wrapper[data-widget-name="CartWidget"]') .data('abp-widget-manager') .refresh(); - abp.notify.info("Removed the product from your basket.", "Removed basket item"); }); }); + $wrapper + .find('.basket-item-increase') + .click(function (e) { + e.preventDefault(); + let $this = $(this); + let productId = $this.parents('.basket-list-item').attr('data-product-id'); + eShopOnAbp.basketService.basket.addProduct({ + productId: productId, + count: 1, + anonymousId: anonymousId + }).then(function () { + widgetManager.refresh(); + $('.abp-widget-wrapper[data-widget-name="CartWidget"]') + .data('abp-widget-manager') + .refresh(); + }); + }); + + $wrapper + .find('.basket-item-decrease') + .click(function (e) { + e.preventDefault(); + let $this = $(this); + let productId = $this.parents('.basket-list-item').attr('data-product-id'); + eShopOnAbp.basketService.basket.removeProduct({ + productId: productId, + count: 1, + anonymousId: anonymousId + }).then(function () { + widgetManager.refresh(); + $('.abp-widget-wrapper[data-widget-name="CartWidget"]') + .data('abp-widget-manager') + .refresh(); + }); + }); }; return { From 2adcb9d356bec5f1cd35a3a2c99465a73ac5ecbe Mon Sep 17 00:00:00 2001 From: Galip Tolga Erdem Date: Thu, 6 Jan 2022 00:07:36 +0300 Subject: [PATCH 4/5] updated purchase widget --- .../Components/Purchase/Default.cshtml | 70 ++++++++++++++----- .../components/purchase/purchase-widget.css | 12 ++++ .../Localization/EShopOnAbp/en.json | 7 ++ .../Localization/EShopOnAbp/tr.json | 7 ++ 4 files changed, 80 insertions(+), 16 deletions(-) diff --git a/apps/public-web/src/EShopOnAbp.PublicWeb/Components/Purchase/Default.cshtml b/apps/public-web/src/EShopOnAbp.PublicWeb/Components/Purchase/Default.cshtml index cc029b09..1722a34c 100644 --- a/apps/public-web/src/EShopOnAbp.PublicWeb/Components/Purchase/Default.cshtml +++ b/apps/public-web/src/EShopOnAbp.PublicWeb/Components/Purchase/Default.cshtml @@ -4,21 +4,59 @@ @model PurchaseWidgetViewComponent.PurchaseViewModel @inject IStringLocalizer L -
-
- @{ - var totalCount = Model?.Basket.Items.Count ?? 0; - } -

@L["TotalSelected", totalCount]

-
-
-

$@Model.Basket.TotalPrice.ToString("0.00")

-
-
-
- @Html.AntiForgeryToken() - - - +@{ + var totalCount = Model?.Basket.Items.Count ?? 0; + var totalPrice = Model.Basket.TotalPrice; + var demoDiscountPercentage = 10; + var discountTotal = totalPrice * demoDiscountPercentage / 100; + var grandTotal = totalPrice - discountTotal; +} +
+
+
+
+
@L["TotalSelected", totalCount]
+
+
+

$@totalPrice.ToString("0.00")

+
+
+
+
+

@L["Purchase:OrderSummary"]

+
+
+
+
@L["Purchase:Products"]:
+
@totalPrice.ToString("0.00") $
+
+
+
@L["Purchase:CargoAndPackaging"]:
+
0.00 $
+
+
+
@L["Purchase:Total"]:
+
@totalPrice.ToString("0.00") $
+
+
+
@L["Purchase:GiftCards"]:
+
@discountTotal.ToString("0.00") $
+
+
+
+
+
+
@L["Purchase:OrderTotal"]:
+
+
+
@grandTotal.ToString("0.00") $
+
+
+
+
+ @Html.AntiForgeryToken() + + +
\ No newline at end of file diff --git a/apps/public-web/src/EShopOnAbp.PublicWeb/wwwroot/components/purchase/purchase-widget.css b/apps/public-web/src/EShopOnAbp.PublicWeb/wwwroot/components/purchase/purchase-widget.css index e69de29b..3428b345 100644 --- a/apps/public-web/src/EShopOnAbp.PublicWeb/wwwroot/components/purchase/purchase-widget.css +++ b/apps/public-web/src/EShopOnAbp.PublicWeb/wwwroot/components/purchase/purchase-widget.css @@ -0,0 +1,12 @@ +.m-result { + text-align: end; +} + +.summary { + color: #0F1111; + font-size: 1rem; +} + +.order-total { + font-size: 1.2rem; +} \ No newline at end of file diff --git a/shared/EShopOnAbp.Shared.Localization/Localization/EShopOnAbp/en.json b/shared/EShopOnAbp.Shared.Localization/Localization/EShopOnAbp/en.json index 2ed0c823..f9a57b29 100644 --- a/shared/EShopOnAbp.Shared.Localization/Localization/EShopOnAbp/en.json +++ b/shared/EShopOnAbp.Shared.Localization/Localization/EShopOnAbp/en.json @@ -10,6 +10,13 @@ "Total": "Total", "TotalSelected": "Total Selected ({0})", "OurProducts": "Our Products", + "FreeCargo": "Free Cargo", + "Purchase:GiftCards":"Gift Cards", + "Purchase:CargoAndPackaging": "Cargo & Packaging", + "Purchase:Total": "Total", + "Purchase:OrderSummary": "Order Summary", + "Purchase:Products": "Products", + "Purchase:OrderTotal": "Order Total", "CatalogServiceNotAvailable": "Catalog Service is unavailable right now! Try again later...", "StockCount": "Stock Count", "RemoveFromBasket": "Remove from basket", diff --git a/shared/EShopOnAbp.Shared.Localization/Localization/EShopOnAbp/tr.json b/shared/EShopOnAbp.Shared.Localization/Localization/EShopOnAbp/tr.json index f01cb1dc..a010152d 100644 --- a/shared/EShopOnAbp.Shared.Localization/Localization/EShopOnAbp/tr.json +++ b/shared/EShopOnAbp.Shared.Localization/Localization/EShopOnAbp/tr.json @@ -10,6 +10,13 @@ "Total": "Toplam", "TotalSelected": "Seçilen Ürünler ({0})", "OurProducts": "Ürünlerimiz", + "FreeCargo": "Ücretsiz Kargo", + "Purchase:GiftCards":"Hediye Çekleri", + "Purchase:CargoAndPackaging": "Kargo ve Paketleme", + "Purchase:Total": "Toplam", + "Purchase:OrderSummary": "Sipariş Özeti", + "Purchase:Products": "Ürünler", + "Purchase:OrderTotal": "Sipariş Toplamı", "CatalogServiceNotAvailable": "Ürün servisine şu anda ulaşılamıyor! Lütfen sonra tekrar deneyiniz...", "StockCount": "Stokta", "RemoveFromBasket": "Sepetten kaldır", From 7e9401a8d58793276a84a2e9dc927d1b68894282 Mon Sep 17 00:00:00 2001 From: Galip Tolga Erdem Date: Thu, 6 Jan 2022 00:07:58 +0300 Subject: [PATCH 5/5] added sticky to purchase widget --- .../Components/Basket/Default.cshtml | 7 +++++-- .../src/EShopOnAbp.PublicWeb/Pages/Basket.cshtml | 1 - .../wwwroot/components/basket/basket-widget.css | 15 +++++++++++++++ 3 files changed, 20 insertions(+), 3 deletions(-) diff --git a/apps/public-web/src/EShopOnAbp.PublicWeb/Components/Basket/Default.cshtml b/apps/public-web/src/EShopOnAbp.PublicWeb/Components/Basket/Default.cshtml index 49a7966e..d06dac29 100644 --- a/apps/public-web/src/EShopOnAbp.PublicWeb/Components/Basket/Default.cshtml +++ b/apps/public-web/src/EShopOnAbp.PublicWeb/Components/Basket/Default.cshtml @@ -35,7 +35,7 @@ var price = (item.TotalPrice * item.Count).ToString("0.00");
-
+
@@ -47,6 +47,9 @@
$@price
+
+ @L["FreeCargo"] +
@@ -71,7 +74,7 @@ }
-
+
@await Component.InvokeAsync(typeof(PurchaseWidgetViewComponent), new {Basket = Model, ButtonDescription = "CompletePurchase"})
diff --git a/apps/public-web/src/EShopOnAbp.PublicWeb/Pages/Basket.cshtml b/apps/public-web/src/EShopOnAbp.PublicWeb/Pages/Basket.cshtml index bb9388f2..569f0dbb 100644 --- a/apps/public-web/src/EShopOnAbp.PublicWeb/Pages/Basket.cshtml +++ b/apps/public-web/src/EShopOnAbp.PublicWeb/Pages/Basket.cshtml @@ -11,7 +11,6 @@ @inject IStringLocalizer L
- @*

@L["YourBasket"]

*@
@await Component.InvokeAsync(typeof(BasketWidgetViewComponent))
diff --git a/apps/public-web/src/EShopOnAbp.PublicWeb/wwwroot/components/basket/basket-widget.css b/apps/public-web/src/EShopOnAbp.PublicWeb/wwwroot/components/basket/basket-widget.css index af34c285..06d922a6 100644 --- a/apps/public-web/src/EShopOnAbp.PublicWeb/wwwroot/components/basket/basket-widget.css +++ b/apps/public-web/src/EShopOnAbp.PublicWeb/wwwroot/components/basket/basket-widget.css @@ -87,6 +87,15 @@ line-height: 20px; vertical-align: top; } +.description-cargo{ + color: #189c38; + text-align: center; + font-size: 1rem; +} +.description-cargo> span { + line-height: 20px; + vertical-align: top; + } .remove-container { color: #bb2d3b; @@ -115,3 +124,9 @@ .basket-list-item:hover .hide { opacity: 1.0; } +.sticky { + position: -webkit-sticky; /* for Safari */ + position: sticky; + top: 1rem; + align-self: flex-start; /* <-- this is the fix */ +} \ No newline at end of file