mirror of
https://github.com/Mueller-Patrick/Betterzon.git
synced 2024-11-14 10:33:58 +00:00
wip: hot deals widget loadig data
This commit is contained in:
parent
c88efc5484
commit
be534551ba
|
@ -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>
|
||||||
|
|
|
@ -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)]);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user