updated carousel view

src/app/components/items-carousel/items-carousel.component.html

@@ -7,7 +7,7 @@
     } @else if (products().length > 0) {
         <p-carousel 
             [value]="products()" 
-            [numVisible]="4" 
+            [numVisible]="6" 
             [numScroll]="1" 
             [circular]="true" 
             [responsiveOptions]="responsiveOptions" 
@@ -32,21 +32,26 @@
                                 <span class="rating-count">({{ product.callbacks?.length || 0 }})</span>
                             </div>
                             
-                            <div class="item-price">
+                            <div class="item-price-row">
-                                @if (product.discount > 0) {
+                                <div class="item-price">
-                                    <span class="original-price">{{ product.price }} {{ product.currency }}</span>
+                                    @if (product.discount > 0) {
-                                    <span class="discounted-price">{{ getDiscountedPrice(product) | number:'1.0-0' }} {{ product.currency }}</span>
+                                        <span class="original-price">{{ product.price }} {{ product.currency }}</span>
-                                } @else {
+                                        <span class="discounted-price">{{ getDiscountedPrice(product) | number:'1.0-0' }} {{ product.currency }}</span>
-                                    <span class="current-price">{{ product.price }} {{ product.currency }}</span>
+                                    } @else {
-                                }
+                                        <span class="current-price">{{ product.price }} {{ product.currency }}</span>
+                                    }
+                                </div>
+                                <button class="cart-icon-btn" (click)="addToCart($event, product)" title="Добавить в корзину">
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                        <circle cx="9" cy="21" r="1"></circle>
+                                        <circle cx="20" cy="21" r="1"></circle>
+                                        <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
+                                    </svg>
+                                </button>
                             </div>
                         </div>
                     </a>
 
-                    <button class="add-to-cart-btn" (click)="addToCart(product)">
-                        В корзину
-                    </button>
-
                 </div>
             </ng-template>
             <ul class="p-carousel-indicator-list" data-pc-section="indicatorlist"><li class="p-carousel-indicator" data-p-active="false" data-pc-section="indicator"><button type="button" class="p-carousel-indicator-button" tabindex="-1" aria-label="1" data-pc-section="indicatorbutton"></button></li><li class="p-carousel-indicator" data-p-active="false" data-pc-section="indicator"><button type="button" class="p-carousel-indicator-button" tabindex="-1" aria-label="2" data-pc-section="indicatorbutton"></button></li><li class="p-carousel-indicator" data-p-active="false" data-pc-section="indicator"><button type="button" class="p-carousel-indicator-button" tabindex="-1" aria-label="3" data-pc-section="indicatorbutton"></button></li><li class="p-carousel-indicator" data-p-active="false" data-pc-section="indicator"><button type="button" class="p-carousel-indicator-button" tabindex="-1" aria-label="4" data-pc-section="indicatorbutton"></button></li><li class="p-carousel-indicator" data-p-active="false" data-pc-section="indicator"><button type="button" class="p-carousel-indicator-button" tabindex="-1" aria-label="5" data-pc-section="indicatorbutton"></button></li><li class="p-carousel-indicator" data-p-active="false" data-pc-section="indicator"><button type="button" class="p-carousel-indicator-button" tabindex="-1" aria-label="6" data-pc-section="indicatorbutton"></button></li><li class="p-carousel-indicator p-carousel-indicator-active" data-p-active="true" data-pc-section="indicator"><button type="button" class="p-carousel-indicator-button" tabindex="0" aria-label="7" aria-current="page" data-pc-section="indicatorbutton"></button></li><!----></ul>

src/app/components/items-carousel/items-carousel.component.scss

@@ -156,7 +156,7 @@
 .item-image {
   position: relative;
   width: 100%;
-  height: 125px;
+  height: 140px;
   overflow: hidden;
   background: #f5f5f5;
   
@@ -188,15 +188,15 @@
 
 
 .item-details {
-  padding: 0.75rem;
+  padding: 0.625rem;
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.375rem;
   flex: 1;
 }
 
 .item-name {
-  font-size: 0.875rem;
+  font-size: 0.8125rem;
   font-weight: 600;
   margin: 0;
   line-height: 1.3;
@@ -230,15 +230,23 @@
   }
 }
 
+.item-price-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
 .item-price {
   display: flex;
   align-items: baseline;
   gap: 0.375rem;
   flex-wrap: wrap;
+  flex: 1;
 
   .current-price,
   .discounted-price {
-    font-size: 1rem;
+    font-size: 0.9375rem;
     font-weight: 700;
     color: #1a1a1a;
   }
@@ -248,33 +256,36 @@
   }
 
   .original-price {
-    font-size: 0.875rem;
+    font-size: 0.8125rem;
     color: #9ca3af;
     text-decoration: line-through;
   }
 }
 
-
+.cart-icon-btn {
-
+  padding: 0.5rem;
-.add-to-cart-btn {
-  width: 100%;
-  padding: 0.625rem 1rem;
   background: var(--primary-color, #5568d3);
   color: white;
   border: none;
-  border-radius: 0 0 12px 12px;
+  border-radius: 8px;
-  font-size: 0.875rem;
-  font-weight: 600;
   cursor: pointer;
   transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  
+  svg {
+    display: block;
+  }
 
   &:hover {
     background: var(--primary-hover, #4456b3);
+    transform: scale(1.05);
   }
 
   &:active {
-  &:active {
+    transform: scale(0.95);
-    transform: scale(0.98);
   }
 }
 
@@ -302,7 +313,7 @@
     border: 1px solid #e5e5e5;
   }
 
-  .add-to-cart-btn {
+  .cart-icon-btn {
     background: var(--primary-color, #5568d3);
 
     &:hover {
@@ -342,105 +353,3 @@
     }
   }
 }
-
-  .carousel-title {
-    font-size: 1.5rem;
-    margin-bottom: 1.5rem;
-  }
-
-  .carousel-track {
-    gap: 1rem;
-  }
-
-  .carousel-item {
-    flex: 0 0 calc(50% - 0.5rem);
-  }
-
-  .item-image {
-    height: 200px;
-  }
-
-  .item-name {
-    font-size: 1rem;
-  }
-
-  .item-price {
-    .price-current,
-    .price-discount {
-      font-size: 1.25rem;
-    }
-  }
-
-  .btn-add-cart {
-    width: 44px;
-    height: 44px;
-
-    svg {
-      width: 18px;
-      height: 18px;
-    }
-  }
-
-  .carousel-btn {
-    width: 40px;
-    height: 40px;
-  }
-
-  .carousel-wrapper {
-    gap: 1rem;
-  }
-}
-
-@media (max-width: 640px) {
-  .items-carousel {
-    padding: 1rem 0;
-  }
-
-  .carousel-container {
-    padding: 0 0.5rem;
-  }
-
-  .carousel-title {
-    font-size: 1.25rem;
-    margin-bottom: 1rem;
-  }
-
-  .carousel-track {
-    gap: 0.75rem;
-  }
-
-  .carousel-item {
-    flex: 0 0 100%;
-  }
-
-  .item-image {
-    height: 220px;
-  }
-
-  .carousel-wrapper {
-    gap: 0.5rem;
-  }
-
-  .carousel-btn {
-    width: 36px;
-    height: 36px;
-
-    svg {
-      width: 20px;
-      height: 20px;
-    }
-  }
-
-  .item-info {
-    padding: 1rem;
-  }
-
-  .btn-add-cart {
-    width: 40px;
-    height: 40px;
-  }
-
-  .carousel-indicators {
-    margin-top: 1.5rem;
-  }
-}

src/app/components/items-carousel/items-carousel.component.ts

@@ -41,7 +41,7 @@ export class ItemsCarouselComponent implements OnInit {
         this.responsiveOptions = [
             {
                 breakpoint: '1400px',
-                numVisible: 3,
+                numVisible: 5,
                 numScroll: 1
             },
             {
@@ -49,6 +49,11 @@ export class ItemsCarouselComponent implements OnInit {
                 numVisible: 4,
                 numScroll: 1
             },
+            {
+                breakpoint: '991px',
+                numVisible: 3,
+                numScroll: 1
+            },
             {
                 breakpoint: '767px',
                 numVisible: 2,
@@ -102,7 +107,9 @@ export class ItemsCarouselComponent implements OnInit {
         return item.price;
     }
 
-    addToCart(item: Item): void {
+    addToCart(event: Event, item: Item): void {
+        event.preventDefault();
+        event.stopPropagation();
         this.cartService.addItem(item.itemID, 1);
     }
 }

tsconfig.app.json

@@ -4,6 +4,7 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/app",
+    "rootDir": "./src",
     "types": []
   },
   "include": [