fix: replace the product label image sprite, use CSS only styling and…

… localized HTML text (#1319) - add localization for product labels - add migration documentation BREAKING CHANGES: The product label ribbon image is replaced with localized text and CSS styling.
intershop · Nov 21, 2022 · 7f63863 · 7f63863
1 parent eebebec
commit 7f63863
Show file tree

Hide file tree

Showing 11 changed files with 77 additions and 10 deletions.
diff --git a/docs/guides/migrations.md b/docs/guides/migrations.md
@@ -20,6 +20,8 @@ The two small black triangle images `active_catalog.png` (header: when hovering
 
 The basket empty image `empty-cart.png` is removed and replaced with CSS styling.
 
+The sprite image `product_sprite.png` is removed and replaced with localized text for "New", "Sale" and "Top" with the according CSS styling.
+
 ## 3.0 to 3.1
 
 The SSR environment variable 'ICM_IDENTITY_PROVIDER' will be removed in a future release ( PWA 5.0 ).

diff --git a/src/app/shared/components/product/product-label/product-label.component.html b/src/app/shared/components/product/product-label/product-label.component.html
@@ -1,5 +1,14 @@
-<span
-  *ngIf="productLabel$ | async as productLabel"
-  class="product-label"
-  [ngClass]="'product-label-' + productLabel"
-></span>
+<span *ngIf="productLabel$ | async as productLabel" class="product-label" [ngClass]="'product-label-' + productLabel">
+  <ng-container [ngSwitch]="productLabel">
+    <!-- check for the value and show the according localized text in the ribbon -->
+    <ng-container *ngSwitchCase="'new'">
+      {{ 'product.label.new.text' | translate }}
+    </ng-container>
+    <ng-container *ngSwitchCase="'sale'">
+      {{ 'product.label.sale.text' | translate }}
+    </ng-container>
+    <ng-container *ngSwitchCase="'topseller'">
+      {{ 'product.label.topseller.text' | translate }}
+    </ng-container>
+  </ng-container>
+</span>
diff --git a/src/app/shared/components/product/product-label/product-label.component.spec.ts b/src/app/shared/components/product/product-label/product-label.component.spec.ts
@@ -1,4 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TranslateModule } from '@ngx-translate/core';
 import { of } from 'rxjs';
 import { instance, mock, when } from 'ts-mockito';
 
@@ -17,6 +18,7 @@ describe('Product Label Component', () => {
     await TestBed.configureTestingModule({
       declarations: [ProductLabelComponent],
       providers: [{ provide: ProductContextFacade, useFactory: () => instance(context) }],
+      imports: [TranslateModule.forRoot()],
     }).compileComponents();
   });
 

diff --git a/src/assets/i18n/de_DE.json b/src/assets/i18n/de_DE.json
@@ -874,6 +874,9 @@
   "product.itemNumber.label": "Artikelnummer:",
   "product.items.label": "{{0, plural, one{# Element} other{# Elemente}}}",
   "product.items.sorting.default.label": "Standardsortierung",
+  "product.label.new.text": "NEU",
+  "product.label.sale.text": "SALE",
+  "product.label.topseller.text": "TOP",
   "product.manufacturer_name.label": "Herstellername",
   "product.out_of_stock.text": "Nicht verfügbar",
   "product.price.listPriceFallback.text": "{{0}}",

diff --git a/src/assets/i18n/en_US.json b/src/assets/i18n/en_US.json
@@ -874,6 +874,9 @@
   "product.itemNumber.label": "Product ID:",
   "product.items.label": "{{0, plural, one{# list item} other{# list items}}}",
   "product.items.sorting.default.label": "Default Sorting",
+  "product.label.new.text": "NEW",
+  "product.label.sale.text": "SALE",
+  "product.label.topseller.text": "TOP",
   "product.manufacturer_name.label": "Manufacturer Name",
   "product.out_of_stock.text": "Out of Stock",
   "product.price.listPriceFallback.text": "{{0}}",

diff --git a/src/assets/i18n/fr_FR.json b/src/assets/i18n/fr_FR.json
@@ -874,6 +874,9 @@
   "product.itemNumber.label": "ID de produit :",
   "product.items.label": "{{0, plural, one{# article} other{# articles}}}",
   "product.items.sorting.default.label": "Tri par défaut",
+  "product.label.new.text": "NOUVEAU",
+  "product.label.sale.text": "SOLDES",
+  "product.label.topseller.text": "POPULAIRE",
   "product.manufacturer_name.label": "Nom du fabricant",
   "product.out_of_stock.text": "Stock épuisé",
   "product.price.listPriceFallback.text": "{{0}}",

diff --git a/src/assets/img/product_sprite.png b/src/assets/img/product_sprite.png
diff --git a/src/styles/pages/category/product-list.scss b/src/styles/pages/category/product-list.scss
@@ -211,19 +211,49 @@
   top: 90px;
   left: -6px;
   z-index: 10;
-  width: 82px;
-  height: 36px;
+  width: auto;
+  height: auto;
+  padding: 0 20px;
+  font-family: $font-family-condensedregular;
+  font-size: 20px;
+  color: $text-color-inverse;
+
+  &::before {
+    // CSS ribbon instead of an image
+    position: absolute;
+    bottom: -6px;
+    left: 0;
+    display: block;
+    content: '';
+    border-style: solid;
+    border-width: 6px 0 0 6px;
+  }
 
   &.product-label-new {
-    background: url('/assets/img/product_sprite.png') no-repeat -164px -73px;
+    background-color: $color-label-new;
+
+    &::before {
+      // ribbon color
+      border-color: darken($color-label-new, 20%) transparent transparent;
+    }
   }
 
   &.product-label-topseller {
-    background: url('/assets/img/product_sprite.png') no-repeat -82px -73px;
+    background-color: $color-label-topseller;
+
+    &::before {
+      // ribbon color
+      border-color: darken($color-label-topseller, 20%) transparent transparent;
+    }
   }
 
   &.product-label-sale {
-    background: url('/assets/img/product_sprite.png') no-repeat 0 -73px;
+    background-color: $color-label-sale;
+
+    &::before {
+      // ribbon color
+      border-color: darken($color-label-sale, 20%) transparent transparent;
+    }
   }
 }
 

diff --git a/src/styles/pages/productdetail/productdetail.scss b/src/styles/pages/productdetail/productdetail.scss
@@ -11,6 +11,11 @@
   .label-quantity {
     padding-top: 7px;
   }
+
+  .product-image-container {
+    // set for the correct product label ribbon positioning in the PDP only
+    position: relative;
+  }
 }
 
 .bundled-product-list,

diff --git a/src/styles/themes/b2b/variables.scss b/src/styles/themes/b2b/variables.scss
@@ -69,6 +69,11 @@ $color-special-secondary: #f39c12; //ORANGE
 $color-special-tertiary: #00abea; //BLUE
 $color-special-quaternary: #5cb85c; // GREEN
 
+// colors for product label ribbons
+$color-label-sale: #ea1919; // sale
+$color-label-topseller: #f0c; // topseller
+$color-label-new: #06f; // new
+
 //
 // BORDERS
 

diff --git a/src/styles/themes/b2c/variables.scss b/src/styles/themes/b2c/variables.scss
@@ -69,6 +69,11 @@ $color-special-secondary: #f39c12; //ORANGE
 $color-special-tertiary: #00abea; //BLUE
 $color-special-quaternary: #5cb85c; // GREEN
 
+// colors for product label ribbons
+$color-label-sale: #ea1919; // sale
+$color-label-topseller: #f0c; // topseller
+$color-label-new: #06f; // new
+
 //
 // BORDERS