Mail.ruПочтаМой МирОдноклассникиВКонтактеИгрыЗнакомстваНовостиКалендарьОблакоЗаметкиВсе проекты

Помогите сделать корзину

Никита Стороженко Ученик (216), на голосовании 1 год назад
помогите сделать корзину
Товар Цена Количество Действия
(название) -+
Итого:сумма
Голосование за лучший ответ
Данил Серебряков Знаток (271) 1 год назад
Ты можешь использовать 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. При клике на кнопку "-" товар будет удален из корзины, и итоговая сумма будет обновлена.
Саня Семенов Оракул (60497) 1 год назад
а товары откуда брать их цену ?
Похожие вопросы