добавил скидки на товары
This commit is contained in:
parent
f9ce7cd511
commit
e166b0550a
18
script.js
18
script.js
@ -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) {
|
||||
|
||||
24
style.css
24
style.css
@ -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 {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user