wip: hot deals widget loadig data

This commit is contained in:
Jegor 2021-06-16 15:25:12 +02:00
parent c88efc5484
commit be534551ba
3 changed files with 33 additions and 11 deletions

View File

@ -9,18 +9,18 @@
<!-- Portfolio Grid Items--> <!-- Portfolio Grid Items-->
<div class="row justify-content-center"> <div class="row justify-content-center">
<!-- Portfolio Item 1--> <!-- Portfolio Item 1-->
<div class="col-md-4 mx-auto my-5" *ngFor="let product of products" (click)="clickedProduct(product)"> <div class="col-md-4 mx-auto my-5" *ngFor="let productId of bestDealsProductIds" (click)="clickedProduct(productId)">
<div class="bbb_deals_wrapper"> <div class="bbb_deals_wrapper">
<div class="bbb_deals_image"><img src="https://www.mueller-patrick.tech/betterzon/images/{{product.image_guid}}.jpg" alt=""></div> <div class="bbb_deals_image"><img src="https://www.mueller-patrick.tech/betterzon/images/{{productsPricesMap[productId]?.product.image_guid}}.jpg" alt=""></div>
<div class="bbb_deals_content"> <div class="bbb_deals_content">
<div class="bbb_deals_info_line d-flex flex-row justify-content-start"> <div class="bbb_deals_info_line d-flex flex-row justify-content-start">
<div class="bbb_deals_item_name">{{product.name}}</div> <div class="bbb_deals_item_name">{{productsPricesMap[productId]?.product.name}}</div>
</div> </div>
<div class="bbb_deals_info_line d-flex flex-row justify-content-start"> <div class="bbb_deals_info_line d-flex flex-row justify-content-start">
<div class="bbb_deals_item_category">Amazon: <span id="bbb_deals_item_price_a"><strike>{{product.price}}$</strike></span></div> <div class="bbb_deals_item_category">Amazon: <span id="bbb_deals_item_price_a"><strike>{{productsPricesMap[productId]?.amazonPrice.price_in_cents}}$</strike></span></div>
</div> </div>
<div class="bbb_deals_info_line d-flex flex-row justify-content-start"> <div class="bbb_deals_info_line d-flex flex-row justify-content-start">
<div class="bbb_deals_item_category">Plantshub: <span id="bbb_deals_item_price_b">599,00$</span></div> <div class="bbb_deals_item_category">Plantshub: <span id="bbb_deals_item_price_b">{{productsPricesMap[productId]?.lowestPrice.price_in_cents}}</span></div>
</div> </div>
<div class="available_bar"> <div class="available_bar">
<span style="width:17%"></span> <span style="width:17%"></span>

View File

@ -12,6 +12,8 @@ export class HotDealsWidgetComponent implements OnInit {
products: Product[] = []; products: Product[] = [];
bestDealsProductIds = []; bestDealsProductIds = [];
amazonPrices = [];
productsPricesMap: any = {};
@Input() numberOfProducts: number; @Input() numberOfProducts: number;
@Input() showProductPicture: boolean; @Input() showProductPicture: boolean;
@Input() searchQuery: string; @Input() searchQuery: string;
@ -26,7 +28,6 @@ export class HotDealsWidgetComponent implements OnInit {
ngOnInit(): void { ngOnInit(): void {
this.loadParams();
this.getBestDeals(); this.getBestDeals();
} }
@ -46,11 +47,11 @@ export class HotDealsWidgetComponent implements OnInit {
switch (this.type) { switch (this.type) {
case 'search': { case 'search': {
this.getSearchedProducts();
break; break;
} }
default: { default: {
this.getProductsByIds(); this.getProductsByIds();
this.getAmazonPricesForBestDeals();
break; break;
} }
} }
@ -58,27 +59,47 @@ export class HotDealsWidgetComponent implements OnInit {
getProductsByIds(): void { getProductsByIds(): void {
this.apiService.getProductsByIds(this.bestDealsProductIds).subscribe( this.apiService.getProductsByIds(this.bestDealsProductIds).subscribe(
products => this.products = products products => {
products.forEach(product => {
this.productsPricesMap [product.product_id].product = product;
});
}
); );
} }
getBestDeals(): void { getBestDeals(): void {
this.apiService.getBestDeals(9).subscribe( this.apiService.getBestDeals(9).subscribe(
deals => { deals => {
deals.forEach(deal => { deals.forEach(deal => {
this.bestDealsProductIds.push(deal.product_id); this.bestDealsProductIds.push(deal.product_id);
this.productsPricesMap [deal.product_id] = {lowestPrice: deal}
}); });
this.loadParams();
} }
); );
} }
getAmazonPricesForBestDeals(): void{
this.bestDealsProductIds.forEach(id => {
this.apiService.getAmazonPrice(id).subscribe(
price => {
this.amazonPrices.push(price);
this.productsPricesMap[price.product_id].amazonPrice = price;
}
);
}
);
console.log(this.amazonPrices);
}
getSearchedProducts(): void { getSearchedProducts(): void {
this.apiService.getProductsByQuery(this.searchQuery).subscribe(products => this.products = products); this.apiService.getProductsByQuery(this.searchQuery).subscribe(products => this.products = products);
} }
clickedProduct(product: Product): void { clickedProduct(productId: string): void {
this.router.navigate([('/product/' + product.product_id)]); this.router.navigate([('/product/' + productId)]);
} }

View File

@ -15,6 +15,7 @@
<li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" href="#unsere-kunden">Unsere Kunden</a></li> <li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" href="#unsere-kunden">Unsere Kunden</a></li>
<li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" routerLink="/signin">Anmelden</a></li> <li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" routerLink="/signin">Anmelden</a></li>
<li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" routerLink="/registration">Konto Erstellen</a></li> <li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" routerLink="/registration">Konto Erstellen</a></li>
<li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" routerLink="/registration">Log Out</a></li>
</ul> </ul>
</div> </div>
</div> </div>