From 7ed0ea5776aed6695cb8a4c45d2bcc9e899f8e2c Mon Sep 17 00:00:00 2001
From: Bello Babakolo <fleetbeekay@gmail.com>
Date: Fri, 19 Jan 2024 14:50:07 +0100
Subject: [PATCH] Refactor products page and route

---
 .../product-card/product-card.component.html  |  94 ++++---
 .../product-card/product-card.component.scss  | 153 +++++++---
 .../product-card/product-card.component.ts    |  46 +--
 .../product-gallery.component.ts              |   1 -
 .../product-variant-card.component.html       |  49 ++++
 .../product-variant-card.component.scss}      |   2 +-
 .../product-variant-card.component.ts         |  27 ++
 .../product-variants.component.html           |  63 -----
 .../products/products.component.html          | 112 --------
 .../products/products.component.scss          | 261 ------------------
 .../components/products/products.component.ts |  71 -----
 .../shoes-products.component.html             |   5 -
 .../shoes-products.component.ts               |  14 -
 .../components/shoes/shoes.component.html     |   1 -
 .../components/shoes/shoes.component.ts       |   7 -
 .../features/products/data/product-samples.ts |   2 +-
 .../product-list/product-list.component.html  |   5 +
 .../product-list/product-list.component.ts    |  22 ++
 .../product-variants.component.html           |   7 +
 .../product-variants.component.ts             |  21 +-
 .../products-layout.component.html}           |   5 +-
 .../products-layout.component.scss}           |   0
 .../products-layout.component.ts              |  47 ++++
 .../pages/products/products.component.ts      |   7 +
 src/app/features/products/products.module.ts  |  37 +--
 src/app/features/products/templates/.keep     |   0
 .../products-template.component.ts            |  71 -----
 27 files changed, 370 insertions(+), 760 deletions(-)
 create mode 100644 src/app/features/products/components/product-variant-card/product-variant-card.component.html
 rename src/app/features/products/components/{product-variants/product-variants.component.scss => product-variant-card/product-variant-card.component.scss} (99%)
 create mode 100644 src/app/features/products/components/product-variant-card/product-variant-card.component.ts
 delete mode 100644 src/app/features/products/components/product-variants/product-variants.component.html
 delete mode 100644 src/app/features/products/components/products/products.component.html
 delete mode 100644 src/app/features/products/components/products/products.component.scss
 delete mode 100644 src/app/features/products/components/products/products.component.ts
 delete mode 100644 src/app/features/products/components/shoes-products/shoes-products.component.html
 delete mode 100644 src/app/features/products/components/shoes-products/shoes-products.component.ts
 delete mode 100644 src/app/features/products/components/shoes/shoes.component.html
 delete mode 100644 src/app/features/products/components/shoes/shoes.component.ts
 create mode 100644 src/app/features/products/pages/product-list/product-list.component.html
 create mode 100644 src/app/features/products/pages/product-list/product-list.component.ts
 create mode 100644 src/app/features/products/pages/product-variants/product-variants.component.html
 rename src/app/features/products/{components => pages}/product-variants/product-variants.component.ts (55%)
 rename src/app/features/products/{templates/products-template/products-template.component.html => pages/products-layout/products-layout.component.html} (94%)
 rename src/app/features/products/{templates/products-template/products-template.component.scss => pages/products-layout/products-layout.component.scss} (100%)
 create mode 100644 src/app/features/products/pages/products-layout/products-layout.component.ts
 create mode 100644 src/app/features/products/pages/products/products.component.ts
 delete mode 100644 src/app/features/products/templates/.keep
 delete mode 100644 src/app/features/products/templates/products-template/products-template.component.ts

diff --git a/src/app/features/products/components/product-card/product-card.component.html b/src/app/features/products/components/product-card/product-card.component.html
index e51ee21..61c084e 100644
--- a/src/app/features/products/components/product-card/product-card.component.html
+++ b/src/app/features/products/components/product-card/product-card.component.html
@@ -1,47 +1,49 @@
-<vcl-panel panel-card class="product-card" (click)="onProductClicked()">
-  <vcl-panel-title
-    class="row justify-content-between align-items-center m-0 p-2"
-  >
-    <vcl-label class="badge">
-      <!-- {{ product.additionalLabel }} -->
-      Product.additionalLabel
-    </vcl-label>
-    <button vcl-square-button class="circular favorite">
-      <vcl-icon icon="fas:heart"></vcl-icon>
-    </button>
-  </vcl-panel-title>
-  <div class="position-relative">
-    <picture class="image-wrapper">
-      <source
-        class="image"
-        *ngFor="let media of responsiveImagesConfiguration"
-        [media]="
-          '(max-width: ' +
-          media.max +
-          'px) and (min-width: ' +
-          media.min +
-          'px)'
-        "
-        [srcset]="product.images[selectedColor].url"
-        [type]="'image/' + media.format"
-      />
-      <img
-        class="product-card__image"
-        alt="product image"
-        [src]="product.images[selectedColor].url"
-      />
-    </picture>
-    <!-- <div class="product-card__quick-shop p-3">quick shop</div> -->
+<div class="row justify-between product-header">
+  <div class="row additional-label">
+    <div class="text">
+      {{ product.product.physical.variants.length }} Varaints
+    </div>
+    <div class="rounded-right"></div>
   </div>
-  <vcl-panel-footer class="p-2 product-card__footer">
-    <vcl-label class="product-card__title">{{ product.name }}</vcl-label>
-    <vcl-label class="product-card__price">{{
-      product.price.salePrice | currency: currency
-    }}</vcl-label>
-    <!-- <app-product-color-picker
-      [colors]="product.colors"
-      (mouseOver)="onMouseEnter($event)"
-      (mouseOut)="onMouseLeave($event)"
-    ></app-product-color-picker> -->
-  </vcl-panel-footer>
-</vcl-panel>
+  <i class="fas fa-heart like"></i>
+</div>
+<picture class="image-wrapper">
+  <!-- <source
+    class="image"
+    *ngFor="let media of responsiveImagesConfiguration"
+    [media]="
+      '(max-width: ' +
+      media.max +
+      'px) and (min-width: ' +
+      media.min +
+      'px)'
+    "
+    [srcset]="product.product.physical.variants[0].images[0].url"
+    [type]="'image/' + media.format"
+  /> -->
+  <img
+    class="image"
+    alt="product image"
+    [src]="product.product.physical.variants[0].images[0].url"
+  />
+</picture>
+<div
+  class="row center justify-center spinner-wrapper"
+  *ngIf="!product.product.physical.variants[0].images[0].url"
+>
+  <i class="fas fa-spinner spinner"></i>
+</div>
+<!-- <div class="row justify-center colors">
+    <div
+      class="row color-wrapper"
+      *ngFor="let color of product.colors"
+      [class.color-selected]="color === product.selectedColor"
+      (click)="product.selectedColor = color"
+    >
+      <div class="color" [style.background-color]="color"></div>
+    </div>
+  </div> -->
+<div class="title">{{ product.product.name }}</div>
+<!-- <div class="row justify-center price">
+    {{ product.price | currency : currency }}
+  </div> -->
diff --git a/src/app/features/products/components/product-card/product-card.component.scss b/src/app/features/products/components/product-card/product-card.component.scss
index de20006..ae296e5 100644
--- a/src/app/features/products/components/product-card/product-card.component.scss
+++ b/src/app/features/products/components/product-card/product-card.component.scss
@@ -1,45 +1,132 @@
-.product-card {
-  width: 100%;
-  cursor: pointer;
-  box-shadow: 0.3em 0.5em 0.5em rgba($color: #000000, $alpha: 0.13);
+:host(.product) {
+  background-color: white;
+  width: calc(33.333333% - 30px);
+  @media (max-width: 1100px) {
+    width: calc(50% - 30px);
+  }
+  @media (max-width: 700px) {
+    width: calc(100% - 30px);
+  }
+  margin-left: 10px;
+  margin-bottom: 10px;
+  display: grid;
+  padding: 10px;
 
-  &__title {
-    display: block;
-    text-align: center;
-    text-overflow: ellipsis;
-    letter-spacing: 1px;
-    padding-bottom: 0.5em;
+  &:hover {
+    box-shadow: 0 0 11px rgba(33, 33, 33, 0.2);
   }
 
-  &__price {
-    display: block;
-    text-align: center;
-    font-weight: 700;
-    padding-bottom: 0.5em;
+  .product-header {
+    .additional-label {
+      margin-left: -10px;
+      max-height: 0px;
+      margin-top: 4px;
+
+      .text {
+        text-transform: uppercase;
+        font-family: Univers, sans-serif;
+        font-weight: 300;
+        font-size: 12px;
+        background-color: rgba(238, 238, 238, 0.7);
+        padding: 3px 0 1px 10px;
+      }
+
+      .rounded-right {
+        background-color: red;
+        border: 1px solid transparent;
+        border-top-right-radius: 50%;
+        border-bottom-right-radius: 50%;
+        width: 21px;
+        background-color: rgba(238, 238, 238, 0.7);
+      }
+    }
+
+    .like {
+      font-size: 18px;
+      -webkit-text-fill-color: transparent;
+      -webkit-text-stroke-width: 1px;
+      -webkit-text-stroke-color: black;
+      cursor: pointer;
+      border: 1px solid #dddddd;
+      border-radius: 50%;
+      width: 31px;
+      height: 31px;
+      text-indent: -1px;
+      line-height: 31px;
+      margin-left: auto;
+
+      &:hover,
+      &.liked {
+        -webkit-text-fill-color: black;
+      }
+    }
   }
 
-  &__image {
-    min-height: 100%;
-    max-width: 100%;
+  .image-wrapper {
+    margin-top: 10px;
+    cursor: pointer;
     width: 100%;
+    padding-top: 150%;
+    position: relative;
+
+    .image {
+      display: block;
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      top: 0;
+    }
   }
 
-  &__quick-shop {
-    background-color: black;
-    color: white;
-    text-transform: uppercase;
-    text-decoration: none;
-    text-align: center;
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    transform: translateY(110%);
-    width: 100%;
-    transition: transform 0.2s;
+  .spinner-wrapper {
+    min-height: 446px;
+    .spinner {
+      font-size: 40px;
+    }
   }
 
-  &:hover &__quick-shop {
-    transform: translateY(0);
+  .colors {
+    margin-top: 5px;
+    max-height: 26px;
+
+    .color-wrapper {
+      margin: 2px;
+      cursor: pointer;
+
+      .color {
+        width: 21px;
+        height: 21px;
+        background-color: white;
+        border: 1px solid rgb(153, 153, 153);
+        border-radius: 50%;
+      }
+
+      padding: 2px;
+      border: 1px solid white;
+      border-radius: 50%;
+
+      &.color-selected,
+      &:hover {
+        border: 1px solid rgb(153, 153, 153);
+      }
+    }
+  }
+
+  .title {
+    font-family: Univers, sans-serif;
+    font-size: 14px;
+    font-weight: 300;
+    padding: 12px;
+  }
+
+  .price {
+    font-family: Univers, sans-serif;
+    font-size: 12px;
+    font-weight: bold;
+    display: inline-block;
+
+    &::first-letter {
+      padding-right: 7px;
+    }
   }
 }
diff --git a/src/app/features/products/components/product-card/product-card.component.ts b/src/app/features/products/components/product-card/product-card.component.ts
index 785b90f..9fc86a5 100644
--- a/src/app/features/products/components/product-card/product-card.component.ts
+++ b/src/app/features/products/components/product-card/product-card.component.ts
@@ -1,17 +1,16 @@
-import { Component, OnInit, Input } from '@angular/core';
-import { Router } from '@angular/router';
-import { IoRestorecommerceProductPhysicalVariant } from 'src/app/generated/graphql';
-import { ProductService } from '../../services/product.service';
+import { Component, HostBinding, Input } from '@angular/core';
+import { IoRestorecommerceProductProduct } from 'src/app/generated/graphql';
 
 @Component({
   selector: 'app-product-card',
   templateUrl: './product-card.component.html',
   styleUrls: ['./product-card.component.scss'],
 })
-export class ProductCardComponent implements OnInit {
-  @Input() product!: IoRestorecommerceProductPhysicalVariant;
+export class ProductCardComponent {
+  @HostBinding('class') classes = 'column align-centered product';
+  @Input() product!: IoRestorecommerceProductProduct;
 
-  currency: string;
+  currency = '€';
   selectedColor: number;
 
   responsiveImagesConfiguration = [
@@ -27,36 +26,5 @@ export class ProductCardComponent implements OnInit {
     { width: 400, min: 1382, max: 99999, suffix: '-xl', format: 'jpeg' },
   ];
 
-  constructor(private router: Router, private productService: ProductService) {}
-
-  onProductClicked() {
-    // this.router.navigateByUrl(this.product.urls['self']);
-  }
-
-  ngOnInit(): void {
-    this.selectedColor = 0;
-  }
-
-  onMouseEnter($event: string) {
-    this.onHoverColorPicker($event);
-  }
-
-  onMouseLeave($event: string) {
-    this.onHoverColorPicker($event);
-  }
-
-  private onHoverColorPicker(colorHovered: string) {
-    // if (this.product.selectedColor === colorHovered) {
-    //   return;
-    // }
-    // if (!this.product.colors.find((color) => color === colorHovered)) {
-    //   this.selectedColor = this.product.selectedColor;
-    // } else {
-    //   this.selectedColor = colorHovered;
-    // }
-  }
-
-  onLikeProduct() {
-    // this.product.like = !this.product.like;
-  }
+  //   (click)="onProductClicked(product.id)"
 }
diff --git a/src/app/features/products/components/product-gallery/product-gallery.component.ts b/src/app/features/products/components/product-gallery/product-gallery.component.ts
index 30b0704..063cd6c 100644
--- a/src/app/features/products/components/product-gallery/product-gallery.component.ts
+++ b/src/app/features/products/components/product-gallery/product-gallery.component.ts
@@ -1,6 +1,5 @@
 import {
   Component,
-  OnInit,
   Input,
   OnChanges,
   SimpleChanges,
diff --git a/src/app/features/products/components/product-variant-card/product-variant-card.component.html b/src/app/features/products/components/product-variant-card/product-variant-card.component.html
new file mode 100644
index 0000000..a73eccd
--- /dev/null
+++ b/src/app/features/products/components/product-variant-card/product-variant-card.component.html
@@ -0,0 +1,49 @@
+<div class="row justify-between product-header">
+  <div class="row additional-label">
+    <div class="text">{{ product.name }}</div>
+    <div class="rounded-right"></div>
+  </div>
+  <i class="fas fa-heart like"></i>
+</div>
+<picture class="image-wrapper">
+  <!-- <source
+    class="image"
+    *ngFor="let media of responsiveImagesConfiguration"
+    [media]="
+      '(max-width: ' +
+      media.max +
+      'px) and (min-width: ' +
+      media.min +
+      'px)'
+    "
+    [srcset]="
+      './assets/products_responsive/product' +
+      (i + 1) +
+      media.suffix +
+      '.' +
+      media.format
+    "
+    [type]="'image/' + media.format"
+  /> -->
+  <img class="image" alt="product image" [src]="product.images[0].url" />
+</picture>
+<div
+  class="row center justify-center spinner-wrapper"
+  *ngIf="!product.images[0].url"
+>
+  <i class="fas fa-spinner spinner"></i>
+</div>
+<!-- <div class="row justify-center colors">
+    <div
+      class="row color-wrapper"
+      *ngFor="let color of product.colors"
+      [class.color-selected]="color === product.selectedColor"
+      (click)="product.selectedColor = color"
+    >
+      <div class="color" [style.background-color]="color"></div>
+    </div>
+  </div> -->
+<div class="title">{{ product.name }}</div>
+<div class="row justify-center price">
+  {{ product.price.salePrice | currency : currency }}
+</div>
diff --git a/src/app/features/products/components/product-variants/product-variants.component.scss b/src/app/features/products/components/product-variant-card/product-variant-card.component.scss
similarity index 99%
rename from src/app/features/products/components/product-variants/product-variants.component.scss
rename to src/app/features/products/components/product-variant-card/product-variant-card.component.scss
index 9d6e403..ae296e5 100644
--- a/src/app/features/products/components/product-variants/product-variants.component.scss
+++ b/src/app/features/products/components/product-variant-card/product-variant-card.component.scss
@@ -1,4 +1,4 @@
-.product {
+:host(.product) {
   background-color: white;
   width: calc(33.333333% - 30px);
   @media (max-width: 1100px) {
diff --git a/src/app/features/products/components/product-variant-card/product-variant-card.component.ts b/src/app/features/products/components/product-variant-card/product-variant-card.component.ts
new file mode 100644
index 0000000..fedf3a4
--- /dev/null
+++ b/src/app/features/products/components/product-variant-card/product-variant-card.component.ts
@@ -0,0 +1,27 @@
+import { Component, HostBinding, Input } from '@angular/core';
+import { IoRestorecommerceProductPhysicalVariant } from 'src/app/generated/graphql';
+
+@Component({
+  selector: 'app-product-variant-card',
+  templateUrl: './product-variant-card.component.html',
+  styleUrls: ['./product-variant-card.component.scss'],
+})
+export class ProductVariantCardComponent {
+  @HostBinding('class') classes = 'column align-centered product';
+  @Input() product!: IoRestorecommerceProductPhysicalVariant;
+
+  currency = '€';
+
+  responsiveImagesConfiguration = [
+    { width: 400, min: 0, max: 1100.99, suffix: '-xl', format: 'webp' },
+    { width: 400, min: 0, max: 1100.99, suffix: '-xl', format: 'jpeg' },
+    { width: 190, min: 1101, max: 1156.99, suffix: '-sm', format: 'webp' },
+    { width: 190, min: 1101, max: 1156.99, suffix: '-sm', format: 'jpeg' },
+    { width: 260, min: 1157, max: 1268.99, suffix: '-md', format: 'webp' },
+    { width: 260, min: 1157, max: 1268.99, suffix: '-md', format: 'jpeg' },
+    { width: 330, min: 1269, max: 1381.99, suffix: '-lg', format: 'webp' },
+    { width: 330, min: 1269, max: 1381.99, suffix: '-lg', format: 'jpeg' },
+    { width: 400, min: 1382, max: 99999, suffix: '-xl', format: 'webp' },
+    { width: 400, min: 1382, max: 99999, suffix: '-xl', format: 'jpeg' },
+  ];
+}
diff --git a/src/app/features/products/components/product-variants/product-variants.component.html b/src/app/features/products/components/product-variants/product-variants.component.html
deleted file mode 100644
index 119fd6b..0000000
--- a/src/app/features/products/components/product-variants/product-variants.component.html
+++ /dev/null
@@ -1,63 +0,0 @@
-<!-- <h1>Viewing Product With Variant {{ productId$ | async }}</h1> -->
-<ng-container *ngIf="productId$ | async as productId">
-  <app-products-template [pageTitle]="pageTitle$ | async">
-    <div
-      class="column align-centered product"
-      *ngFor="let variant of productVariants$ | async; let i = index"
-      (click)="onProductClicked(productId, variant.id)"
-    >
-      <div class="row justify-between product-header">
-        <div class="row additional-label" *ngIf="variant.additionalLabel">
-          <div class="text">{{ variant.additionalLabel }}</div>
-          <div class="rounded-right"></div>
-        </div>
-        <i
-          class="fas fa-heart like"
-          [class.liked]="variant.like"
-          (click)="variant.like = !variant.like"
-        ></i>
-      </div>
-      <picture class="image-wrapper">
-        <!-- <source
-          class="image"
-          *ngFor="let media of responsiveImagesConfiguration"
-          [media]="
-            '(max-width: ' +
-            media.max +
-            'px) and (min-width: ' +
-            media.min +
-            'px)'
-          "
-          [srcset]="
-            './assets/products_responsive/product' +
-            (i + 1) +
-            media.suffix +
-            '.' +
-            media.format
-          "
-          [type]="'image/' + media.format"
-        /> -->
-        <img
-          class="image"
-          alt="product image"
-          [src]="variant.images[0].url"
-        />
-      </picture>
-      <div class="row center justify-center spinner-wrapper" *ngIf="!variant.images[0].url"><i class="fas fa-spinner spinner"></i></div>
-      <div class="row justify-center colors">
-        <div
-          class="row color-wrapper"
-          *ngFor="let color of variant.colors"
-          [class.color-selected]="color === variant.selectedColor"
-          (click)="variant.selectedColor = color"
-        >
-          <div class="color" [style.background-color]="color"></div>
-        </div>
-      </div>
-      <div class="title">{{ variant.name }}</div>
-      <div class="row justify-center price">
-        {{ variant.price.salePrice | currency : currency }}
-      </div>
-    </div>
-  </app-products-template>
-</ng-container>
diff --git a/src/app/features/products/components/products/products.component.html b/src/app/features/products/components/products/products.component.html
deleted file mode 100644
index 47b347e..0000000
--- a/src/app/features/products/components/products/products.component.html
+++ /dev/null
@@ -1,112 +0,0 @@
-<section class="content-area page-products" role="main">
-  <header class="row center justify-between page-header">
-    <div class="row groups-buttons">
-      <div
-        class="row group-button"
-        *ngFor="let group of groups"
-        [class.selected]="selectedGroup === group.title"
-        (click)="selectedGroup = group.title"
-      >
-        <div class="title">{{ group.title }}</div>
-        {{ group.productCount }}
-      </div>
-    </div>
-    <div class="page-title">
-      {{ pageTitle }}
-    </div>
-    <div class="row panel-grid-size-and-sort">
-      <div class="row panel-grid-size">
-        <i
-          class="grid-size-button fas fa-th-large"
-          [class.selected]="selectedGridSize === '2x2'"
-          (click)="selectedGridSize = '2x2'"
-        ></i>
-        <i
-          class="grid-size-button fas fa-th"
-          [class.selected]="selectedGridSize === '3x3'"
-          (click)="selectedGridSize = '3x3'"
-        ></i>
-      </div>
-      <div
-        class="row justify-between panel-sort"
-        (click)="sortDropdownExpanded = !sortDropdownExpanded"
-      >
-        <div>Sort: {{ sortBy }}</div>
-        <i class="fas fa-sort"></i>
-        <div class="col sort-options" *ngIf="sortDropdownExpanded">
-          <div
-            class="sort-option"
-            *ngFor="let option of sortOptions"
-            [class.selected]="sortBy === option"
-            (click)="sortOptionClicked(option, $event)"
-          >
-            {{ option }}
-          </div>
-        </div>
-      </div>
-    </div>
-  </header>
-  <div class="row flex-no-wrap start justify-center body">
-    <div class="panel-filter">
-      <div class="row option" *ngFor="let filterOption of filterOptions">
-        <i class="fas fa-sort-down arrow"></i>
-        {{ filterOption }}
-      </div>
-    </div>
-    <!-- Product. -->
-    <div class="row flex-wrap panel-products">
-      <div
-        class="column align-centered product"
-        *ngFor="let product of products; let i = index"
-        (click)="onProductClicked(product.id)"
-      >
-        <div class="row justify-between product-header">
-          <div class="row additional-label">
-            <div class="text">{{ product.product.physical.variants.length }} Varaints</div>
-            <div class="rounded-right"></div>
-          </div>
-          <i
-            class="fas fa-heart like"
-            [class.liked]="product.like"
-            (click)="product.like = !product.like"
-          ></i>
-        </div>
-        <picture class="image-wrapper">
-          <!-- <source
-            class="image"
-            *ngFor="let media of responsiveImagesConfiguration"
-            [media]="
-              '(max-width: ' +
-              media.max +
-              'px) and (min-width: ' +
-              media.min +
-              'px)'
-            "
-            [srcset]="product.product.physical.variants[0].images[0].url"
-            [type]="'image/' + media.format"
-          /> -->
-          <img
-            class="image"
-            alt="product image"
-            [src]="product.product.physical.variants[0].images[0].url"
-          />
-        </picture>
-        <div class="row center justify-center spinner-wrapper" *ngIf="!product.product.physical.variants[0].images[0].url"><i class="fas fa-spinner spinner"></i></div>
-        <div class="row justify-center colors">
-          <div
-            class="row color-wrapper"
-            *ngFor="let color of product.colors"
-            [class.color-selected]="color === product.selectedColor"
-            (click)="product.selectedColor = color"
-          >
-            <div class="color" [style.background-color]="color"></div>
-          </div>
-        </div>
-        <div class="title">{{ product.product.name }}</div>
-        <div class="row justify-center price">
-          {{ product.price | currency : currency }}
-        </div>
-      </div>
-    </div>
-  </div>
-</section>
diff --git a/src/app/features/products/components/products/products.component.scss b/src/app/features/products/components/products/products.component.scss
deleted file mode 100644
index 642924e..0000000
--- a/src/app/features/products/components/products/products.component.scss
+++ /dev/null
@@ -1,261 +0,0 @@
-
-.page-products {
-  max-width: 1333px;
-  margin-left: auto;
-  margin-right: auto;
-
-  .page-header {
-    margin-bottom: 25px;
-
-    .groups-buttons {
-      .group-button {
-        margin-right: 20px;
-        cursor: pointer;
-        font: 400 13.3333px Arial;
-
-        .title {
-          font-weight: bold;
-          text-transform: uppercase;
-          margin-right: 5px;
-        }
-
-        &.selected {
-          border-bottom: 2px solid black;
-        }
-      }
-    }
-
-    .page-title {
-      font: Univers, sans-serif;
-      font-size: 28px;
-      font-weight: lighter;
-    }
-
-    .panel-grid-size-and-sort {
-      .panel-grid-size {
-        margin-right: 10px;
-
-        .grid-size-button {
-          margin-right: 5px;
-          font-size: 20px;
-          color: #aaaaaa;
-          cursor: pointer;
-
-          &.selected {
-            color: black;
-          }
-        }
-
-      }
-
-      .panel-sort {
-        border-bottom: 1px solid black;
-        width: 170px;
-        font-weight: bold;
-        padding-bottom: 5px;
-        position: relative;
-        cursor: pointer;
-
-        .sort-options {
-          position: absolute;
-          top: 24px;
-          border: 1px solid black;
-
-          .sort-option {
-            height: 42px;
-            max-height: 42px;
-            width: 170px;
-            text-transform: uppercase;
-            padding-top: 14px;
-            padding-left: 10px;
-            background-color: white;
-            font-weight: bold;
-            font-size: 12px;
-            cursor: pointer;
-
-            &.selected {
-              background-color: black;
-              color: white;
-            }
-
-            &:hover {
-              background-color: black;
-              color: white;
-            }
-
-          }
-
-        }
-      }
-    }
-  }
-
-  .body {
-    @media (max-width: 1100px) {
-      flex-wrap: wrap;
-    }
-
-    .panel-filter {
-      background-color: white;
-      padding: 0 30px 60px 30px;
-      margin-bottom: 20px;
-
-      .option {
-        width: 250px;
-        height: 40px;
-        border-bottom: 1px solid #bbbbbb;
-        background-color: #ffffff;
-        margin-top: 25px;
-        text-transform: uppercase;
-        font-weight: bold;
-
-        .arrow {
-          margin-right: 25px;
-        }
-      }
-    }
-
-    .panel-products {
-      width: 100%;
-      min-width: 720px;
-      @media (max-width: 700px) {
-        min-width: auto;
-      }
-
-      .product {
-        background-color: white;
-        width: calc(33.333333% - 30px);
-        @media (max-width: 1100px) {
-          width: calc(50% - 30px);
-        }
-        @media (max-width: 700px) {
-          width: calc(100% - 30px);
-        }
-        margin-left: 10px;
-        margin-bottom: 10px;
-        display: grid;
-        padding: 10px;
-
-        &:hover {
-          box-shadow: 0 0 11px rgba(33, 33, 33, .2);
-        }
-
-        .product-header {
-
-          .additional-label {
-            margin-left: -10px;
-            max-height: 0px;
-            margin-top: 4px;
-
-            .text {
-              text-transform: uppercase;
-              font-family: Univers, sans-serif;
-              font-weight: 300;
-              font-size: 12px;
-              background-color: rgba(238, 238, 238, .7);
-              padding: 3px 0 1px 10px;
-            }
-
-            .rounded-right {
-              background-color: red;
-              border: 1px solid transparent;
-              border-top-right-radius: 50%;
-              border-bottom-right-radius: 50%;
-              width: 21px;
-              background-color: rgba(238, 238, 238, .7);
-            }
-          }
-
-          .like {
-            font-size: 18px;
-            -webkit-text-fill-color: transparent;
-            -webkit-text-stroke-width: 1px;
-            -webkit-text-stroke-color: black;
-            cursor: pointer;
-            border: 1px solid #dddddd;
-            border-radius: 50%;
-            width: 31px;
-            height: 31px;
-            text-indent: -1px;
-            line-height: 31px;
-            margin-left: auto;
-
-            &:hover, &.liked {
-              -webkit-text-fill-color: black;
-            }
-          }
-        }
-
-        .image-wrapper {
-          margin-top: 10px;
-          cursor: pointer;
-          width: 100%;
-          padding-top: 150%;
-          position: relative;
-
-          .image {
-            display: block;
-            height: 100%;
-            width: 100%;
-            position: absolute;
-            top: 0;
-          }
-        }
-
-        .spinner-wrapper {
-          min-height: 446px;
-          .spinner {
-            font-size: 40px;
-          }
-        }
-
-        .colors {
-          margin-top: 5px;
-          max-height: 26px;
-
-          .color-wrapper {
-            margin: 2px;
-            cursor: pointer;
-
-            .color {
-              width: 21px;
-              height: 21px;
-              background-color: white;
-              border: 1px solid rgb(153, 153, 153);
-              border-radius: 50%;
-            }
-
-            padding: 2px;
-            border: 1px solid white;
-            border-radius: 50%;
-
-            &.color-selected, &:hover {
-              border: 1px solid rgb(153, 153, 153);
-            }
-          }
-
-        }
-
-        .title {
-          font-family: Univers, sans-serif;
-          font-size: 14px;
-          font-weight: 300;
-          padding: 12px;
-        }
-
-        .price {
-          font-family: Univers, sans-serif;
-          font-size: 12px;
-          font-weight: bold;
-          display: inline-block;
-
-          &::first-letter {
-            padding-right: 7px;
-          }
-        }
-
-      }
-    }
-  }
-}
-
diff --git a/src/app/features/products/components/products/products.component.ts b/src/app/features/products/components/products/products.component.ts
deleted file mode 100644
index 0ca5796..0000000
--- a/src/app/features/products/components/products/products.component.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { Router } from '@angular/router';
-import { IoRestorecommerceProductProduct } from 'src/app/generated/graphql';
-
-@Component({
-  selector: 'app-products',
-  templateUrl: './products.component.html',
-  styleUrls: ['./products.component.scss']
-})
-export class ProductsComponent {
-
-  responsiveImagesConfiguration = [
-    {width: 400, min: 0, max: 1100.99, suffix: '-xl', format: 'webp'},
-    {width: 400, min: 0, max: 1100.99, suffix: '-xl', format: 'jpg'},
-    {width: 190, min: 1101, max: 1156.99, suffix: '-sm', format: 'webp'},
-    {width: 190, min: 1101, max: 1156.99, suffix: '-sm', format: 'jpg'},
-    {width: 260, min: 1157, max: 1268.99, suffix: '-md', format: 'webp'},
-    {width: 260, min: 1157, max: 1268.99, suffix: '-md', format: 'jpg'},
-    {width: 330, min: 1269, max: 1381.99, suffix: '-lg', format: 'webp'},
-    {width: 330, min: 1269, max: 1381.99, suffix: '-lg', format: 'jpg'},
-    {width: 400, min: 1382, max: 99999, suffix: '-xl', format: 'webp'},
-    {width: 400, min: 1382, max: 99999, suffix: '-xl', format: 'jpg'}
-  ];
-
-  groups: {title: string, productCount: number}[] = [
-    {title: 'all', productCount: 244},
-    {title: 'brand 1', productCount: 170},
-    {title: 'brand 2', productCount: 74}
-  ];
-
-  selectedGroup = this.groups[0].title;
-
-  selectedGridSize = '2x2';
-
-  sortOptions: string[] = ['most popular', 'newest', 'price (low-high)', 'price (high-low)'];
-  sortDropdownExpanded = false;
-  sortBy = this.sortOptions[0];
-
-  filterOptions: string[] = ['size', 'color', 'brand', 'wearing occasion', 'season', 'capsule'];
-
-  @Input() currency: string;
-  @Input() products: IoRestorecommerceProductProduct[] = [];
-  @Input() pageTitle: string;
-
-  constructor(private router: Router) { }
-
-  sortOptionClicked(option: string, event) {
-    this.sortBy = option;
-    this.sortDropdownExpanded = false;
-    event.stopPropagation();
-  }
-
-  onProductClicked(productId: string) {
-    this.router.navigateByUrl(`products/${productId}`)
-  }
-
-}
-
-export function timeout(ms) {
-  return new Promise(resolve => setTimeout(resolve, ms));
-}
-
-export class Product {
-  title: string;
-  price: number;
-  imgUrl: string;
-  like: boolean;
-  additionalLabel: string;
-  colors: string[];
-  selectedColor: string;
-}
diff --git a/src/app/features/products/components/shoes-products/shoes-products.component.html b/src/app/features/products/components/shoes-products/shoes-products.component.html
deleted file mode 100644
index a276755..0000000
--- a/src/app/features/products/components/shoes-products/shoes-products.component.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<app-products
-  [pageTitle]="pageTitle"
-  [currency]="currency"
-  [products]="products$ | async"
-></app-products>
diff --git a/src/app/features/products/components/shoes-products/shoes-products.component.ts b/src/app/features/products/components/shoes-products/shoes-products.component.ts
deleted file mode 100644
index 4c72852..0000000
--- a/src/app/features/products/components/shoes-products/shoes-products.component.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { ProductService } from 'src/app/features/products/services/product.service';
-
-@Component({
-  selector: 'app-shoes-products',
-  templateUrl: './shoes-products.component.html',
-})
-export class ShoesProductsComponent {
-  products$ = this.productService.products$;
-  pageTitle = "Men's shoes";
-  currency = '€';
-
-  constructor(private productService: ProductService) {}
-}
diff --git a/src/app/features/products/components/shoes/shoes.component.html b/src/app/features/products/components/shoes/shoes.component.html
deleted file mode 100644
index 0680b43..0000000
--- a/src/app/features/products/components/shoes/shoes.component.html
+++ /dev/null
@@ -1 +0,0 @@
-<router-outlet></router-outlet>
diff --git a/src/app/features/products/components/shoes/shoes.component.ts b/src/app/features/products/components/shoes/shoes.component.ts
deleted file mode 100644
index e522bfc..0000000
--- a/src/app/features/products/components/shoes/shoes.component.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-shoes',
-  templateUrl: './shoes.component.html',
-})
-export class ShoesComponent {}
diff --git a/src/app/features/products/data/product-samples.ts b/src/app/features/products/data/product-samples.ts
index 88bcb2a..2a8d71f 100644
--- a/src/app/features/products/data/product-samples.ts
+++ b/src/app/features/products/data/product-samples.ts
@@ -1,4 +1,4 @@
-import { Product } from '../pages/products/products.component';
+import { Product } from '../pages/products-layout/products-layout.component';
 
 const products: Product[] = [];
 
diff --git a/src/app/features/products/pages/product-list/product-list.component.html b/src/app/features/products/pages/product-list/product-list.component.html
new file mode 100644
index 0000000..85eacd3
--- /dev/null
+++ b/src/app/features/products/pages/product-list/product-list.component.html
@@ -0,0 +1,5 @@
+<app-product-card
+  *ngFor="let product of products$ | async"
+  [product]="product"
+  (click)="onProductClicked(product.id)"
+></app-product-card>
diff --git a/src/app/features/products/pages/product-list/product-list.component.ts b/src/app/features/products/pages/product-list/product-list.component.ts
new file mode 100644
index 0000000..3c3bc9f
--- /dev/null
+++ b/src/app/features/products/pages/product-list/product-list.component.ts
@@ -0,0 +1,22 @@
+import { Component, HostBinding } from '@angular/core';
+import { Router } from '@angular/router';
+import { ProductService } from 'src/app/features/products/services/product.service';
+
+@Component({
+  selector: 'app-product-list',
+  templateUrl: './product-list.component.html',
+})
+export class ProductListComponent {
+  @HostBinding('class') classes = 'w-100p row flex-wrap';
+
+  products$ = this.productService.products$;
+
+  // TODO Pass pageTitle to the top view
+  pageTitle = "Men's shoes";
+
+  constructor(private productService: ProductService, private router: Router) {}
+
+  onProductClicked(productId: string) {
+    this.router.navigateByUrl(`products/${productId}`);
+  }
+}
diff --git a/src/app/features/products/pages/product-variants/product-variants.component.html b/src/app/features/products/pages/product-variants/product-variants.component.html
new file mode 100644
index 0000000..842937f
--- /dev/null
+++ b/src/app/features/products/pages/product-variants/product-variants.component.html
@@ -0,0 +1,7 @@
+<ng-container *ngIf="productId$ | async as productId">
+  <app-product-variant-card
+    *ngFor="let variant of productVariants$ | async"
+    [product]="variant"
+    (click)="onProductClicked(productId, variant.id)"
+  ></app-product-variant-card>
+</ng-container>
diff --git a/src/app/features/products/components/product-variants/product-variants.component.ts b/src/app/features/products/pages/product-variants/product-variants.component.ts
similarity index 55%
rename from src/app/features/products/components/product-variants/product-variants.component.ts
rename to src/app/features/products/pages/product-variants/product-variants.component.ts
index 30f896f..45efc27 100644
--- a/src/app/features/products/components/product-variants/product-variants.component.ts
+++ b/src/app/features/products/pages/product-variants/product-variants.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, HostBinding } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { map, switchMap } from 'rxjs';
 
@@ -7,23 +7,12 @@ import { ProductService } from 'src/app/features/products/services/product.servi
 @Component({
   selector: 'app-product-variants',
   templateUrl: './product-variants.component.html',
-  styleUrls: ['./product-variants.component.scss'],
 })
 export class ProductVariantsComponent {
-  currency = '€';
-  responsiveImagesConfiguration = [
-    { width: 400, min: 0, max: 1100.99, suffix: '-xl', format: 'webp' },
-    { width: 400, min: 0, max: 1100.99, suffix: '-xl', format: 'jpg' },
-    { width: 190, min: 1101, max: 1156.99, suffix: '-sm', format: 'webp' },
-    { width: 190, min: 1101, max: 1156.99, suffix: '-sm', format: 'jpg' },
-    { width: 260, min: 1157, max: 1268.99, suffix: '-md', format: 'webp' },
-    { width: 260, min: 1157, max: 1268.99, suffix: '-md', format: 'jpg' },
-    { width: 330, min: 1269, max: 1381.99, suffix: '-lg', format: 'webp' },
-    { width: 330, min: 1269, max: 1381.99, suffix: '-lg', format: 'jpg' },
-    { width: 400, min: 1382, max: 99999, suffix: '-xl', format: 'webp' },
-    { width: 400, min: 1382, max: 99999, suffix: '-xl', format: 'jpg' },
-  ];
-
+  @HostBinding('class') classes = 'w-100p row flex-wrap';
+  // TODO Flex wrap may have been deprecated in the
+  // TODO Pass 'title' to the top of the products component.
+  // TODO Use the route params.
   productId$ = this.route.params.pipe(
     map((params) => params.productId as string)
   );
diff --git a/src/app/features/products/templates/products-template/products-template.component.html b/src/app/features/products/pages/products-layout/products-layout.component.html
similarity index 94%
rename from src/app/features/products/templates/products-template/products-template.component.html
rename to src/app/features/products/pages/products-layout/products-layout.component.html
index 9a844ac..09dfa26 100644
--- a/src/app/features/products/templates/products-template/products-template.component.html
+++ b/src/app/features/products/pages/products-layout/products-layout.component.html
@@ -53,8 +53,9 @@
         {{ filterOption }}
       </div>
     </div>
-    <div class="row flex-wrap panel-products">
-      <ng-content></ng-content>
+    <!-- TODO: Should layout misbehave.  -->
+    <div class="flex">
+      <router-outlet></router-outlet>
     </div>
   </div>
 </section>
diff --git a/src/app/features/products/templates/products-template/products-template.component.scss b/src/app/features/products/pages/products-layout/products-layout.component.scss
similarity index 100%
rename from src/app/features/products/templates/products-template/products-template.component.scss
rename to src/app/features/products/pages/products-layout/products-layout.component.scss
diff --git a/src/app/features/products/pages/products-layout/products-layout.component.ts b/src/app/features/products/pages/products-layout/products-layout.component.ts
new file mode 100644
index 0000000..dbdcdd7
--- /dev/null
+++ b/src/app/features/products/pages/products-layout/products-layout.component.ts
@@ -0,0 +1,47 @@
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-products-layout',
+  templateUrl: './products-layout.component.html',
+  styleUrls: ['./products-layout.component.scss'],
+})
+export class ProductsLayoutComponent {
+  pageTitle = 'Products';
+
+  groups: { title: string; productCount: number }[] = [
+    { title: 'all', productCount: 244 },
+    { title: 'brand 1', productCount: 170 },
+    { title: 'brand 2', productCount: 74 },
+  ];
+
+  selectedGroup = this.groups[0].title;
+
+  selectedGridSize = '2x2';
+
+  sortOptions: string[] = [
+    'most popular',
+    'newest',
+    'price (low-high)',
+    'price (high-low)',
+  ];
+  sortDropdownExpanded = false;
+  sortBy = this.sortOptions[0];
+
+  filterOptions: string[] = [
+    'size',
+    'color',
+    'brand',
+    'wearing occasion',
+    'season',
+    'capsule',
+  ];
+
+  constructor(private router: Router) {}
+
+  sortOptionClicked(option: string, event) {
+    this.sortBy = option;
+    this.sortDropdownExpanded = false;
+    event.stopPropagation();
+  }
+}
diff --git a/src/app/features/products/pages/products/products.component.ts b/src/app/features/products/pages/products/products.component.ts
new file mode 100644
index 0000000..8ba49e2
--- /dev/null
+++ b/src/app/features/products/pages/products/products.component.ts
@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-products',
+  template: `<router-outlet></router-outlet>`,
+})
+export class ProductsComponent {}
diff --git a/src/app/features/products/products.module.ts b/src/app/features/products/products.module.ts
index 3afa652..fac64df 100644
--- a/src/app/features/products/products.module.ts
+++ b/src/app/features/products/products.module.ts
@@ -1,11 +1,8 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule, Routes } from '@angular/router';
-import { ShoesComponent } from './components/shoes/shoes.component';
-import { ShoesProductsComponent } from './components/shoes-products/shoes-products.component';
 import { ProductComponent } from './components/product/product.component';
-import { ProductVariantsComponent } from './components/product-variants/product-variants.component';
-import { ProductsTemplateComponent } from './templates/products-template/products-template.component';
+import { ProductVariantsComponent } from './pages/product-variants/product-variants.component';
 import { ProductCardComponent } from './components/product-card/product-card.component';
 import { ProductColorPickerComponent } from './components/product-color-picker/product-color-picker.component';
 import { ProductInterestComponent } from './components/product-interest/product-interest.component';
@@ -17,7 +14,7 @@ import { ProductMainComponent } from './components/product-main/product-main.com
 import { ProductRecommendComponent } from './components/product-recommend/product-recommend.component';
 import { ProductSizePickerComponent } from './components/product-size-picker/product-size-picker.component';
 import { SharedModule } from '../../shared/shared.module';
-import { ProductsComponent } from './components/products/products.component';
+import { ProductsLayoutComponent } from './pages/products-layout/products-layout.component';
 import {
   VCLGalleryModule,
   VCLSelectListModule,
@@ -25,6 +22,9 @@ import {
   VCLZoomBoxModule,
 } from '@vcl/ng-vcl';
 import { ProductZoomComponent } from './components/product-zoom/product-zoom.component';
+import { ProductVariantCardComponent } from './components/product-variant-card/product-variant-card.component';
+import { ProductListComponent } from './pages/product-list/product-list.component';
+import { ProductsComponent } from './pages/products/products.component';
 
 const vclModules = [
   VCLSelectModule,
@@ -36,34 +36,36 @@ const vclModules = [
 const routes: Routes = [
   {
     path: 'products',
-    component: ShoesComponent,
+    component: ProductsComponent,
     children: [
       {
         path: '',
-        component: ShoesProductsComponent,
+        component: ProductsLayoutComponent,
+        children: [
+          {
+            path: '',
+            component: ProductListComponent,
+          },
+          {
+            path: ':productId',
+            component: ProductVariantsComponent,
+          },
+        ],
       },
       {
         path: ':productId/variants/:variantId',
         component: ProductComponent,
       },
-      {
-        path: ':productId',
-        component: ProductVariantsComponent,
-      },
     ],
   },
 ];
 
 @NgModule({
   declarations: [
-    ShoesComponent,
-    ShoesProductsComponent,
+    ProductsComponent,
     ProductComponent,
-    ShoesProductsComponent,
     ProductVariantsComponent,
-    ProductsTemplateComponent,
     ProductComponent,
-    ProductsComponent,
     ProductCardComponent,
     ProductColorPickerComponent,
     ProductDescriptionComponent,
@@ -75,6 +77,9 @@ const routes: Routes = [
     ProductRecommendComponent,
     ProductSizePickerComponent,
     ProductZoomComponent,
+    ProductVariantCardComponent,
+    ProductListComponent,
+    ProductsLayoutComponent
   ],
   imports: [
     CommonModule,
diff --git a/src/app/features/products/templates/.keep b/src/app/features/products/templates/.keep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/app/features/products/templates/products-template/products-template.component.ts b/src/app/features/products/templates/products-template/products-template.component.ts
deleted file mode 100644
index dc81e66..0000000
--- a/src/app/features/products/templates/products-template/products-template.component.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { Router } from '@angular/router';
-import { IoRestorecommerceProductProduct } from 'src/app/generated/graphql';
-
-@Component({
-  selector: 'app-products-template',
-  templateUrl: './products-template.component.html',
-  styleUrls: ['./products-template.component.scss']
-})
-export class ProductsTemplateComponent {
-
-  responsiveImagesConfiguration = [
-    {width: 400, min: 0, max: 1100.99, suffix: '-xl', format: 'webp'},
-    {width: 400, min: 0, max: 1100.99, suffix: '-xl', format: 'jpg'},
-    {width: 190, min: 1101, max: 1156.99, suffix: '-sm', format: 'webp'},
-    {width: 190, min: 1101, max: 1156.99, suffix: '-sm', format: 'jpg'},
-    {width: 260, min: 1157, max: 1268.99, suffix: '-md', format: 'webp'},
-    {width: 260, min: 1157, max: 1268.99, suffix: '-md', format: 'jpg'},
-    {width: 330, min: 1269, max: 1381.99, suffix: '-lg', format: 'webp'},
-    {width: 330, min: 1269, max: 1381.99, suffix: '-lg', format: 'jpg'},
-    {width: 400, min: 1382, max: 99999, suffix: '-xl', format: 'webp'},
-    {width: 400, min: 1382, max: 99999, suffix: '-xl', format: 'jpg'}
-  ];
-
-  groups: {title: string, productCount: number}[] = [
-    {title: 'all', productCount: 244},
-    {title: 'brand 1', productCount: 170},
-    {title: 'brand 2', productCount: 74}
-  ];
-
-  selectedGroup = this.groups[0].title;
-
-  selectedGridSize = '2x2';
-
-  sortOptions: string[] = ['most popular', 'newest', 'price (low-high)', 'price (high-low)'];
-  sortDropdownExpanded = false;
-  sortBy = this.sortOptions[0];
-
-  filterOptions: string[] = ['size', 'color', 'brand', 'wearing occasion', 'season', 'capsule'];
-
-  @Input() currency: string;
-  @Input() products: IoRestorecommerceProductProduct[] = [];
-  @Input() pageTitle: string;
-
-  constructor(private router: Router) { }
-
-  sortOptionClicked(option: string, event) {
-    this.sortBy = option;
-    this.sortDropdownExpanded = false;
-    event.stopPropagation();
-  }
-
-  onProductClicked(productId: string) {
-    this.router.navigateByUrl(`shoes/${productId}`)
-  }
-
-}
-
-export function timeout(ms) {
-  return new Promise(resolve => setTimeout(resolve, ms));
-}
-
-export class Product {
-  title: string;
-  price: number;
-  imgUrl: string;
-  like: boolean;
-  additionalLabel: string;
-  colors: string[];
-  selectedColor: string;
-}