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