Skip to content

Commit 7ed0ea5

Browse files
belsmanbelsman
committed
Refactor products page and route
1 parent fe3adc3 commit 7ed0ea5

27 files changed

+370
-760
lines changed

‎src/app/features/products/components/product-card/product-card.component.html

Lines changed: 48 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,49 @@
1-
<vcl-panel panel-card class="product-card" (click)="onProductClicked()">
2-
<vcl-panel-title
3-
class="row justify-content-between align-items-center m-0 p-2"
4-
>
5-
<vcl-label class="badge">
6-
<!-- {{ product.additionalLabel }} -->
7-
Product.additionalLabel
8-
</vcl-label>
9-
<button vcl-square-button class="circular favorite">
10-
<vcl-icon icon="fas:heart"></vcl-icon>
11-
</button>
12-
</vcl-panel-title>
13-
<div class="position-relative">
14-
<picture class="image-wrapper">
15-
<source
16-
class="image"
17-
*ngFor="let media of responsiveImagesConfiguration"
18-
[media]="
19-
'(max-width: ' +
20-
media.max +
21-
'px) and (min-width: ' +
22-
media.min +
23-
'px)'
24-
"
25-
[srcset]="product.images[selectedColor].url"
26-
[type]="'image/' + media.format"
27-
/>
28-
<img
29-
class="product-card__image"
30-
alt="product image"
31-
[src]="product.images[selectedColor].url"
32-
/>
33-
</picture>
34-
<!-- <div class="product-card__quick-shop p-3">quick shop</div> -->
1+
<div class="row justify-between product-header">
2+
<div class="row additional-label">
3+
<div class="text">
4+
{{ product.product.physical.variants.length }} Varaints
5+
</div>
6+
<div class="rounded-right"></div>
357
</div>
36-
<vcl-panel-footer class="p-2 product-card__footer">
37-
<vcl-label class="product-card__title">{{ product.name }}</vcl-label>
38-
<vcl-label class="product-card__price">{{
39-
product.price.salePrice | currency: currency
40-
}}</vcl-label>
41-
<!-- <app-product-color-picker
42-
[colors]="product.colors"
43-
(mouseOver)="onMouseEnter($event)"
44-
(mouseOut)="onMouseLeave($event)"
45-
></app-product-color-picker> -->
46-
</vcl-panel-footer>
47-
</vcl-panel>
8+
<i class="fas fa-heart like"></i>
9+
</div>
10+
<picture class="image-wrapper">
11+
<!-- <source
12+
class="image"
13+
*ngFor="let media of responsiveImagesConfiguration"
14+
[media]="
15+
'(max-width: ' +
16+
media.max +
17+
'px) and (min-width: ' +
18+
media.min +
19+
'px)'
20+
"
21+
[srcset]="product.product.physical.variants[0].images[0].url"
22+
[type]="'image/' + media.format"
23+
/> -->
24+
<img
25+
class="image"
26+
alt="product image"
27+
[src]="product.product.physical.variants[0].images[0].url"
28+
/>
29+
</picture>
30+
<div
31+
class="row center justify-center spinner-wrapper"
32+
*ngIf="!product.product.physical.variants[0].images[0].url"
33+
>
34+
<i class="fas fa-spinner spinner"></i>
35+
</div>
36+
<!-- <div class="row justify-center colors">
37+
<div
38+
class="row color-wrapper"
39+
*ngFor="let color of product.colors"
40+
[class.color-selected]="color === product.selectedColor"
41+
(click)="product.selectedColor = color"
42+
>
43+
<div class="color" [style.background-color]="color"></div>
44+
</div>
45+
</div> -->
46+
<div class="title">{{ product.product.name }}</div>
47+
<!-- <div class="row justify-center price">
48+
{{ product.price | currency : currency }}
49+
</div> -->

‎src/app/features/products/components/product-card/product-card.component.scss

Lines changed: 120 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,132 @@
1-
.product-card {
2-
width: 100%;
3-
cursor: pointer;
4-
box-shadow: 0.3em 0.5em 0.5em rgba($color: #000000, $alpha: 0.13);
1+
:host(.product) {
2+
background-color: white;
3+
width: calc(33.333333% - 30px);
4+
@media (max-width: 1100px) {
5+
width: calc(50% - 30px);
6+
}
7+
@media (max-width: 700px) {
8+
width: calc(100% - 30px);
9+
}
10+
margin-left: 10px;
11+
margin-bottom: 10px;
12+
display: grid;
13+
padding: 10px;
514

6-
&__title {
7-
display: block;
8-
text-align: center;
9-
text-overflow: ellipsis;
10-
letter-spacing: 1px;
11-
padding-bottom: 0.5em;
15+
&:hover {
16+
box-shadow: 0 0 11px rgba(33, 33, 33, 0.2);
1217
}
1318

14-
&__price {
15-
display: block;
16-
text-align: center;
17-
font-weight: 700;
18-
padding-bottom: 0.5em;
19+
.product-header {
20+
.additional-label {
21+
margin-left: -10px;
22+
max-height: 0px;
23+
margin-top: 4px;
24+
25+
.text {
26+
text-transform: uppercase;
27+
font-family: Univers, sans-serif;
28+
font-weight: 300;
29+
font-size: 12px;
30+
background-color: rgba(238, 238, 238, 0.7);
31+
padding: 3px 0 1px 10px;
32+
}
33+
34+
.rounded-right {
35+
background-color: red;
36+
border: 1px solid transparent;
37+
border-top-right-radius: 50%;
38+
border-bottom-right-radius: 50%;
39+
width: 21px;
40+
background-color: rgba(238, 238, 238, 0.7);
41+
}
42+
}
43+
44+
.like {
45+
font-size: 18px;
46+
-webkit-text-fill-color: transparent;
47+
-webkit-text-stroke-width: 1px;
48+
-webkit-text-stroke-color: black;
49+
cursor: pointer;
50+
border: 1px solid #dddddd;
51+
border-radius: 50%;
52+
width: 31px;
53+
height: 31px;
54+
text-indent: -1px;
55+
line-height: 31px;
56+
margin-left: auto;
57+
58+
&:hover,
59+
&.liked {
60+
-webkit-text-fill-color: black;
61+
}
62+
}
1963
}
2064

21-
&__image {
22-
min-height: 100%;
23-
max-width: 100%;
65+
.image-wrapper {
66+
margin-top: 10px;
67+
cursor: pointer;
2468
width: 100%;
69+
padding-top: 150%;
70+
position: relative;
71+
72+
.image {
73+
display: block;
74+
width: 100%;
75+
height: 100%;
76+
position: absolute;
77+
top: 0;
78+
}
2579
}
2680

27-
&__quick-shop {
28-
background-color: black;
29-
color: white;
30-
text-transform: uppercase;
31-
text-decoration: none;
32-
text-align: center;
33-
position: absolute;
34-
left: 0;
35-
right: 0;
36-
bottom: 0;
37-
transform: translateY(110%);
38-
width: 100%;
39-
transition: transform 0.2s;
81+
.spinner-wrapper {
82+
min-height: 446px;
83+
.spinner {
84+
font-size: 40px;
85+
}
4086
}
4187

42-
&:hover &__quick-shop {
43-
transform: translateY(0);
88+
.colors {
89+
margin-top: 5px;
90+
max-height: 26px;
91+
92+
.color-wrapper {
93+
margin: 2px;
94+
cursor: pointer;
95+
96+
.color {
97+
width: 21px;
98+
height: 21px;
99+
background-color: white;
100+
border: 1px solid rgb(153, 153, 153);
101+
border-radius: 50%;
102+
}
103+
104+
padding: 2px;
105+
border: 1px solid white;
106+
border-radius: 50%;
107+
108+
&.color-selected,
109+
&:hover {
110+
border: 1px solid rgb(153, 153, 153);
111+
}
112+
}
113+
}
114+
115+
.title {
116+
font-family: Univers, sans-serif;
117+
font-size: 14px;
118+
font-weight: 300;
119+
padding: 12px;
120+
}
121+
122+
.price {
123+
font-family: Univers, sans-serif;
124+
font-size: 12px;
125+
font-weight: bold;
126+
display: inline-block;
127+
128+
&::first-letter {
129+
padding-right: 7px;
130+
}
44131
}
45132
}

‎src/app/features/products/components/product-card/product-card.component.ts

Lines changed: 7 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,16 @@
1-
import { Component, OnInit, Input } from '@angular/core';
2-
import { Router } from '@angular/router';
3-
import { IoRestorecommerceProductPhysicalVariant } from 'src/app/generated/graphql';
4-
import { ProductService } from '../../services/product.service';
1+
import { Component, HostBinding, Input } from '@angular/core';
2+
import { IoRestorecommerceProductProduct } from 'src/app/generated/graphql';
53

64
@Component({
75
selector: 'app-product-card',
86
templateUrl: './product-card.component.html',
97
styleUrls: ['./product-card.component.scss'],
108
})
11-
export class ProductCardComponent implements OnInit {
12-
@Input() product!: IoRestorecommerceProductPhysicalVariant;
9+
export class ProductCardComponent {
10+
@HostBinding('class') classes = 'column align-centered product';
11+
@Input() product!: IoRestorecommerceProductProduct;
1312

14-
currency: string;
13+
currency = '€';
1514
selectedColor: number;
1615

1716
responsiveImagesConfiguration = [
@@ -27,36 +26,5 @@ export class ProductCardComponent implements OnInit {
2726
{ width: 400, min: 1382, max: 99999, suffix: '-xl', format: 'jpeg' },
2827
];
2928

30-
constructor(private router: Router, private productService: ProductService) {}
31-
32-
onProductClicked() {
33-
// this.router.navigateByUrl(this.product.urls['self']);
34-
}
35-
36-
ngOnInit(): void {
37-
this.selectedColor = 0;
38-
}
39-
40-
onMouseEnter($event: string) {
41-
this.onHoverColorPicker($event);
42-
}
43-
44-
onMouseLeave($event: string) {
45-
this.onHoverColorPicker($event);
46-
}
47-
48-
private onHoverColorPicker(colorHovered: string) {
49-
// if (this.product.selectedColor === colorHovered) {
50-
// return;
51-
// }
52-
// if (!this.product.colors.find((color) => color === colorHovered)) {
53-
// this.selectedColor = this.product.selectedColor;
54-
// } else {
55-
// this.selectedColor = colorHovered;
56-
// }
57-
}
58-
59-
onLikeProduct() {
60-
// this.product.like = !this.product.like;
61-
}
29+
// (click)="onProductClicked(product.id)"
6230
}

‎src/app/features/products/components/product-gallery/product-gallery.component.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import {
22
Component,
3-
OnInit,
43
Input,
54
OnChanges,
65
SimpleChanges,

‎src/app/features/products/components/product-variant-card/product-variant-card.component.html

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<div class="row justify-between product-header">
2+
<div class="row additional-label">
3+
<div class="text">{{ product.name }}</div>
4+
<div class="rounded-right"></div>
5+
</div>
6+
<i class="fas fa-heart like"></i>
7+
</div>
8+
<picture class="image-wrapper">
9+
<!-- <source
10+
class="image"
11+
*ngFor="let media of responsiveImagesConfiguration"
12+
[media]="
13+
'(max-width: ' +
14+
media.max +
15+
'px) and (min-width: ' +
16+
media.min +
17+
'px)'
18+
"
19+
[srcset]="
20+
'./assets/products_responsive/product' +
21+
(i + 1) +
22+
media.suffix +
23+
'.' +
24+
media.format
25+
"
26+
[type]="'image/' + media.format"
27+
/> -->
28+
<img class="image" alt="product image" [src]="product.images[0].url" />
29+
</picture>
30+
<div
31+
class="row center justify-center spinner-wrapper"
32+
*ngIf="!product.images[0].url"
33+
>
34+
<i class="fas fa-spinner spinner"></i>
35+
</div>
36+
<!-- <div class="row justify-center colors">
37+
<div
38+
class="row color-wrapper"
39+
*ngFor="let color of product.colors"
40+
[class.color-selected]="color === product.selectedColor"
41+
(click)="product.selectedColor = color"
42+
>
43+
<div class="color" [style.background-color]="color"></div>
44+
</div>
45+
</div> -->
46+
<div class="title">{{ product.name }}</div>
47+
<div class="row justify-center price">
48+
{{ product.price.salePrice | currency : currency }}
49+
</div>

‎src/app/features/products/components/product-variants/product-variants.component.scss renamed to ‎src/app/features/products/components/product-variant-card/product-variant-card.component.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.product {
1+
:host(.product) {
22
background-color: white;
33
width: calc(33.333333% - 30px);
44
@media (max-width: 1100px) {

0 commit comments

Comments
 (0)