WorldDrknss/Sky.Net
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added Product Page Quantity Control.

Browse Source
This commit is contained in:
Charles Showalter 2022-05-18 17:00:06 -07:00
parent 495ac6a8be
commit a2f27c75cc
5 changed files with 79 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
client/src/app/basket/basket.component.html
View File

@ -44,15 +44,15 @@
<td class="align-middle text-center">{{item.price | currency}}</td>
<td class="align-middle text-center">
<div class="d-flex-align-items-center">
<i class="fa fa-minus-circle text-warning me-2" style="cursor: pointer;"></i>
<i (click)="decrementItemQuantity(item)" class="fa fa-minus-circle text-warning me-2" style="cursor: pointer;"></i>
<span class="font-weight-bold">{{item.quantity}}</span>
<i class="fa fa-plus-circle text-warning mx-2" style="cursor: pointer;"></i>
<i (click)="incrementItemQuantity(item)" class="fa fa-plus-circle text-warning mx-2" style="cursor: pointer;"></i>
</div>
</td>
<td class="align-middle text-center">{{item.price * item.quantity | currency}}</td>
<td class="align-middle text-center">
<a class="text-danger" style="cursor: pointer">
<i class="fa fa-trash" style="font-size: 2em"></i>
<i (click)="removeBasketItem(item)" class="fa fa-trash" style="font-size: 2em"></i>
</a>
</td>
</tr>

14
client/src/app/basket/basket.component.ts
View File

@ -1,6 +1,6 @@
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { IBasket } from '../shared/models/baskset';
import { IBasket, IBasketItem } from '../shared/models/baskset';
import { BasketService } from './basket.service';
@Component({
@ -17,4 +17,16 @@ export class BasketComponent implements OnInit {
this.basket$ = this.basketService.basket$;
}
removeBasketItem(item: IBasketItem){
this.basketService.removeItemFromBasket(item);
}
incrementItemQuantity(item: IBasketItem){
this.basketService.incrementItemQuantity(item);
}
decrementItemQuantity(item: IBasketItem){
this.basketService.decrementItemQuantity(item);
}
}

42
client/src/app/basket/basket.service.ts
View File

@ -48,6 +48,48 @@ export class BasketService {
this.setBasket(basket);
}
incrementItemQuantity(item: IBasketItem){
const basket = this.getCurrentBasketValue();
const foundItemIndex = basket.items.findIndex(x => x.id === item.id);
basket.items[foundItemIndex].quantity++;
this.setBasket(basket);
}
decrementItemQuantity(item: IBasketItem){
const basket = this.getCurrentBasketValue();
const foundItemIndex = basket.items.findIndex(x => x.id === item.id);
if (basket.items[foundItemIndex].quantity > 1){
basket.items[foundItemIndex].quantity--;
this.setBasket(basket);
} else {
this.removeItemFromBasket(item);
}
}
removeItemFromBasket(item: IBasketItem) {
const basket = this.getCurrentBasketValue();
if(basket.items.some(x => x.id === item.id)) {
basket.items = basket.items.filter(i => i.id !== item.id);
if (basket.items.length > 0){
this.setBasket(basket);
} else {
this.deleteBasket(basket);
}
}
}
deleteBasket(basket: IBasket) {
return this.http.delete(this.baseUrl + 'basket?id=' + basket.id).subscribe({
next: () => {
this.basketSource.next(null);
this.basketTotalSource.next(null);
localStorage.removeItem('basket_id');
},
error: (e: any) => { console.log(e) },
complete: () => { console.log('Complete') }
});
}
private calculateTotals(){
const basket = this.getCurrentBasketValue();
const shipping = 0;

8
client/src/app/shop/product-details/product-details.component.html
View File

@ -7,10 +7,10 @@
<h3>{{product.name}}</h3>
<p style="font-size: 2em;">{{product.price | currency}}</p>
<div class="d-flex justify-content-start align-items-center">
<i class="fa fa-minus-circle text-warning me-2" style="cursor: pointer; font-size: 2em"></i>
<span class="font-weight-bold" style="font-size: 1.5em;">2</span>
<i class="fa fa-plus-circle text-warning mx-2" style="cursor: pointer; font-size: 2em"></i>
<button class="btn btn-outline-secondary btn-lg ms-4">Add to Cart</button>
<i (click)="decrementQuantity()" class="fa fa-minus-circle text-warning me-2" style="cursor: pointer; font-size: 2em"></i>
<span class="font-weight-bold" style="font-size: 1.5em;">{{quantity}}</span>
<i (click)="incrementQuantity()" class="fa fa-plus-circle text-warning mx-2" style="cursor: pointer; font-size: 2em"></i>
<button (click)="addItemToBasket()" class="btn btn-outline-primary btn-lg ms-4">Add to Cart</button>
</div>
</div>
<div class="row mt-5">

18
client/src/app/shop/product-details/product-details.component.ts
View File

@ -1,5 +1,6 @@
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { BasketService } from 'src/app/basket/basket.service';
import { IProduct } from 'src/app/shared/models/product';
import { BreadcrumbService } from 'xng-breadcrumb';
import { ShopService } from '../shop.service';
@ -11,8 +12,9 @@ import { ShopService } from '../shop.service';
})
export class ProductDetailsComponent implements OnInit {
product: IProduct;
quantity = 1;
constructor(private shopService: ShopService, private activatedRoute: ActivatedRoute, private bcService: BreadcrumbService) {
constructor(private shopService: ShopService, private activatedRoute: ActivatedRoute, private bcService: BreadcrumbService, private basketService: BasketService) {
this.bcService.set('@productDetails', ' ');
}
@ -20,6 +22,20 @@ export class ProductDetailsComponent implements OnInit {
this.loadProduct();
}
addItemToBasket(){
this.basketService.addItemToBasket(this.product, this.quantity);
}
incrementQuantity(){
this.quantity++;
}
decrementQuantity(){
if(this.quantity > 1){
this.quantity--;
}
}
loadProduct(){
this.shopService.getProduct(+this.activatedRoute.snapshot.paramMap.get('id')).subscribe(
{