sdarbinyan/marketplaces
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated carousel view

Browse Source
This commit is contained in:
sdarbinyan
2026-01-18 19:44:46 +04:00
parent bd80896886
commit 49d19181df
5 changed files with 825 additions and 1470 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2107
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

29
src/app/components/items-carousel/items-carousel.component.html
View File

@@ -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">
@if (product.discount > 0) {
<span class="original-price">{{ product.price }} {{ product.currency }}</span>
<span class="discounted-price">{{ getDiscountedPrice(product) | number:'1.0-0' }} {{ product.currency }}</span>
} @else {
<span class="current-price">{{ product.price }} {{ product.currency }}</span>
}
<div class="item-price-row">
<div class="item-price">
@if (product.discount > 0) {
<span class="original-price">{{ product.price }} {{ product.currency }}</span>
<span class="discounted-price">{{ getDiscountedPrice(product) | number:'1.0-0' }} {{ 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>

147
src/app/components/items-carousel/items-carousel.component.scss
View File

@@ -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;
}
}
.add-to-cart-btn {
width: 100%;
padding: 0.625rem 1rem;
.cart-icon-btn {
padding: 0.5rem;
background: var(--primary-color, #5568d3);
color: white;
border: none;
border-radius: 0 0 12px 12px;
font-size: 0.875rem;
font-weight: 600;
border-radius: 8px;
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.98);
transform: scale(0.95);
}
}
@@ -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;
}
}

11
src/app/components/items-carousel/items-carousel.component.ts
View File

@@ -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);
}
}

1
tsconfig.app.json
View File

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