hot-deals component is done.

This commit is contained in:
Jegor 2021-06-07 09:58:10 +02:00
parent 7a547a6a72
commit 14b943b64a
3 changed files with 166 additions and 76 deletions

View File

@ -1,72 +1,97 @@
.hot-deal-widget-wrapper{ .bbb_deals_wrapper {
width: 1640px; overflow: hidden;
height: 820px;
background-color: #f8f9fa;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
align-items: center;
} }
.product-description { .bbb_deals_wrapper:hover {
/*background-color: #3480E3;*/ transform: scale(1.2);
height: 100%;
display: grid;
grid-template-columns: 15% 16px 15% 16px 15% 16px 15% 16px 15% 16px 15% 8px;
grid-template-rows: repeat(5, 1fr);
} }
.product-image { .bbb_deals_featured {
width: 100%;
} }
#hot-deals{ .bbb_deals {
/*background-color: #E53167;*/ width: 100%;
justify-self: center; margin-right: 7%;
align-self: center; padding-top: 80px;
grid-column: 3/10; padding-left: 25px;
grid-row: 1/2; padding-right: 25px;
padding-bottom: 34px;
box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.1);
border-radius: 5px;
margin-top: 0px
} }
#product-name { .bbb_deals_title {
justify-self: center; position: absolute;
align-self: center; top: 10px;
grid-column: 3/10; left: 22px;
grid-row: 2/3; font-size: 18px;
/*background-color: #E53167;*/ font-weight: 500;
color: #000000
} }
#product-name > p { .bbb_deals_slider_container {
font-size: 65px; width: 100%
} }
#sales { .bbb_deals_item {
justify-self: center; width: 100% !important
align-self: center;
grid-column: 3/10;
grid-row: 3/4;
/*background-color: #E53167;*/
} }
#futher-informations { .bbb_deals_image {
justify-self: center; width: 40%;
align-self: center; height: 40%;
grid-column: 3/10;
grid-row: 4/5;
/*background-color: #E53167;*/
} }
#points { .bbb_deals_image img {
justify-self: center; width: 100%
align-self: start;
grid-column: 3/10;
grid-row: 5/6;
/*background-color: #E53167;*/
} }
.product-image { .bbb_deals_content {
display: grid; margin-top: 33px
justify-content: center;
} }
.bbb_deals_item_category a {
font-size: 14px;
font-weight: 400;
color: rgba(0, 0, 0, 0.5)
}
#bbb_deals_item_price_a {
font-size: 14px;
font-weight: 400;
color: rgba(0, 0, 0, 0.6);
color: red;
}
#bbb_deals_item_price_b {
font-size: 14px;
font-weight: 400;
color: rgba(0, 0, 0, 0.6);
color: green;
}
.bbb_deals_item_name {
max-width: 300px;
word-wrap: break-word;
font-size: 16px;
font-weight: 400;
color: #000000;
}
.bbb_deals_item_price {
font-size: 24px;
font-weight: 500;
color: #228B22;
}
.available {
margin-top: 19px
}
.available_title {
font-size: 16px;
color: rgba(0, 0, 0, 0.5);
font-weight: 400
}

View File

@ -1,23 +1,34 @@
<div class="hot-deal-widget-wrapper"> <section class="page-section portfolio" id="top-gesuchte">
<div class="product-description"> <div class="container">
<div id="hot-deals"> <!-- Portfolio Section Heading-->
<h1>HOT DEALS</h1> <h2 class="page-section-heading text-center text-uppercase text-secondary mb-0">TOP-ANGEBOTE</h2>
<!-- Icon Divider-->
<div class="divider-custom">
<div class="divider-custom-line"></div>
</div> </div>
<div id="product-name"> <!-- Portfolio Grid Items-->
<h1>Neues Apple iPhone 12 Pro <br> (512 GB) - Graphit</h1> <div class="row justify-content-center">
<!-- Portfolio Item 1-->
<div class="col-md-4 mx-auto my-5" *ngFor="let product of products">
<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_content">
<div class="bbb_deals_info_line d-flex flex-row justify-content-start">
<div class="bbb_deals_item_name">{{product.name}}</div>
</div>
<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>699.00$</strike></span></div>
</div>
<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>
<div class="available_bar">
<span style="width:17%"></span>
</div>
</div>
</div>
</div>
</div>
</div> </div>
<div id="sales"> </section>
SPARE BIS ZU 7%!
</div>
<div id="futher-informations">
Weitere Informationen
</div>
<div id="points">
points
</div>
</div>
<div class="product-image">
<img src="assets/images/iphone-12-pro-silver-hero.png" height="771">
</div>
</div>

View File

@ -1,4 +1,7 @@
import { Component, OnInit } from '@angular/core'; import {Component, Input, OnInit} from '@angular/core';
import {ApiService} from '../../services/api.service';
import {Product} from '../../models/product';
import {ActivatedRoute, Router} from '@angular/router';
@Component({ @Component({
selector: 'app-hot-deals-widget', selector: 'app-hot-deals-widget',
@ -7,9 +10,60 @@ import { Component, OnInit } from '@angular/core';
}) })
export class HotDealsWidgetComponent implements OnInit { export class HotDealsWidgetComponent implements OnInit {
constructor() { } products: Product[] = [];
@Input() numberOfProducts: number;
@Input() showProductPicture: boolean;
@Input() searchQuery: string;
@Input() type: string;
constructor(
private apiService: ApiService,
private router: Router,
private route: ActivatedRoute
) {
}
ngOnInit(): void {
this.loadParams();
}
loadParams(): void {
if (!this.numberOfProducts) {
this.numberOfProducts = 10;
}
if (!this.showProductPicture) {
this.showProductPicture = false;
}
if (!this.searchQuery) {
this.searchQuery = '';
}
if (!this.type) {
this.type = '';
}
switch (this.type) {
case 'search': {
this.getSearchedProducts();
break;
}
default: {
this.getProducts();
break;
}
}
}
getProducts(): void {
this.apiService.getProducts().subscribe(products => this.products = products);
}
getSearchedProducts(): void {
this.apiService.getProductsByQuery(this.searchQuery).subscribe(products => this.products = products);
}
clickedProduct(product: Product): void {
this.router.navigate([('/product/' + product.product_id)]);
}
ngOnInit(): void {
}
} }