добавил скидки на товары

This commit is contained in:
Katubaeva 2026-08-28 09:54:31 +00:00
parent f9ce7cd511
commit e166b0550a
2 changed files with 39 additions and 3 deletions

View File

@ -3,6 +3,7 @@ const products = [
id: 1,
name: "Сумка классическая",
price: 12900,
oldPrice: 16900,
desc: "Элегантная сумка из экокожи премиум класса",
image: "https://images.unsplash.com/photo-1584917865442-de89df76afd3?w=600"
},
@ -10,6 +11,7 @@ const products = [
id: 2,
name: "Сумка кросс-боди",
price: 8900,
oldPrice: 11900,
desc: "Компактная сумка через плечо на каждый день",
image: "https://images.unsplash.com/photo-1548036328-c9fa89d128fa?w=600"
},
@ -24,6 +26,7 @@ const products = [
id: 4,
name: "Клатч вечерний",
price: 6900,
oldPrice: 9900,
desc: "Изысканный клатч для особых случаев",
image: "https://images.unsplash.com/photo-1566150905458-1bf1dad1f565?w=600"
},
@ -31,6 +34,7 @@ const products = [
id: 5,
name: "Рюкзак городской",
price: 11900,
oldPrice: 14900,
desc: "Стильный рюкзак для города и путешествий",
image: "https://images.unsplash.com/photo-1553062407-98eeb64c6a62?w=600"
},
@ -45,6 +49,7 @@ const products = [
id: 7,
name: "Сумка седло",
price: 10900,
oldPrice: 13900,
desc: "Трендовая сумка в форме седла",
image: "https://images.unsplash.com/photo-1575207365668-42a2021e5a6b?w=600"
},
@ -61,17 +66,24 @@ let cart = [];
function renderProducts() {
const grid = document.getElementById('productsGrid');
grid.innerHTML = products.map(p => `
grid.innerHTML = products.map(p => {
const discount = p.oldPrice ? Math.round((1 - p.price / p.oldPrice) * 100) : 0;
return `
<div class="product-card">
${discount > 0 ? '<div class="sale-badge">-' + discount + '%</div>' : ''}
<img src="${p.image}" alt="${p.name}" class="product-image">
<div class="product-info">
<h3 class="product-name">${p.name}</h3>
<p class="product-desc">${p.desc}</p>
<div class="product-price">${p.price.toLocaleString()} ₸</div>
<div class="product-price">
${p.oldPrice ? '<span class="old-price">' + p.oldPrice.toLocaleString() + ' ₸</span> ' : ''}
${p.price.toLocaleString()} ₸
</div>
<button class="add-to-cart" onclick="addToCart(${p.id})">В корзину</button>
</div>
</div>
`).join('');
`;
}).join('');
}
function addToCart(id) {

View File

@ -163,6 +163,7 @@ section {
overflow: hidden;
box-shadow: var(--shadow);
transition: transform 0.3s, box-shadow 0.3s;
position: relative;
}
.product-card:hover {
@ -170,6 +171,19 @@ section {
box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
.sale-badge {
position: absolute;
top: 12px;
left: 12px;
background: #e74c3c;
color: var(--white);
padding: 6px 12px;
border-radius: 20px;
font-weight: 700;
font-size: 14px;
z-index: 10;
}
.product-image {
width: 100%;
height: 280px;
@ -200,6 +214,16 @@ section {
font-weight: 700;
color: var(--primary);
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 10px;
}
.old-price {
text-decoration: line-through;
color: var(--text-light);
font-size: 16px;
font-weight: 400;
}
.add-to-cart {