Skip to content

Commit 2d10cca

Browse files
Taha-M-FawyTaha-M-Fawy
committed
add checkout and cart
1 parent 3928e45 commit 2d10cca

File tree

15 files changed

+1030
-40
lines changed

15 files changed

+1030
-40
lines changed

‎404.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@
5757
</div>
5858

5959
<div class="person">
60-
<a href="../editProfilePage/EditProfilePage.html"><img src="./image/MR.png"></a>
60+
<a href="../editProfilePage/EditProfilePage.html"><img src="../image/MR.png"></a>
6161
<p id="login-message"></p>
6262
</div>
6363
</form>

‎Cart/cart.Js‎

Lines changed: 213 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,213 @@
1+
// // دالة لعرض محتويات العربة من التخزين المحلي
2+
3+
// function renderCart() {
4+
// const cart = JSON.parse(localStorage.getItem('cart')) || [];
5+
// const cartContainer = document.getElementById('cart-container');
6+
7+
// if (cart.length === 0) {
8+
// cartContainer.innerHTML = '<p>Your cart is empty</p>';
9+
// } else {
10+
// let total = 0; // Variable to store the total amount
11+
// cartContainer.innerHTML = cart.map(item => {
12+
// const itemTotal = item.price * item.quantity; // Calculate each item's price
13+
// total += itemTotal; // Add each item's price to the total
14+
15+
// return `
16+
// <div class="cart-item">
17+
// <img src="${item.image}" alt="${item.name}">
18+
// <div class="cart-item-info">
19+
// <p>${item.name}</p>
20+
// <div class="quantity-control">
21+
// <button onclick="updateCartQuantity(${item.id}, -1)">-</button>
22+
// <input type="number" id="quantity-${item.id}" value="${item.quantity}" min="1" style="width: 50px; text-align: center;" />
23+
// <button onclick="updateCartQuantity(${item.id}, 1)">+</button>
24+
// </div>
25+
// <p class="price">Price: $${itemTotal.toFixed(2)}</p> <!-- Display each item's price -->
26+
// </div>
27+
// <button onclick="removeFromCart(${item.id})">Delete</button>
28+
// </div>
29+
// `;
30+
// }).join('');
31+
32+
// // Add total amount display
33+
// cartContainer.innerHTML += `<h4>Total: $${total.toFixed(2)}</h4>`; // Display the total
34+
// }
35+
// }
36+
37+
// function updateCartQuantity(productId, change) {
38+
// const cart = JSON.parse(localStorage.getItem('cart')) || [];
39+
// const foundItem = cart.find(item => item.id === productId);
40+
// const quantityInput = document.getElementById(`quantity-${productId}`);
41+
// let currentQuantity = parseInt(quantityInput.value) || 1;
42+
43+
// // تحديث الكمية بناءً على التغيير
44+
// currentQuantity += change;
45+
46+
// // التأكد من أن الكمية لا تقل عن 1
47+
// if (currentQuantity < 1) {
48+
// currentQuantity = 1;
49+
// }
50+
51+
// // تعيين الكمية الجديدة في حقل الإدخال
52+
// quantityInput.value = currentQuantity;
53+
54+
// // تحديث الكمية في العربة
55+
// if (foundItem) {
56+
// foundItem.quantity = currentQuantity;
57+
// }
58+
59+
// // حفظ العربة المحدثة في التخزين المحلي
60+
// localStorage.setItem('cart', JSON.stringify(cart));
61+
62+
// // تحديث عرض العربة
63+
// renderCart();
64+
65+
// }
66+
67+
// // دالة لإزالة منتج من العربة
68+
// function removeFromCart(productId) {
69+
// const cart = JSON.parse(localStorage.getItem('cart')) || [];
70+
// const updatedCart = cart.filter(item => item.id !== productId);
71+
72+
// localStorage.setItem('cart', JSON.stringify(updatedCart));
73+
// renderCart(); // تحديث عرض العربة
74+
// }
75+
76+
// // دالة لتفريغ العربة
77+
// function clearCart() {
78+
// localStorage.removeItem('cart');
79+
// renderCart();
80+
// }
81+
82+
// // عرض محتويات العربة عند تحميل الصفحة
83+
// document.addEventListener('DOMContentLoaded', renderCart);
84+
85+
//---------------------------------------------------------------------------->
86+
// دالة لعرض محتويات العربة من التخزين المحلي
87+
function renderCart() {
88+
const cart = JSON.parse(localStorage.getItem("cart")) || []; // استرجاع بيانات العربة
89+
const cartContainer = document.getElementById("cart-container"); // العنصر الذي يحتوي على العربة
90+
91+
if (cart.length === 0) {
92+
cartContainer.innerHTML = "<p style='color:#db4444'>Your cart is empty</p>"; // عرض رسالة إذا كانت العربة فارغة
93+
} else {
94+
let total = 0; // متغير لحساب المجموع النهائي
95+
cartContainer.innerHTML = cart
96+
.map((item) => {
97+
const itemTotal = item.price * item.quantity; // حساب السعر لكل عنصر
98+
total += itemTotal; // إضافة سعر كل عنصر إلى الإجمالي
99+
100+
return `
101+
<div class="cart-item">
102+
<img src="${item.image}" alt="${
103+
item.name
104+
}"> <!-- عرض صورة المنتج -->
105+
<div class="cart-item-info">
106+
<p>${item.name}</p> <!-- اسم المنتج -->
107+
<div class="quantity-control">
108+
<button onclick="updateCartQuantity(${
109+
item.id
110+
}, -1)">-</button> <!-- زر لتقليل الكمية -->
111+
<input type="number" id="quantity-${
112+
item.id
113+
}" value="${
114+
item.quantity
115+
}" min="1" style="width: 50px; text-align: center;" />
116+
<button onclick="updateCartQuantity(${
117+
item.id
118+
}, 1)">+</button> <!-- زر لزيادة الكمية -->
119+
</div>
120+
<p class="price">Price: $${itemTotal.toFixed(
121+
2
122+
)}</p> <!-- عرض السعر لكل عنصر -->
123+
</div>
124+
<button onclick="removeFromCart(${
125+
item.id
126+
})">Delete</button> <!-- زر لحذف المنتج من العربة -->
127+
</div>
128+
`;
129+
})
130+
.join("");
131+
132+
// عرض المجموع النهائي
133+
cartContainer.innerHTML += `<h4>Total: $${total.toFixed(2)}</h4>`; // عرض الإجمالي
134+
}
135+
}
136+
137+
// دالة لتحديث كمية المنتجات في العربة
138+
function updateCartQuantity(productId, change) {
139+
const cart = JSON.parse(localStorage.getItem("cart")) || []; // استرجاع العربة
140+
const foundItem = cart.find((item) => item.id === productId); // البحث عن المنتج في العربة
141+
const quantityInput = document.getElementById(`quantity-${productId}`);
142+
let currentQuantity = parseInt(quantityInput.value) || 1;
143+
144+
// تحديث الكمية بناءً على التغيير
145+
currentQuantity += change;
146+
147+
// التأكد من أن الكمية لا تقل عن 1
148+
if (currentQuantity < 1) {
149+
currentQuantity = 1;
150+
}
151+
152+
// تعيين الكمية الجديدة في حقل الإدخال
153+
quantityInput.value = currentQuantity;
154+
155+
// تحديث الكمية في العربة
156+
if (foundItem) {
157+
foundItem.quantity = currentQuantity;
158+
}
159+
160+
// حفظ العربة المحدثة في التخزين المحلي
161+
localStorage.setItem("cart", JSON.stringify(cart));
162+
163+
// تحديث عرض العربة
164+
renderCart();
165+
}
166+
167+
168+
// دالة لإزالة منتج من العربة
169+
function removeFromCart(productId) {
170+
const cart = JSON.parse(localStorage.getItem("cart")) || []; // استرجاع العربة
171+
const updatedCart = cart.filter((item) => item.id !== productId); // إزالة المنتج من العربة
172+
173+
localStorage.setItem("cart", JSON.stringify(updatedCart)); // حفظ العربة المحدثة
174+
renderCart(); // تحديث عرض العربة
175+
}
176+
177+
// دالة لتفريغ العربة
178+
function clearCart() {
179+
localStorage.removeItem("cart");
180+
renderCart();
181+
}
182+
183+
// عرض محتويات العربة عند تحميل الصفحة
184+
document.addEventListener("DOMContentLoaded", renderCart); // عرض العربة عند تحميل الصفحة
185+
186+
//---------------------------------------------------------------------------->
187+
188+
// store data-->check out
189+
190+
191+
const cartItems = document.querySelectorAll(".cart-item");
192+
let checkoutData = [];
193+
194+
cartItems.forEach((item) => {
195+
const productImage = item.querySelector(".product-image").src;
196+
const productName = item.querySelector(".product-name").textContent;
197+
const productPrice = item.querySelector(".product-price").dataset.price;
198+
199+
checkoutData.push({
200+
image: productImage,
201+
name: productName,
202+
price: productPrice,
203+
});
204+
});
205+
206+
localStorage.setItem("checkoutData", JSON.stringify(checkoutData));
207+
208+
//open checkout_page
209+
document.getElementById("checkout-btn").addEventListener("click", () => {
210+
window.location.href = "../checkout+order/checkoutpage/checkout.html";
211+
});
212+
213+

‎Cart/cart.css‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
2+
body {
3+
font-family: "Inter", sans-serif;
4+
5+
6+
}
7+
8+
.cart {
9+
padding: 40px 0;
10+
}
11+
.cart-head {
12+
display: flex;
13+
justify-content: space-evenly;
14+
margin-bottom: 40px;
15+
align-items: center;
16+
17+
}
18+
.cart-head h2 {
19+
color: #db4444;
20+
21+
}
22+
23+
/* h1 {
24+
text-align: center;
25+
color: #333;
26+
} */
27+
28+
#cart-container {
29+
display: flex;
30+
flex-direction: column;
31+
gap: 20px;
32+
margin: 0 auto;
33+
max-width: 800px;
34+
background-color: #fff;
35+
padding: 20px;
36+
border-radius: 8px;
37+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
38+
}
39+
40+
.cart-item {
41+
display: flex;
42+
justify-content: space-between;
43+
align-items: center;
44+
background-color: #fafafa;
45+
padding: 10px;
46+
border: 1px solid #ddd;
47+
border-radius: 5px;
48+
}
49+
@media (max-width:767px) {
50+
.cart-item {
51+
flex-direction: column;
52+
justify-content: center;
53+
align-items: center;
54+
text-align: center;
55+
}
56+
}
57+
.cart-item img {
58+
width: 80px;
59+
height: 80px;
60+
object-fit: cover;
61+
border-radius: 5px;
62+
margin-right: 20px;
63+
}
64+
65+
.cart-item-info {
66+
flex: 1;
67+
margin-left: 20px;
68+
}
69+
70+
.cart-item-info p {
71+
margin: 10px 0;
72+
color: #555;
73+
}
74+
75+
.cart-item p .price {
76+
font-weight: bold;
77+
color: #333;
78+
}
79+
80+
.cart-item button {
81+
background-color: #db4444;
82+
color: white;
83+
border: none;
84+
padding: 5px 10px;
85+
border-radius: 5px;
86+
cursor: pointer;
87+
transition: background-color 0.3s ease;
88+
text-align: center;
89+
}
90+
91+
.cart-item button:hover {
92+
background-color: #db4444;
93+
}
94+
95+
#clear-cart-btn {
96+
background-color: #db4444;
97+
color: white;
98+
border: 1px solid #db4444;
99+
padding: 10px 15px;
100+
border-radius: 5px;
101+
transition: 0.3s;
102+
}
103+
#clear-cart-btn:hover {
104+
background-color: white;
105+
color: #db4444;
106+
107+
}
108+
109+
button {
110+
background-color: #db4444;
111+
color: white;
112+
border: none;
113+
padding: 10px;
114+
cursor: pointer;
115+
margin-left:50px;
116+
}
117+
118+
button:hover {
119+
background-color:#db4444 ;
120+
}
121+
122+
.Checkout-div {
123+
display: flex;
124+
justify-content: center;
125+
align-items: center;
126+
}
127+
.Checkout-div #checkout-btn {
128+
width: 30%;
129+
margin-top: 30px;
130+
border-radius: 5px;
131+
}

0 commit comments

Comments
 (0)