From 8d45ff15d16844ba752b0208ed889b093d51d7e5 Mon Sep 17 00:00:00 2001 From: Margarita Golubeva Date: Fri, 7 Jun 2024 23:49:30 +0300 Subject: [PATCH] feat: translate breadcrumbs --- src/pages/CartPage/view/CartPageView.ts | 6 ++-- .../ProductPage/model/ProductPageModel.ts | 33 ++++++++++++------- src/pages/ProductPage/view/ProductPageView.ts | 17 ++++++++++ src/shared/utils/messageTemplates.ts | 1 + 4 files changed, 43 insertions(+), 14 deletions(-) diff --git a/src/pages/CartPage/view/CartPageView.ts b/src/pages/CartPage/view/CartPageView.ts index 153e2fac..f07b6c9a 100644 --- 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 index 152217e4..87cf8126 100644 --- 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 index b75c70c3..d47963fd 100644 --- 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 index 2ec8bead..5c83a844 100644 --- 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);