عايز اعدل الكود دة ليتم عمل عملية حسابية للكمية فى سعرالوجبةو اضافة خانة لتحديد الكمية من الاصناف الاضافية ثم حساب اجمالى تكلفة الوجبة مع الاصناف المضافة
<!DOCTYPE html>
<html>
<head>
<style>
.card {
width: 100%;
max-width: 200px;
height: auto;
border: 1px solid #000;
margin: 10px;
padding: 10px;
background-color: #ffffff;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
display: inline-block;
transition: transform 0.5s;
cursor: pointer;
}
.card:hover {
transform: scale(1.05);
}
.image {
width: 100%;
height: auto;
background-color: lightyellow;
}
.name {
margin-top: 10px;
font-weight: bold;
}
.quantity-input {
margin-top: 10px;
}
.add-to-cart {
margin-top: 10px;
background-color: green;
color: white;
padding: 5px 10px;
border: none;
cursor: pointer;
}
.cart {
margin-top: 20px;
background-color: lightblue;
padding: 10px;
}
.delete-item {
color: red;
cursor: pointer;
}
.whatsapp-button {
margin-top: 20px;
background-color: blue;
color: white;
padding: 5px 10px;
border: none;
cursor: pointer;
}
@media screen and (min-width: 768px) {
.card {
width: 200px;
}
}
/* تكبير النمط */
.checkbox {
transform: scale(1.5);
}
/* تظليل الشيك بوكس */
.checkbox input[type="checkbox"] {
box-shadow: 0 0 5px #888888;
}
<!-- استخدام الشيك بوكس --> <div class="checkbox"> <input type="checkbox"> </div>
</style>
</head>
<body>
<div id="cards-container">
<div class="">
<img src="meal1.jpg" alt="وجبة 1">
<h3></h3> </div>
<div class="card">
<img src="https://eldahan.com.eg/wp-content/uploads/2021/03/%D9%88%D8%AC%D8%A8%D8%A9-%D9%85%D9%8A%D9%83%D8%B3-%D8%AC%D8%B1%D8%A8%D9%84-1.png" alt="وجبة ميكس">
<h3>وجبة ميكس</h3>
<p1> 120السعر</p1>
<h5>ارز-سلطة-طحينة </h5>
<p>الكمية:
<input type="number" value="1">
</p>
<input type="checkbox" id="بطاطس" name="اضافات[]" value="بطاطس,10">
<label for="بطاطس">بطاطس (10 جنية)</label>
<br>
<input type="checkbox" id="مشروبات" name="اضافات[]" value="مشروبات,(10 جنية)">
<label for="بطاطس">مشروبات (10 جنية)</label>
<br>
<button class="button" onclick="addToCart(' وجبة ميكس')">إضافة إلى العربة</button>
</div>
<div class="card">
<img src="https://eldahan.com.eg/wp-content/uploads/2021/03/%D9%88%D8%AC%D8%A8%D8%A9-%D9%81%D8%B1%D8%A7%D8%AE-%D9%85%D8%B9-%D8%B4%D9%8A%D8%B4.png" alt="وجبة 1">
<h3>وجبة 1</h3>
<p>الكمية:
<input type="number" value="1">
</p>
<input type="checkbox" id="بطاطس" name="اضافات[]" value="بطاطس,10">
<label for="بطاطس">ااااااس</label>
<br>
<input type="checkbox" id="مشروبات" name="اضافات[]" value="مشروبات,20جنية">
<label for="مشروبات">مشروبات</label>
<br>
<button class="button" onclick="addToCart('وجبة 1')">إضافة إلى العربة</button>
</div>
<div class="card">
<img src="meal1.jpg" alt="وجبة 1">
<h3>وجبة 1</h3>
<p>الكمية:
<input type="number" value="1">
</p>
<input type="checkbox" id="بطاطس" name="اضافات[]" value="بطاطس,10">
<label for="بطاطس">ااااااس</label>
<br>
<input type="checkbox" id="مشروبات" name="اضافات[]" value="مشروبات,10">
<label for="مشروبات">مشروبات</label>
<br>
<button class="button" onclick="addToCart('وجبة 1')">إضافة إلى العربة</button>
</div>
<div class="cart">
<h2>سلة المشتريات</h2>
<div id="cart-items"></div>
<button class="button" onclick="sendCartToWhatsApp()">إرسال الطلب عبر الواتساب</button>
</div>
<script>
var cartItems = [];
function addToCart(itemName) {
var price = parseInt(document.querySelector('p1').innerHTML);
var text = document.querySelector('h5').innerText;
var quantity = parseInt(document.querySelector('input[type="number"]').value);
var extras = [];
var extrascheckboxes = document.querySelectorAll('input[name="اضافات[]"]:checked');
var extras = [];
var totalPrice = 0;
var totalQuantity = 0;
extrascheckboxes.forEach(function(checkbox) {
extras.push(checkbox.value);
totalPrice += parseFloat(checkbox.dataset.price);
totalQuantity += parseFloat(checkbox.dataset.quantity);
});
console.log('إجمالي السعر:', totalPrice);
console.log('إجمالي الكمية:', totalQuantity);
console.log('الإضافات:', extras);
var item = {
name: itemName,
text: text,
price: price,
quantity: quantity,
extras: extras
};
cartItems.push(item);
updateCart();
}
function removeFromCart(index) {
cartItems.splice(index, 1);
updateCart();
}
function calculateTotal() {
var total = 0;
var cards = document.getElementsByClassName("card");
for (var i = 0; i < cards.length; i++) {
var quantity = parseInt(cards[i].querySelector("input[type=number]").value);
var price = parseFloat(cards[i].querySelector(".price").textContent.replace("سعر الوجبة: ", ""));
// تحقق مما إذا كان صنف فرعي محدد واحتسب سعره إذا لزم الأمر
total += (price * quantity);
}
document.getElementById("cart").textContent = "اجمالي السعر: " + total + " ريال";
}
var quantityInputs = document.querySelectorAll("input[type=number]");
for (var i = 0; i < quantityInputs.length; i++) {
quantityInputs[i].addEventListener("input", calculateTotal);
}
function updateCart() {
var cartItemsHTML = '';
cartItems.forEach(function(item, index) {
cartItemsHTML += '<div class="cart-item">' + '<h4>' + item.name + '</h4>' + '<p1>السعر: ' + item.price + '</p1>' + '<h5>المكونات: ' + item.text + '</h5>' + '<p>الكمية: ' + item.quantity + '</p>' + '<p>الإضافات: ' + item.extras.join(', ') + '</p>' + '<button class="button" onclick="removeFromCart(' + index + ')">حذف</button>' + '</div>';
});
document.getElementById('cart-items').innerHTML = cartItemsHTML;
}
function sendCartToWhatsApp() {
var message = 'الطلبات: \n\n';
cartItems.forEach(function(item) {
message += 'وجبة: ' + item.name + '\n';
message += 'السعر: ' + item.price + '\n';
message += 'المكونات: ' + item.text + '\n';
message += 'الكمية: ' + item.quantity + '\n';
message += 'الإضافات: ' + item.extras.join(', ') + '\n\n';
});
var phoneNumber = '0123456789'; // رقم الهاتف المحدد
// يمكنك تعديل الرسالة ورقم الهاتف حسب الاحتياجات الخاصة بك
window.open('https://api.whatsapp.com/send?phone=' + 0201061710999 + '&text=' + encodeURIComponent(message));
}
</script>
</body>
</html>
نفس الكود فى ملف واحد عايز حضرتك تغير الكود بنفس الخطوات ال حضرتك ذكرتها فى التعليق السابق انا بعمل تحرير للكود على الموقع دة https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_icon_bar_h لما بعدل حجات فية مش بيرسل البطاقات للعربة لو ممكن حضرتك ضرورى تعدل الكود دة وانا تحت امرك
