refactor(RSS-ECOMM-5_17): display product slider on product page and modal

src/entities/ProductCard/model/ProductCardModel.ts

@@ -65,6 +65,7 @@ class ProductCardModel {
       event.preventDefault();
       const path = buildPath.productPathWithIDAndQuery(this.params.key, {
         size: [this.currentSize ?? this.params.variant[0].size],
+        slide: [RouterModel.getSearchParams().get(SEARCH_PARAMS_FIELD.SLIDE) ?? '1'],
       });
       RouterModel.getInstance().navigateTo(path);
     });

src/entities/ProductCard/view/productCardView.module.scss

@@ -92,10 +92,10 @@
 
   @media (hover: hover) {
     &:hover {
-      outline: calc(var(--one) * 1.5) solid var(--steam-green-400);
+      outline: calc(var(--one) * 1.5) solid var(--steam-green-1200);
 
       svg {
-        fill: var(--steam-green-400);
+        fill: var(--steam-green-1200);
       }
     }
   }

src/entities/ProductModalSlider/view/ProductModalSliderView.ts

@@ -38,7 +38,7 @@ class ProductModalSliderView {
 
   private createHTML(): HTMLDivElement {
     this.view = createBaseElement({
-      cssClasses: [styles.modalSlidersWrapper],
+      cssClasses: [styles.modalSliderWrapper],
       tag: 'div',
     });
 

src/entities/ProductModalSlider/view/productModalSliderView.module.scss

@@ -11,6 +11,7 @@
 }
 
 .modalSliderWrapper {
+  position: relative;
   height: auto;
   min-height: 40rem;
 
@@ -67,12 +68,11 @@
 
 .navigationWrapper {
   position: absolute;
-  left: -3.5rem;
-  right: -3.5rem;
   top: 50%;
   z-index: 1;
   display: flex;
   justify-content: space-between;
+  width: 100%;
   transform: translateY(-50%);
 }
 

src/entities/ProductPrice/view/productPriceView.scss

@@ -41,6 +41,9 @@
     @media (max-width: 768px) {
       align-items: center;
       justify-content: center;
+      justify-self: end;
+      grid-row: 1;
+      width: max-content;
     }
   }
 }

src/features/CountryChoice/view/countryChoiceView.module.scss

@@ -94,7 +94,7 @@
     visibility 0.2s;
 
   &::-webkit-scrollbar {
-    width: 8px;
+    width: var(--five);
   }
 
   &::-webkit-scrollbar-track {

src/features/ProductFilters/view/ProductFiltersView.ts

@@ -452,7 +452,16 @@ class ProductFiltersView {
 
     this.sizesList = filtersList;
 
-    this.params?.sizes?.forEach((size) => {
+    const sortedSizes = this.params?.sizes?.sort((a, b) => {
+      const lastA = a.size.at(-1);
+      const lastB = b.size.at(-1);
+      if (lastA && lastB) {
+        return lastB.localeCompare(lastA, LANGUAGE_CHOICE.EN, { numeric: true, sensitivity: 'base' });
+      }
+      return 0;
+    });
+
+    sortedSizes?.forEach((size) => {
       const li = createBaseElement({
         cssClasses: [styles.sizeItem],
         tag: 'li',

src/features/WishlistButton/view/wishlistButtonView.module.scss

@@ -12,8 +12,12 @@
   svg {
     width: var(--extra-small-offset);
     height: var(--extra-small-offset);
-    fill: var(--noble-gray-800);
-    transition: fill 0.2s;
+    fill: transparent;
+    stroke: var(--noble-gray-700);
+    stroke-width: 4.5px;
+    transition:
+      fill 0.2s,
+      stroke 0.2s;
   }
 
   &:active {
@@ -22,10 +26,11 @@
 
   @media (hover: hover) {
     &:hover {
-      outline: calc(var(--one) * 1.5) solid var(--steam-green-800);
+      outline: calc(var(--one) * 1.5) solid var(--steam-green-1200);
 
       svg {
-        fill: var(--steam-green-800);
+        fill: var(--steam-green-1200);
+        stroke: var(--steam-green-1200);
       }
     }
   }
@@ -36,17 +41,19 @@
         outline: calc(var(--one) * 1.5) solid var(--noble-gray-700);
 
         svg {
-          fill: var(--noble-gray-700);
+          fill: transparent;
+          stroke: var(--noble-gray-700);
         }
       }
     }
   }
 }
 
 .inWishList {
-  outline: calc(var(--one) * 1.5) solid var(--steam-green-800);
+  outline: calc(var(--one) * 1.5) solid var(--steam-green-1200);
 
   svg {
-    fill: var(--steam-green-800);
+    fill: var(--steam-green-1200);
+    stroke: var(--steam-green-1200);
   }
 }

src/pages/ProductPage/model/ProductPageModel.ts

@@ -44,14 +44,14 @@ class ProductPageModel implements Page {
 
     if (category) {
       links.push({
-        link: buildPath.catalogPathWithIDAndQuery(null, { category: [category.id] }),
+        link: buildPath.catalogPathWithQuery({ category: [category.id] }),
         name: category.name[Number(isRuLanguage)].value,
       });
     }
 
     if (subcategory && category) {
       links.push({
-        link: buildPath.catalogPathWithIDAndQuery(null, { category: [category.id], subcategory: [subcategory.id] }),
+        link: buildPath.catalogPathWithQuery({ subcategory: [subcategory.id] }),
         name: subcategory.name[Number(isRuLanguage)].value,
       });
     }

src/pages/ProductPage/view/productPageView.module.scss

@@ -25,6 +25,11 @@
   line-height: 170%;
   letter-spacing: var(--one);
   color: var(--steam-green-400);
+
+  @media (max-width: 768px) {
+    margin: 0 auto;
+    width: 95%;
+  }
 }
 
 .fullDescription {

src/pages/WishlistPage/view/WishlistPageView.ts

@@ -2,6 +2,7 @@ import type { OptionsRequest, ProductWithCount } from '@/shared/API/types/type.t
 import type { Cart } from '@/shared/types/cart.ts';
 import type { ShoppingList } from '@/shared/types/shopping-list';
 
+import RouterModel from '@/app/Router/model/RouterModel.ts';
 import ProductCardModel from '@/entities/ProductCard/model/ProductCardModel.ts';
 import getCartModel from '@/shared/API/cart/model/CartModel.ts';
 import getProductModel from '@/shared/API/product/model/ProductModel.ts';
@@ -27,6 +28,8 @@ class WishlistPageView {
 
   private parent: HTMLDivElement;
 
+  private productCards: ProductCardModel[] = [];
+
   private wishlist: HTMLUListElement;
 
   constructor(parent: HTMLDivElement) {
@@ -80,11 +83,19 @@ class WishlistPageView {
     shoppingList.products.forEach((product) => {
       const currentProduct = products.products.find((item) => item.id === product.productId);
       if (currentProduct) {
-        this.wishlist.append(new ProductCardModel(currentProduct, null, cart).getHTML());
+        const productCard = new ProductCardModel(currentProduct, null, cart);
+        this.productCards.push(productCard);
+        this.wishlist.append(productCard.getHTML());
       }
     });
   }
 
+  private openProductInfo(): void {
+    if (RouterModel.getPageID()) {
+      this.productCards.find((productCard) => productCard.getKey() === RouterModel.getPageID())?.openProductInfoModal();
+    }
+  }
+
   public async drawWishlist(): Promise<void> {
     this.wishlist.innerHTML = '';
     const loader = new LoaderModel(LOADER_SIZE.EXTRA_LARGE);
@@ -106,6 +117,7 @@ class WishlistPageView {
     const products = await getProductModel().getProducts(options);
     loader.getHTML().remove();
     this.drawWishlistItems(shoppingList, cart, products);
+    this.openProductInfo();
     this.switchEmptyList(!shoppingList.products.length);
   }
 

src/shared/Modal/view/modalView.module.scss

@@ -41,9 +41,11 @@
   position: absolute;
   left: 50%;
   top: 50%;
+  overflow: hidden scroll;
   border: var(--two) solid var(--noble-black-500);
   border-radius: var(--border-radius);
   max-width: 95%;
+  max-height: 80vh;
   font: var(--small-font);
   letter-spacing: var(--one);
   color: var(--steam-green-500);
@@ -59,6 +61,20 @@
     opacity: 0;
     visibility: hidden;
   }
+
+  &::-webkit-scrollbar {
+    width: var(--five);
+  }
+
+  &::-webkit-scrollbar-track {
+    background: var(--white-tr);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: var(--small-br);
+    background-color: var(--steam-green-800);
+    cursor: pointer;
+  }
 }
 
 .stopScroll {

src/shared/utils/buildPathname.ts

@@ -7,6 +7,7 @@ type QueryParamsType = {
 type BuildQuery = (queryParams: QueryParamsType | null) => string;
 
 type BuildPathWithID = (endpoint: null | string, id: null | string) => string;
+type BuildPathWithQuery = (endpoint: null | string, queryParams: QueryParamsType | null) => string;
 type BuildPathWithIDAndQuery = (
   endpoint: null | string,
   id: null | string,
@@ -35,6 +36,11 @@ export const buildQuery: BuildQuery = (queryParams) => {
   return queryString ? `?${queryString}` : '';
 };
 
+export const buildPathWithQuery: BuildPathWithQuery = (endpoint, queryParams = null) => {
+  const queryPart = buildQuery(queryParams);
+  return `${endpoint}${queryPart}`;
+};
+
 export const buildPathWithIDAndQuery: BuildPathWithIDAndQuery = (endpoint, id = null, queryParams = null) => {
   const pathWithID = buildPathWithID(endpoint, id);
   const queryPart = buildQuery(queryParams);
@@ -58,6 +64,12 @@ export const productPathWithID = buildPathWithID.bind(null, PAGE_ID.PRODUCT_PAGE
 export const wishlistPathWithID = buildPathWithID.bind(null, PAGE_ID.WISHLIST_PAGE);
 export const cartPathWithID = buildPathWithID.bind(null, PAGE_ID.CART_PAGE);
 
+export const mainPathWithQuery = buildPathWithQuery.bind(null, PAGE_ID.MAIN_PAGE);
+export const catalogPathWithQuery = buildPathWithQuery.bind(null, PAGE_ID.CATALOG_PAGE);
+export const productPathWithQuery = buildPathWithQuery.bind(null, PAGE_ID.PRODUCT_PAGE);
+export const wishlistPathWithQuery = buildPathWithQuery.bind(null, PAGE_ID.WISHLIST_PAGE);
+export const cartPathWithQuery = buildPathWithQuery.bind(null, PAGE_ID.CART_PAGE);
+
 export const mainPathWithIDAndQuery = buildPathWithIDAndQuery.bind(null, PAGE_ID.MAIN_PAGE);
 export const catalogPathWithIDAndQuery = buildPathWithIDAndQuery.bind(null, PAGE_ID.CATALOG_PAGE);
 export const productPathWithIDAndQuery = buildPathWithIDAndQuery.bind(null, PAGE_ID.PRODUCT_PAGE);

src/widgets/Footer/model/FooterModel.ts

@@ -92,7 +92,7 @@ function generateRandomCategoryLink(categoriesArr: Category[]): Link[] {
     const category = subCategory[randomIndex];
     subCategory.splice(randomIndex, 1);
     result.push({
-      href: buildPath.catalogPathWithIDAndQuery(null, { subcategory: [category.id] }),
+      href: buildPath.catalogPathWithQuery({ subcategory: [category.id] }),
       name: {
         en: category.name[0].value,
         ru: category.name[1].value,