mirror of
https://github.com/Mueller-Patrick/Betterzon.git
synced 2024-11-12 17:43:57 +00:00
Merge pull request #14 from Mueller-Patrick/BETTERZON-33
Images and Style for Product List Component
This commit is contained in:
commit
8d0469a907
|
@ -8,7 +8,7 @@ import {ProductDetailPageComponent} from './product-detail-page/product-detail-p
|
|||
|
||||
const routes: Routes = [
|
||||
{path: '', component: LandingpageComponent},
|
||||
{path: 'product', component: ProductDetailPageComponent}
|
||||
{path: 'product/:id', component: ProductDetailPageComponent}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
|
|
|
@ -1,2 +1,2 @@
|
|||
<app-product-list numberOfProducts="20" showProductPicture="true"></app-product-list>
|
||||
<app-product-list numberOfProducts="20" [showProductPicture]="true"></app-product-list>
|
||||
<app-footer></app-footer>
|
||||
|
|
|
@ -1 +1,2 @@
|
|||
<p>product-detail-page works!</p>
|
||||
<p>product-detail-page works! Product: {{productId}}</p>
|
||||
<app-footer></app-footer>
|
||||
|
|
|
@ -1,15 +1,21 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import {Component, OnInit} from '@angular/core';
|
||||
import {Router} from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'app-product-detail-page',
|
||||
templateUrl: './product-detail-page.component.html',
|
||||
styleUrls: ['./product-detail-page.component.css']
|
||||
selector: 'app-product-detail-page',
|
||||
templateUrl: './product-detail-page.component.html',
|
||||
styleUrls: ['./product-detail-page.component.css']
|
||||
})
|
||||
export class ProductDetailPageComponent implements OnInit {
|
||||
productId: string;
|
||||
|
||||
constructor() { }
|
||||
constructor(
|
||||
private router: Router
|
||||
) {
|
||||
this.productId = router.url.substr(9, router.url.length);
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
}
|
||||
ngOnInit(): void {
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -1,6 +1,55 @@
|
|||
/* Div that contains each product */
|
||||
.productItem {
|
||||
border-style: solid;
|
||||
border-color: dimgrey;
|
||||
border-radius: .5em;
|
||||
padding: .25em;
|
||||
margin: auto;
|
||||
margin-bottom: .5em;
|
||||
max-width: 50em;
|
||||
display: grid;
|
||||
grid-template-columns: 10% 80% 10%;
|
||||
grid-template-areas:
|
||||
'image title price'
|
||||
'image description price';
|
||||
}
|
||||
|
||||
/* Image div */
|
||||
.productImageContainer {
|
||||
grid-area: image;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Product Image */
|
||||
.productImage {
|
||||
max-width: 50px;
|
||||
max-height: 50px;
|
||||
display:block;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
/* Title div */
|
||||
.productTitle {
|
||||
grid-area: title;
|
||||
}
|
||||
|
||||
/* Price div */
|
||||
.productPrice {
|
||||
grid-area: price;
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
/* Price text */
|
||||
.productPrice * {
|
||||
}
|
||||
|
||||
/* Description div */
|
||||
.productDescription {
|
||||
grid-area: description;
|
||||
}
|
||||
|
|
|
@ -1,7 +1,20 @@
|
|||
<meta charset="UTF-8">
|
||||
<p class="productItem" *ngFor="let product of products" (click)="clickedProduct(product)">
|
||||
{{product.name}}
|
||||
</p>
|
||||
<div *ngIf="showProductPicture">
|
||||
Test
|
||||
<div class="productItem" *ngFor="let product of products" (click)="clickedProduct(product)">
|
||||
<div class="productImageContainer" *ngIf="showProductPicture===true">
|
||||
<img class="productImage" src="https://www.mueller-patrick.tech/betterzon/images/{{product.image_guid}}.jpg"/>
|
||||
</div>
|
||||
<div class="productTitle">
|
||||
<b>{{product.name}}</b>
|
||||
</div>
|
||||
<div class="productPrice">
|
||||
5€
|
||||
</div>
|
||||
<div class="productDescription">
|
||||
<div *ngIf="product.short_description.length > 300">
|
||||
{{product.short_description.substring(0, 300) + "..."}}
|
||||
</div>
|
||||
<div *ngIf="product.short_description.length <= 300">
|
||||
{{product.short_description}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -12,6 +12,7 @@ export class ProductListComponent implements OnInit {
|
|||
products: Product[];
|
||||
@Input() numberOfProducts: number;
|
||||
@Input() showProductPicture: boolean;
|
||||
type: string;
|
||||
|
||||
constructor(
|
||||
private apiService: ApiService,
|
||||
|
@ -21,6 +22,7 @@ export class ProductListComponent implements OnInit {
|
|||
|
||||
ngOnInit(): void {
|
||||
this.getProducts();
|
||||
console.log(this.showProductPicture);
|
||||
|
||||
if (!this.numberOfProducts) {
|
||||
this.numberOfProducts = 10;
|
||||
|
@ -28,6 +30,9 @@ export class ProductListComponent implements OnInit {
|
|||
if (!this.showProductPicture) {
|
||||
this.showProductPicture = false;
|
||||
}
|
||||
this.type = 'PLP';
|
||||
|
||||
console.log(this.showProductPicture);
|
||||
}
|
||||
|
||||
getProducts(): void {
|
||||
|
@ -35,7 +40,7 @@ export class ProductListComponent implements OnInit {
|
|||
}
|
||||
|
||||
clickedProduct(product: Product): void {
|
||||
this.router.navigate([('/helloworld/' + product.product_id)]);
|
||||
this.router.navigate([('/product/' + product.product_id)]);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue
Block a user