feat: translate breadcrumbs

stardustmeg · Jun 7, 2024 · 8d45ff1 · 8d45ff1
1 parent 8c20a56
commit 8d45ff1
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 14 deletions.
diff --git a/src/pages/CartPage/view/CartPageView.ts b/src/pages/CartPage/view/CartPageView.ts
@@ -13,7 +13,7 @@ import getStore from '@/shared/Store/Store.ts';
 import { USER_MESSAGE } from '@/shared/constants/confirmUserMessage.ts';
 import { PAGE_ID } from '@/shared/constants/pages.ts';
 import createBaseElement from '@/shared/utils/createBaseElement.ts';
-import { cartPrice } from '@/shared/utils/messageTemplates.ts';
+import { cartPrice, minusCartPrice } from '@/shared/utils/messageTemplates.ts';
 
 import styles from './cartPageView.module.scss';
 
@@ -363,7 +363,7 @@ class CartPageView {
       });
       const couponValue = createBaseElement({
         cssClasses: [styles.title],
-        innerContent: `-$ ${discount.value.toFixed(2)}`,
+        innerContent: minusCartPrice(discount.value.toFixed(2)),
         tag: 'p',
       });
       couponItem.append(couponTitle, couponValue);
@@ -374,7 +374,7 @@ class CartPageView {
       const totalDiscountWrap = createBaseElement({ cssClasses: [styles.couponWrap], tag: 'div' });
       const totalDiscountValue = createBaseElement({
         cssClasses: [styles.title, styles.totalDiscount],
-        innerContent: cartPrice(totalDiscount.toFixed(2)),
+        innerContent: minusCartPrice(totalDiscount.toFixed(2)),
         tag: 'p',
       });
       totalDiscountWrap.append(this.totalDiscountTitle, totalDiscountValue);

diff --git a/src/pages/ProductPage/model/ProductPageModel.ts b/src/pages/ProductPage/model/ProductPageModel.ts
@@ -9,7 +9,7 @@ import getStore from '@/shared/Store/Store.ts';
 import { setCurrentPage } from '@/shared/Store/actions.ts';
 import observeStore, { selectCurrentLanguage } from '@/shared/Store/observer.ts';
 import { LANGUAGE_CHOICE } from '@/shared/constants/common.ts';
-import { PAGE_ID } from '@/shared/constants/pages.ts';
+import { PAGE_ID, PAGE_TITLE } from '@/shared/constants/pages.ts';
 import { SEARCH_PARAMS_FIELD } from '@/shared/constants/product.ts';
 import * as buildPath from '@/shared/utils/buildPathname.ts';
 import { showErrorMessage } from '@/shared/utils/userMessage.ts';
@@ -18,7 +18,7 @@ import ProductInfoModel from '@/widgets/ProductInfo/model/ProductInfoModel.ts';
 import ProductPageView from '../view/ProductPageView.ts';
 
 class ProductPageModel implements Page {
-  private breadcrumbs = new BreadcrumbsModel();
+  private currentProduct: Product | null = null;
 
   private view: ProductPageView;
 
@@ -31,21 +31,21 @@ class ProductPageModel implements Page {
     const category = currentProduct.category[0].parent;
     const subcategory = currentProduct.category[0];
     const links: BreadcrumbLink[] = [
-      { link: PAGE_ID.MAIN_PAGE, name: PAGE_ID.MAIN_PAGE.toString() },
-      { link: PAGE_ID.CATALOG_PAGE, name: PAGE_ID.CATALOG_PAGE.toString() },
+      { link: PAGE_ID.MAIN_PAGE, name: PAGE_TITLE[getStore().getState().currentLanguage].main },
+      { link: PAGE_ID.CATALOG_PAGE, name: PAGE_TITLE[getStore().getState().currentLanguage].catalog },
     ];
 
     if (category) {
       links.push({
         link: buildPath.catalogPathWithIDAndQuery(null, { category: [category.id] }),
-        name: category.name[0].value,
+        name: category.name[Number(getStore().getState().currentLanguage === LANGUAGE_CHOICE.RU)].value,
       });
     }
 
     if (subcategory && category) {
       links.push({
         link: buildPath.catalogPathWithIDAndQuery(null, { category: [category.id], subcategory: [subcategory.id] }),
-        name: subcategory.name[0].value,
+        name: subcategory.name[Number(getStore().getState().currentLanguage === LANGUAGE_CHOICE.RU)].value,
       });
     }
 
@@ -59,6 +59,7 @@ class ProductPageModel implements Page {
       .getProductByKey(params.product?.id ?? '')
       .then((productData) => {
         if (productData) {
+          this.currentProduct = productData;
           const productInfo = new ProductInfoModel({
             currentSize: currentSize ?? productData.variant[0].size,
             ...productData,
@@ -77,15 +78,25 @@ class ProductPageModel implements Page {
   }
 
   private initBreadcrumbs(currentProduct: Product): void {
-    this.breadcrumbs.addBreadcrumbLinks(this.createBreadcrumbLinks(currentProduct));
-    this.getHTML().append(this.breadcrumbs.getHTML());
+    const breadcrumbs = new BreadcrumbsModel();
+    breadcrumbs.addBreadcrumbLinks(this.createBreadcrumbLinks(currentProduct));
+    const breadcrumbsContainer = this.view.getBreadcrumbsContainer();
+
+    if (breadcrumbsContainer) {
+      while (breadcrumbsContainer.firstChild) {
+        breadcrumbsContainer.removeChild(breadcrumbsContainer.firstChild);
+      }
+      breadcrumbsContainer.appendChild(breadcrumbs.getHTML());
+    }
   }
 
   private observeLanguage(fullDescription: localization[]): void {
     observeStore(selectCurrentLanguage, () => {
-      this.view.setFullDescription(
-        fullDescription[Number(getStore().getState().currentLanguage === LANGUAGE_CHOICE.RU)].value,
-      );
+      const language = getStore().getState().currentLanguage;
+      this.view.setFullDescription(fullDescription[Number(language === LANGUAGE_CHOICE.RU)].value);
+      if (this.currentProduct) {
+        this.initBreadcrumbs(this.currentProduct);
+      }
     });
   }
 

diff --git a/src/pages/ProductPage/view/ProductPageView.ts b/src/pages/ProductPage/view/ProductPageView.ts
@@ -6,6 +6,8 @@ import createBaseElement from '@/shared/utils/createBaseElement.ts';
 import styles from './productPageView.module.scss';
 
 class ProductPageView {
+  private breadcrumbsContainer: HTMLDivElement;
+
   private fullDescription: HTMLParagraphElement;
 
   private fullDescriptionWrapper: HTMLDivElement;
@@ -17,12 +19,21 @@ class ProductPageView {
   constructor(parent: HTMLDivElement) {
     this.parent = parent;
     this.parent.innerHTML = '';
+    this.breadcrumbsContainer = this.createBreadcrumbsContainer();
     this.fullDescription = this.createFullDescription();
     this.fullDescriptionWrapper = this.createFullDescriptionWrapper();
     this.page = this.createHTML();
     window.scrollTo(0, 0);
   }
 
+  private createBreadcrumbsContainer(): HTMLDivElement {
+    this.breadcrumbsContainer = createBaseElement({
+      cssClasses: [styles.breadcrumbsContainer],
+      tag: 'div',
+    });
+    return this.breadcrumbsContainer;
+  }
+
   private createFullDescription(): HTMLParagraphElement {
     this.fullDescription = createBaseElement({
       cssClasses: [styles.fullDescription],
@@ -56,11 +67,16 @@ class ProductPageView {
       tag: 'div',
     });
 
+    this.page.prepend(this.breadcrumbsContainer);
     this.parent.append(this.page);
 
     return this.page;
   }
 
+  public getBreadcrumbsContainer(): HTMLDivElement {
+    return this.breadcrumbsContainer;
+  }
+
   public getFullDescriptionWrapper(): HTMLDivElement {
     return this.fullDescriptionWrapper;
   }
@@ -74,4 +90,5 @@ class ProductPageView {
     return this.fullDescription;
   }
 }
+
 export default ProductPageView;
diff --git a/src/shared/utils/messageTemplates.ts b/src/shared/utils/messageTemplates.ts
@@ -11,6 +11,7 @@ const textTemplate = (beginning: string, variable: number | string, end?: string
 };
 
 export const cartPrice = (price: string): string => `$${price}`;
+export const minusCartPrice = (price: string): string => `-$${price}`;
 
 export const productAddedToCartMessage = (name: string): string =>
   textTemplate(name, SERVER_MESSAGE[getStore().getState().currentLanguage].SUCCESSFUL_ADD_PRODUCT_TO_CART);