mirror of
https://github.com/Mueller-Patrick/Betterzon.git
synced 2024-11-22 14:23:57 +00:00
hot-deals component is done.
This commit is contained in:
parent
7a547a6a72
commit
14b943b64a
|
|
@ -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
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -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>
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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 {
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user