diff --git a/src/Web/WebMVC/Views/Shared/Components/CartList/Default.cshtml b/src/Web/WebMVC/Views/Shared/Components/CartList/Default.cshtml index 33e62bafb..6ee70b035 100644 --- a/src/Web/WebMVC/Views/Shared/Components/CartList/Default.cshtml +++ b/src/Web/WebMVC/Views/Shared/Components/CartList/Default.cshtml @@ -17,7 +17,7 @@ { var item = Model.Items[i]; -
+
@@ -30,13 +30,19 @@
$ @Math.Round(item.Quantity * item.UnitPrice, 2)
+
+ +
+
+ +
@if (item.OldUnitPrice != 0) { -
- The price of the item has changed. Old price was @item.OldUnitPrice $ -
+ } -
+ +
+ } diff --git a/src/Web/WebMVC/wwwroot/css/basket/basket.component.css b/src/Web/WebMVC/wwwroot/css/basket/basket.component.css index fa3a8ad0e..5649ed5b0 100644 --- a/src/Web/WebMVC/wwwroot/css/basket/basket.component.css +++ b/src/Web/WebMVC/wwwroot/css/basket/basket.component.css @@ -68,7 +68,11 @@ transition: all 0.35s; } - .esh-basket-checkout:hover { - background-color: #4a760f; - transition: all 0.35s; - } +.esh-basket-checkout:hover { + background-color: #4a760f; + transition: all 0.35s; +} + +.esh-basket-margin12{ + margin-left: 12px; +} diff --git a/src/Web/WebSPA/Client/modules/basket/basket.component.html b/src/Web/WebSPA/Client/modules/basket/basket.component.html index 3dece543b..7cab7221a 100644 --- a/src/Web/WebSPA/Client/modules/basket/basket.component.html +++ b/src/Web/WebSPA/Client/modules/basket/basket.component.html @@ -10,23 +10,28 @@
Cost
-
+
+
-
- -
-
{{item.productName}}
-
$ {{item.unitPrice}}
-
- -
-
$ {{item.unitPrice * item.quantity}}
-
+
+ +
+
{{item.productName}}
+
$ {{item.unitPrice}}
+
+ +
+
$ {{item.unitPrice * item.quantity}}
+
+
+
+ +
+
diff --git a/src/Web/WebSPA/Client/modules/basket/basket.component.scss b/src/Web/WebSPA/Client/modules/basket/basket.component.scss index c338183dd..c0e6c61fd 100644 --- a/src/Web/WebSPA/Client/modules/basket/basket.component.scss +++ b/src/Web/WebSPA/Client/modules/basket/basket.component.scss @@ -1,5 +1,9 @@ @import '../variables'; +@mixin margin-left($distance) { + margin-left: $distance; +} + .esh-basket { min-height: 80vh; @@ -26,6 +30,10 @@ border-color: transparent; } } + + &-margin-left1 { + @include margin-left(1px); + } } $item-height: 8rem; @@ -76,3 +84,6 @@ } } } + + + diff --git a/src/Web/WebSPA/Client/modules/shared/models/basketItem.model.ts b/src/Web/WebSPA/Client/modules/shared/models/basketItem.model.ts index 8701ae1d6..44c5716a5 100644 --- a/src/Web/WebSPA/Client/modules/shared/models/basketItem.model.ts +++ b/src/Web/WebSPA/Client/modules/shared/models/basketItem.model.ts @@ -3,6 +3,7 @@ export interface IBasketItem { productId: string; productName: string; unitPrice: number; + oldUnitPrice: number; quantity: number; pictureUrl: string; } diff --git a/src/Web/WebSPA/Client/modules/shared/services/basket.wrapper.service.ts b/src/Web/WebSPA/Client/modules/shared/services/basket.wrapper.service.ts index 05924c0f5..3017a30f3 100644 --- a/src/Web/WebSPA/Client/modules/shared/services/basket.wrapper.service.ts +++ b/src/Web/WebSPA/Client/modules/shared/services/basket.wrapper.service.ts @@ -27,7 +27,8 @@ export class BasketWrapperService { productName: item.name, quantity: 1, unitPrice: item.price, - id: '' + id: '', + oldUnitPrice: 0 }; this.addItemToBasketSource.next(basket);