добавил скидки на товары
This commit is contained in:
parent
f9ce7cd511
commit
e166b0550a
18
script.js
18
script.js
@ -3,6 +3,7 @@ const products = [
|
|||||||
id: 1,
|
id: 1,
|
||||||
name: "Сумка классическая",
|
name: "Сумка классическая",
|
||||||
price: 12900,
|
price: 12900,
|
||||||
|
oldPrice: 16900,
|
||||||
desc: "Элегантная сумка из экокожи премиум класса",
|
desc: "Элегантная сумка из экокожи премиум класса",
|
||||||
image: "https://images.unsplash.com/photo-1584917865442-de89df76afd3?w=600"
|
image: "https://images.unsplash.com/photo-1584917865442-de89df76afd3?w=600"
|
||||||
},
|
},
|
||||||
@ -10,6 +11,7 @@ const products = [
|
|||||||
id: 2,
|
id: 2,
|
||||||
name: "Сумка кросс-боди",
|
name: "Сумка кросс-боди",
|
||||||
price: 8900,
|
price: 8900,
|
||||||
|
oldPrice: 11900,
|
||||||
desc: "Компактная сумка через плечо на каждый день",
|
desc: "Компактная сумка через плечо на каждый день",
|
||||||
image: "https://images.unsplash.com/photo-1548036328-c9fa89d128fa?w=600"
|
image: "https://images.unsplash.com/photo-1548036328-c9fa89d128fa?w=600"
|
||||||
},
|
},
|
||||||
@ -24,6 +26,7 @@ const products = [
|
|||||||
id: 4,
|
id: 4,
|
||||||
name: "Клатч вечерний",
|
name: "Клатч вечерний",
|
||||||
price: 6900,
|
price: 6900,
|
||||||
|
oldPrice: 9900,
|
||||||
desc: "Изысканный клатч для особых случаев",
|
desc: "Изысканный клатч для особых случаев",
|
||||||
image: "https://images.unsplash.com/photo-1566150905458-1bf1dad1f565?w=600"
|
image: "https://images.unsplash.com/photo-1566150905458-1bf1dad1f565?w=600"
|
||||||
},
|
},
|
||||||
@ -31,6 +34,7 @@ const products = [
|
|||||||
id: 5,
|
id: 5,
|
||||||
name: "Рюкзак городской",
|
name: "Рюкзак городской",
|
||||||
price: 11900,
|
price: 11900,
|
||||||
|
oldPrice: 14900,
|
||||||
desc: "Стильный рюкзак для города и путешествий",
|
desc: "Стильный рюкзак для города и путешествий",
|
||||||
image: "https://images.unsplash.com/photo-1553062407-98eeb64c6a62?w=600"
|
image: "https://images.unsplash.com/photo-1553062407-98eeb64c6a62?w=600"
|
||||||
},
|
},
|
||||||
@ -45,6 +49,7 @@ const products = [
|
|||||||
id: 7,
|
id: 7,
|
||||||
name: "Сумка седло",
|
name: "Сумка седло",
|
||||||
price: 10900,
|
price: 10900,
|
||||||
|
oldPrice: 13900,
|
||||||
desc: "Трендовая сумка в форме седла",
|
desc: "Трендовая сумка в форме седла",
|
||||||
image: "https://images.unsplash.com/photo-1575207365668-42a2021e5a6b?w=600"
|
image: "https://images.unsplash.com/photo-1575207365668-42a2021e5a6b?w=600"
|
||||||
},
|
},
|
||||||
@ -61,17 +66,24 @@ let cart = [];
|
|||||||
|
|
||||||
function renderProducts() {
|
function renderProducts() {
|
||||||
const grid = document.getElementById('productsGrid');
|
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">
|
<div class="product-card">
|
||||||
|
${discount > 0 ? '<div class="sale-badge">-' + discount + '%</div>' : ''}
|
||||||
<img src="${p.image}" alt="${p.name}" class="product-image">
|
<img src="${p.image}" alt="${p.name}" class="product-image">
|
||||||
<div class="product-info">
|
<div class="product-info">
|
||||||
<h3 class="product-name">${p.name}</h3>
|
<h3 class="product-name">${p.name}</h3>
|
||||||
<p class="product-desc">${p.desc}</p>
|
<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>
|
<button class="add-to-cart" onclick="addToCart(${p.id})">В корзину</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`).join('');
|
`;
|
||||||
|
}).join('');
|
||||||
}
|
}
|
||||||
|
|
||||||
function addToCart(id) {
|
function addToCart(id) {
|
||||||
|
|||||||
24
style.css
24
style.css
@ -163,6 +163,7 @@ section {
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
box-shadow: var(--shadow);
|
box-shadow: var(--shadow);
|
||||||
transition: transform 0.3s, box-shadow 0.3s;
|
transition: transform 0.3s, box-shadow 0.3s;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-card:hover {
|
.product-card:hover {
|
||||||
@ -170,6 +171,19 @@ section {
|
|||||||
box-shadow: 0 8px 20px rgba(0,0,0,0.12);
|
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 {
|
.product-image {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 280px;
|
height: 280px;
|
||||||
@ -200,6 +214,16 @@ section {
|
|||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: var(--primary);
|
color: var(--primary);
|
||||||
margin-bottom: 15px;
|
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 {
|
.add-to-cart {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user