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{
width: 1640px;
height: 820px;
background-color: #f8f9fa;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
align-items: center;
.bbb_deals_wrapper {
overflow: hidden;
}
.product-description {
/*background-color: #3480E3;*/
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);
.bbb_deals_wrapper:hover {
transform: scale(1.2);
}
.product-image {
.bbb_deals_featured {
width: 100%;
}
#hot-deals{
/*background-color: #E53167;*/
justify-self: center;
align-self: center;
grid-column: 3/10;
grid-row: 1/2;
.bbb_deals {
width: 100%;
margin-right: 7%;
padding-top: 80px;
padding-left: 25px;
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 {
justify-self: center;
align-self: center;
grid-column: 3/10;
grid-row: 2/3;
/*background-color: #E53167;*/
.bbb_deals_title {
position: absolute;
top: 10px;
left: 22px;
font-size: 18px;
font-weight: 500;
color: #000000
}
#product-name > p {
font-size: 65px;
.bbb_deals_slider_container {
width: 100%
}
#sales {
justify-self: center;
align-self: center;
grid-column: 3/10;
grid-row: 3/4;
/*background-color: #E53167;*/
.bbb_deals_item {
width: 100% !important
}
#futher-informations {
justify-self: center;
align-self: center;
grid-column: 3/10;
grid-row: 4/5;
/*background-color: #E53167;*/
.bbb_deals_image {
width: 40%;
height: 40%;
}
#points {
justify-self: center;
align-self: start;
grid-column: 3/10;
grid-row: 5/6;
/*background-color: #E53167;*/
.bbb_deals_image img {
width: 100%
}
.product-image {
display: grid;
justify-content: center;
.bbb_deals_content {
margin-top: 33px
}
.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">
<div class="product-description">
<div id="hot-deals">
<h1>HOT DEALS</h1>
<section class="page-section portfolio" id="top-gesuchte">
<div class="container">
<!-- Portfolio Section Heading-->
<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 id="product-name">
<h1>Neues Apple iPhone 12 Pro <br> (512 GB) - Graphit</h1>
<!-- Portfolio Grid Items-->
<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 id="sales">
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>
</section>

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({
selector: 'app-hot-deals-widget',
@ -7,9 +10,60 @@ import { Component, OnInit } from '@angular/core';
})
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 {
}
}