Ты можешь использовать HTML, CSS и JavaScript для создания корзины. Вот примерный код:
HTML:
<div class="cart">
<table>
<thead>
<tr>
<th>Товар</th>
<th>Цена</th>
<th>Количество</th>
<th>Действия</th>
</tr>
</thead>
<tbody id="cart-items">
<!-- Здесь будут отображаться товары -->
</tbody>
</table>
<div id="total">Итого: <span id="total-amount">0</span></div>
</div>
CSS:
.cart {
width: 100%;
}
table {
width: 100%;
}
th, td {
padding: 5px;
text-align: center;
}
#total {
text-align: right;
margin-top: 10px;
}
JavaScript:
// Предположим, у тебя есть массив товаров
const products = [
{ name: 'Товар 1', price: 10 },
{ name: 'Товар 2', price: 20 },
// Добавь остальные товары
];
// Функция для добавления товара в корзину
function addToCart(product) {
const cartItems = document.getElementById('cart-items');
const row = document.createElement('tr');
const nameCell = document.createElement('td');
nameCell.innerText =
product.name ;
const priceCell = document.createElement('td');
priceCell.innerText = product.price;
const quantityCell = document.createElement('td');
quantityCell.innerText = '1';
const actionsCell = document.createElement('td');
actionsCell.innerHTML = '<button onclick="removeFromCart(this)">-</button>';
row.appendChild(nameCell);
row.appendChild(priceCell);
row.appendChild(quantityCell);
row.appendChild(actionsCell);
cartItems.appendChild(row);
updateTotal(product.price);
}
// Функция для удаления товара из корзины
function removeFromCart(button) {
const row = button.parentNode.parentNode;
const price = parseInt(row.children[1].innerText);
row.remove();
updateTotal(-price);
}
// Функция для обновления итоговой суммы
function updateTotal(amount) {
const totalAmount = document.getElementById('total-amount');
const currentTotal = parseInt(totalAmount.innerText);
totalAmount.innerText = currentTotal + amount;
}
Добавь этот код в свою HTML-страницу и укажи свои товары в массиве products. При клике на кнопку "-" товар будет удален из корзины, и итоговая сумма будет обновлена.
Товар Цена Количество Действия
(название) -+
Итого:сумма