Skip to content

Commit 1141d93

Browse files
ENES BATUR (094404)ENES BATUR (094404)
ENES BATUR (094404)
authored and
ENES BATUR (094404)
committed
cart details added
1 parent 2172ccb commit 1141d93

9 files changed

Lines changed: 185 additions & 5 deletions

‎src/app/app.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<!-- MENU SIDEBAR-->
44
<aside class="menu-sidebar d-none d-lg-block">
55
<div class="logo">
6-
<a href="#">
6+
<a routerLink="/products">
77
<img src="assets/images/logo.png" alt="Turkish Technic" class="img-responsive">
88
</a>
99
</div>

‎src/app/app.module.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,10 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
1515
import { CartStatusComponent } from './components/cart-status/cart-status.component';
1616

1717
import {NgxWebstorageModule} from 'ngx-webstorage';
18+
import { CartDetailsComponent } from './components/cart-details/cart-details.component';
1819

1920
const routes: Routes = [
21+
{ path: 'cart-details', component: CartDetailsComponent},
2022
{ path: 'products/:id', component: ProductDetailsComponent},
2123
{ path: 'search/:keyword', component: ProductListComponent},
2224
{ path: 'category/:id', component: ProductListComponent },
@@ -33,7 +35,8 @@ const routes: Routes = [
3335
ProductCategoryMenuComponent,
3436
SearchComponent,
3537
ProductDetailsComponent,
36-
CartStatusComponent
38+
CartStatusComponent,
39+
CartDetailsComponent
3740
],
3841
imports: [
3942
RouterModule.forRoot(routes),

‎src/app/components/cart-details/cart-details.component.css‎

Whitespace-only changes.

‎src/app/components/cart-details/cart-details.component.html‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<div class="main-content">
2+
<div class="section-content section-content-p30">
3+
<div class="container-fluid">
4+
<div *ngIf="cartItems.length >0">
5+
<table class="table table-bordered">
6+
<tr>
7+
<th width="20%">Product Image</th>
8+
<th width="50%">Product Detail</th>
9+
<th width="30%"></th>
10+
</tr>
11+
<tr *ngFor="let tempCartItem of cartItems">
12+
<td>
13+
<img src="{{tempCartItem.imageUrl}}" class="img-responsive" width="150px" />
14+
</td>
15+
<td>
16+
<p>{{ tempCartItem.name }}</p>
17+
<p>{{tempCartItem.unitPrice | currency : 'TRY' : '₺'}}</p>
18+
</td>
19+
<td>
20+
<div class="items">
21+
<label>Quantity:</label>
22+
23+
<div class="row no-gutters">
24+
<div class="col">
25+
<button (click)="decrementQuantity(tempCartItem)" class="btn btn-primary btn-danger btn-sm">
26+
<i class="fa fa-minus"></i>
27+
</button>
28+
</div>
29+
<div class="col ml-3 mr-2">
30+
{{tempCartItem.quantity}}
31+
</div>
32+
<div (click)="incrementQuantity(tempCartItem)" class="col">
33+
<button class="btn btn-primary btn-danger btn-sm">
34+
<i class="fa fa-plus"></i>
35+
</button>
36+
</div>
37+
<div (click)="removeItem(tempCartItem)" class="col">
38+
<button class="btn btn-primary btn-danger btn-sm">
39+
<i class="fas fa-trash-alt"></i>
40+
</button>
41+
</div>
42+
<div class="col-6"></div>
43+
</div>
44+
</div>
45+
46+
<p class="mt-2">Subtotal:
47+
{{tempCartItem.quantity * tempCartItem.unitPrice | currency : 'TRY' : '₺'}}</p>
48+
49+
</td>
50+
</tr>
51+
<tr>
52+
<td colspan="2"></td>
53+
<td style="font-weight: bold">
54+
<p>Total Quantity: {{totalQuantity}}</p>
55+
<p>Shipping:FREE</p>
56+
<p>Total Price: {{totalPrice | currency : 'TRY' : '₺'}}</p>
57+
</td>
58+
</tr>
59+
</table>
60+
</div>
61+
<div *ngIf="cartItems.length == 0" class="alert alert-warning col-md-12" role="alert">
62+
Your shopping cart is empty.
63+
</div>
64+
</div>
65+
</div>
66+
</div>

‎src/app/components/cart-details/cart-details.component.spec.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { CartDetailsComponent } from './cart-details.component';
4+
5+
describe('CartDetailsComponent', () => {
6+
let component: CartDetailsComponent;
7+
let fixture: ComponentFixture<CartDetailsComponent>;
8+
9+
beforeEach(async(() => {
10+
TestBed.configureTestingModule({
11+
declarations: [ CartDetailsComponent ]
12+
})
13+
.compileComponents();
14+
}));
15+
16+
beforeEach(() => {
17+
fixture = TestBed.createComponent(CartDetailsComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should create', () => {
23+
expect(component).toBeTruthy();
24+
});
25+
});

‎src/app/components/cart-details/cart-details.component.ts‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import { Component, OnInit } from '@angular/core';
2+
import { CartItem } from 'src/app/common/cart-item';
3+
import { CartService } from 'src/app/services/cart.service';
4+
import { SessionStorageService } from 'ngx-webstorage';
5+
6+
@Component({
7+
selector: 'app-cart-details',
8+
templateUrl: './cart-details.component.html',
9+
styleUrls: ['./cart-details.component.css']
10+
})
11+
export class CartDetailsComponent implements OnInit {
12+
13+
cartItems: CartItem[] = [];
14+
totalPrice:number;
15+
totalQuantity:number;
16+
17+
constructor(private cartService: CartService,
18+
private storage: SessionStorageService) { }
19+
20+
ngOnInit(): void {
21+
22+
if(this.storage.retrieve('totalPrice') === undefined ){
23+
this.totalPrice = 0.00;
24+
}
25+
else {
26+
this.totalPrice = this.storage.retrieve('totalPrice');
27+
}
28+
29+
if(this.storage.retrieve('totalQuantity') === undefined ){
30+
this.totalQuantity = 0.00;
31+
}
32+
else {
33+
this.totalQuantity = this.storage.retrieve('totalQuantity');
34+
}
35+
36+
this.listCartDetails();
37+
}
38+
listCartDetails() {
39+
40+
this.cartItems = this.cartService.cartItems;
41+
42+
this.cartService.totalPrice.subscribe(
43+
data => this.totalPrice = data
44+
);
45+
46+
this.cartService.totalQuantity.subscribe(
47+
data => this.totalQuantity = data
48+
);
49+
50+
this.cartService.computeCartTotals();
51+
52+
}
53+
54+
incrementQuantity(cartItem:CartItem){
55+
this.cartService.addToCart(cartItem);
56+
}
57+
58+
decrementQuantity(cartItem:CartItem){
59+
this.cartService.decrementQuantity(cartItem);
60+
}
61+
62+
removeItem(cartItem:CartItem){
63+
this.cartService.removeFromCart(cartItem);
64+
}
65+
66+
67+
}

‎src/app/components/cart-status/cart-status.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div class="cart-area d-n">
2-
<a href="shopping-detail.html">
2+
<a routerLink="/cart-details">
33
<div class="total">{{totalPrice | currency : 'TRY' : '₺'}}
44
<span>{{totalQuantity}}</span>
55
</div>

‎src/app/components/cart-status/cart-status.component.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,14 +22,14 @@ export class CartStatusComponent implements OnInit {
2222

2323
ngOnInit(): void {
2424

25-
if(this.storage.retrieve('totalPrice') == undefined ){
25+
if(this.storage.retrieve('totalPrice') === undefined ){
2626
this.totalPrice = 0.00;
2727
}
2828
else {
2929
this.totalPrice = this.storage.retrieve('totalPrice');
3030
}
3131

32-
if(this.storage.retrieve('totalQuantity') == undefined ){
32+
if(this.storage.retrieve('totalQuantity') === undefined ){
3333
this.totalQuantity = 0.00;
3434
}
3535
else {

‎src/app/services/cart.service.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,25 @@ export class CartService {
5656
// this.logCartData(totalPriceValue, totalQuantityValue);
5757
}
5858

59+
decrementQuantity(cartItem: CartItem) {
60+
cartItem.quantity--;
61+
if (cartItem.quantity === 0) {
62+
this.removeFromCart(cartItem);
63+
}
64+
else {
65+
this.computeCartTotals();
66+
}
67+
}
68+
69+
removeFromCart(cartItem: CartItem) {
70+
const itemIndex = this.cartItems.findIndex(tempCartItem => tempCartItem.id === cartItem.id);
71+
72+
if(itemIndex > -1){
73+
this.cartItems.splice(itemIndex, 1);
74+
this.computeCartTotals();
75+
}
76+
}
77+
5978
//logCartData(totalPriceValue: number, totalQuantityValue: number) {
6079
// console.log(`Contents of the cart`);
6180

0 commit comments

Comments
 (0)