ayan.poddar/eShopOnContainers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

WebMVC and WebSPA show now a changed price in the basket list

Browse Source
This commit is contained in:
DESKTOP-V1VLQ15\dsanz 2017-03-15 14:57:08 +01:00
parent f03cf0e8f1
commit 0c4f8a49dd
6 changed files with 54 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/Web/WebMVC/Views/Shared/Components/CartList/Default.cshtml
View File

@ -17,7 +17,7 @@
{ {
var item = Model.Items[i]; var item = Model.Items[i];
<article class="esh-basket-items esh-basket-items--border row"> <article class="esh-basket-items row">
<div> <div>
<section class="esh-basket-item esh-basket-item--middle col-lg-3 hidden-lg-down"> <section class="esh-basket-item esh-basket-item--middle col-lg-3 hidden-lg-down">
<img class="esh-basket-image" src="@item.PictureUrl" /> <img class="esh-basket-image" src="@item.PictureUrl" />
@ -30,13 +30,19 @@
</section> </section>
<section class="esh-basket-item esh-basket-item--middle esh-basket-item--mark col-xs-2">$ @Math.Round(item.Quantity * item.UnitPrice, 2)</section> <section class="esh-basket-item esh-basket-item--middle esh-basket-item--mark col-xs-2">$ @Math.Round(item.Quantity * item.UnitPrice, 2)</section>
</div> </div>
<div class="row">
</div>
</article>
<div class="esh-basket-items--border row">
@if (item.OldUnitPrice != 0) @if (item.OldUnitPrice != 0)
{ {
<div class="esh-basket-item"> <div class="alert alert-warning esh-basket-margin12" role="alert">&nbsp;The price of the item has changed.Old price was @item.OldUnitPrice $</div>
The price of the item has changed. Old price was @item.OldUnitPrice $
</div>
} }
</article> </div>
<br/>
} }
</div> </div>

12
src/Web/WebMVC/wwwroot/css/basket/basket.component.css
View File

@ -68,7 +68,11 @@
transition: all 0.35s; transition: all 0.35s;
} }
.esh-basket-checkout:hover { .esh-basket-checkout:hover {
background-color: #4a760f; background-color: #4a760f;
transition: all 0.35s; transition: all 0.35s;
} }
.esh-basket-margin12{
margin-left: 12px;
}

37
src/Web/WebSPA/Client/modules/basket/basket.component.html
View File

@ -10,23 +10,28 @@
<section class="esh-basket-title col-xs-2">Cost</section> <section class="esh-basket-title col-xs-2">Cost</section>
</article> </article>
<article class="esh-basket-items esh-basket-items--border row" <div *ngFor="let item of basket?.items" class="esh-basket-items--border">
*ngFor="let item of basket?.items"> <article class="esh-basket-items row">
<section class="esh-basket-item esh-basket-item--middle col-lg-3 hidden-lg-down"> <section class="esh-basket-item esh-basket-item--middle col-lg-3 hidden-lg-down">
<img class="esh-basket-image" src="{{item.pictureUrl}}" /> <img class="esh-basket-image" src="{{item.pictureUrl}}" />
</section> </section>
<section class="esh-basket-item esh-basket-item--middle col-xs-3">{{item.productName}}</section> <section class="esh-basket-item esh-basket-item--middle col-xs-3">{{item.productName}}</section>
<section class="esh-basket-item esh-basket-item--middle col-xs-2">$ {{item.unitPrice}}</section> <section class="esh-basket-item esh-basket-item--middle col-xs-2">$ {{item.unitPrice}}</section>
<section class="esh-basket-item esh-basket-item--middle col-xs-2"> <section class="esh-basket-item esh-basket-item--middle col-xs-2">
<input class="esh-basket-input" <input class="esh-basket-input"
type="number" type="number"
min="1" min="1"
[(ngModel)]="item.quantity" [(ngModel)]="item.quantity"
(change)="itemQuantityChanged(item)" /> (change)="itemQuantityChanged(item)" />
</section> </section>
<section class="esh-basket-item esh-basket-item--middle esh-basket-item--mark col-xs-2">$ {{item.unitPrice * item.quantity}}</section> <section class="esh-basket-item esh-basket-item--middle esh-basket-item--mark col-xs-2">$ {{item.unitPrice * item.quantity}}</section>
</article> </article>
<br/>
<div class="esh-basket-items-margin-left1 row">
<div class="alert alert-warning" role="alert" *ngIf="item.oldUnitPrice > 0">&nbsp;The price of the item has changed.Old price was {{item.oldUnitPrice}} $</div>
</div>
</div>
</div> </div>
<div class="container"> <div class="container">

11
src/Web/WebSPA/Client/modules/basket/basket.component.scss
View File

@ -1,5 +1,9 @@
@import '../variables'; @import '../variables';
@mixin margin-left($distance) {
margin-left: $distance;
}
.esh-basket { .esh-basket {
min-height: 80vh; min-height: 80vh;
@ -26,6 +30,10 @@
border-color: transparent; border-color: transparent;
} }
} }
&-margin-left1 {
@include margin-left(1px);
}
} }
$item-height: 8rem; $item-height: 8rem;
@ -76,3 +84,6 @@
} }
} }
} }

1
src/Web/WebSPA/Client/modules/shared/models/basketItem.model.ts
View File

@ -3,6 +3,7 @@ export interface IBasketItem {
productId: string; productId: string;
productName: string; productName: string;
unitPrice: number; unitPrice: number;
oldUnitPrice: number;
quantity: number; quantity: number;
pictureUrl: string; pictureUrl: string;
} }

3
src/Web/WebSPA/Client/modules/shared/services/basket.wrapper.service.ts
View File

@ -27,7 +27,8 @@ export class BasketWrapperService {
productName: item.name, productName: item.name,
quantity: 1, quantity: 1,
unitPrice: item.price, unitPrice: item.price,
id: '' id: '',
oldUnitPrice: 0
}; };
this.addItemToBasketSource.next(basket); this.addItemToBasketSource.next(basket);