Rol Ian نشر 29 أكتوبر 2023 أرسل تقرير مشاركة نشر 29 أكتوبر 2023 let carts=document.querySelectorAll('.add-cart'); let products = [ { name: 'هدية 1', tag:'هدية 1 ', price: 100, inCart:0 }, { name: 'هدية 2', tag:'هدية 2 ' , price: 200, inCart:0 }, { name: 'مزهرية 1', tag:'مزهرية 1 ' , price: 100, inCart:0 }, { name: 'هدية 3', tag:'هدية 3 ' , price: 250, inCart:0 } ]; for (let i=0; i<carts.length;i++){ carts[i].addEventListener('click',()=>{ cartNumbers(products[i]); total(products[i]) }) } function onloadCartNumbers(){ let productNumbers=localStorage.getItem('cartNumbers'); if(productNumbers) { document.querySelector('.cart').textContent = productNumbers ; } } function cartNumbers(product) { let productNumbers=localStorage.getItem('cartNumbers'); productNumbers=parseInt(productNumbers); if(productNumbers){ localStorage.setItem('cartNumbers',productNumbers + 1); document.querySelector('.cart').textContent=productNumbers + 1; }else{ localStorage.setItem('cartNumbers',1); document.querySelector('.cart').textContent=1; } setItems(product); } function setItems(product){ let cartItems = localStorage.getItem('productsInCart'); cartItems = JSON.parse(cartItems); if(cartItems != null){ if(cartItems[product.tag] == undefined) { cartItems ={ ... cartItems, [product.tag]:product } } cartItems[product.tag].inCart += 1; } else { product.inCart = 1; cartItems ={ [product.tag]: product } } localStorage.setItem("product.inCart", JSON.stringify(cartItems)); } function total(product){ let cartCost = localStorage.getItem('total') ; console.log("My cartcost is", cartCost ); console.log(typeof cartCost ); if(cartCost != null){ cartCost = parseInt(cartCost); localStorage.setItem("total",cartCost + product.price); } else { localStorage.setItem("total", product.price); } } function displayCart(){ let cartItems = localStorage.getItem("productsInCart"); cartItems = JSON.parse(cartItems); let productContainer = document.querySelector(".products"); let cartCost = document.querySelector('total'); console.log(cartItems); if (cartItems && productContainer) { productContainer.innerHTML = ''; Object.values(cartItems).map(item => { productContainer.innerHTML += <div class="products"> <img src="image/remove.png"> <img src="image/${item.tag}.png"> </div> <div class="price">${item.price}</div> <div class="quantity"> <img src="image/plus.png"> <span>${item.inCart}</span> <img src="image/mins.png"> </div> <div class="price-total"> ${item.price * item.inCart} </div> ; }); productContainer.innerHTML +=' <div class="bask"> <h4 class="baskTitle"> baskTitle </h4> <h4 class="baskTotal"> ${cartCost} </h4> '; } } onloadCartNumbers(); displayCart(); اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Mustafa Suleiman نشر 29 أكتوبر 2023 أرسل تقرير مشاركة نشر 29 أكتوبر 2023 عليك أن تستخدم علامات الاقتباس (single or double quotes) للسلاسل النصية داخل دوال displayCart() و productContainer.innerHTML كالتالي: productContainer.innerHTML += ` <div class="products"> <img src="image/remove.png"> <img src="image/${item.tag}.png"> </div> <div class="price">${item.price}</div> <div class="quantity"> <img src="image/plus.png"> <span>${item.inCart}</span> <img src="image/mins.png"> </div> <div class="price-total"> ${item.price * item.inCart} </div> `; productContainer.innerHTML += ` <div class="bask"> <h4 class="baskTitle"> baskTitle </h4> <h4 class="baskTotal"> ${cartCost} </h4> </div> `; أيضًا في دالة setItems(), يجب تصحيح هذا السطر: localStorage.setItem("product.inCart", JSON.stringify(cartItems)); إلى: localStorage.setItem("productsInCart", JSON.stringify(cartItems)); وفي دالة displayCart(), صحح هذا السطر: let cartCost = document.querySelector('total'); إلى: let cartCost = document.querySelector('.baskTotal'); اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عمر قره محمد نشر 29 أكتوبر 2023 أرسل تقرير مشاركة نشر 29 أكتوبر 2023 ماهي النتيجة التي تتوقعها ؟ اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Rol Ian نشر 29 أكتوبر 2023 الكاتب أرسل تقرير مشاركة نشر 29 أكتوبر 2023 أن يقوم بإضافة المنتجات من صفحة المنتجات إلى صفحة السلة ولكن ذلك لايعمل اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
Rol Ian
رابط هذا التعليق
شارك على الشبكات الإجتماعية
3 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.