Printing shopping cart total price - arrays

Question

Hello I am trying to teach myself angular framework.
I have built a simple shopping cart where the products can be added to the basket by using a tutorial. The problem I am having is that I can't seem to get the total price to show. any one who could show me the direction to go in or what to do would be greatly appreciated. At the moment my total cost function has the same function as the total number of objects as price so I need to change the total cost function but wouldn't know what to attempt.
I have shared my full project below rather than paste a lot of code.
also two bonus questions, currently I have an array of items. how would I approach removing the items and calling them from an API instead?
and how would i add a 10% discount should the user have three or more items in the basket?

Answer 1

shopping-cart.component.ts
import { Component, Input, Output, EventEmitter } from '#angular/core';
#Component({
selector: 'shopping-cart',
template: `
<h1>Shopping Cart ({{products.length}})</h1>
<h2>Total Cost £{{calcTotal()}}</h2>
<cart-product *ngFor="let product of products" [product]="product" (productRemoved)="removeProduct($event)"><cart-product>
`,
})
export class ShoppingCartComponent {
#Input() products: any[] = [];
#Output() productRemoved = new EventEmitter();
calcTotal() {
if (!this.isArrayEmpty()) {
if (this.products.length < 2) {
const targetProduct = this.products[0];
return targetProduct.price * targetProduct.num;
} else {
return this.products.reduce((a, b) => (a.num * a.price) + (b.num * b.price));
}
} else {
return 0;
}
}
isArrayEmpty(): boolean {
return this.products.length < 1;
}
removeProduct(product) {
this.productRemoved.emit(product)
}
}
app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
productList = [
{name: 'Array Item One', price: 10},
{name: 'Array Item Two', price: 20},
{name: 'Array Item Three', price: 30}
];
cartProductList = [];
addProductToCart(product) {
const productExistInCart = this.cartProductList.find((productInCart) => productInCart.name === product.name);
if (!productExistInCart) {
this.cartProductList.push({...product, num:1});
return;
}
productExistInCart.num += 1;
console.log(this.cartProductList);
}
removeProduct(product) {
this.cartProductList = this.cartProductList.filter(({name}) => name !== product.name)
}
}

Answer 2

If you want to show the total price, you will just have to introduce some changes to calcPrice methode inside shopping-cart.component.ts.
instead of just returning the number of products, you return the number of products (for each product) multiplied by the price of each product, hence prod.price * prod.num
just like the following:
calcPrice() {
return this.products.reduce((acc, prod) => acc+= prod.price * prod.num ,0)
}
If you want to add a discount to your total price, you will have to introduce more change to calcPrice methode again.
instead of returning the total price of products inside the cart, you first check if there is 3 or more products in it and apply the discount if true, otherwise, if false, your just return the normal price with no discount.
just like the following:
calcPrice() {
return this.products.reduce((acc, prod) => {
if (this.calcTotal() >= 3) {
// 0.9 means 90% of the total price which make it a 10% discount
return acc+= prod.price * prod.num * 0.9
} else {
return acc+= prod.price * prod.num
}
},0)
}
If you want to retrieve products from an API, you will have to use Angular's HttpClientModule, here you can find a link to a beginner friendly tutorial on how to use it.