التحديث الدقيق لقيم عناصر الإدخال لعدادات سلة التسوق في عبارات JavaScript If-Else

التعامل مع عدادات المنتجات الديناميكية في عربة تسوق JavaScript

استخدام JavaScript الأساسي لتحديثات سلة التسوق الديناميكية

var milo = document.getElementById('milo');
var ovaltine = document.getElementById('ovaltine');
var bournvita = document.getElementById('bournvita');
var miloPrice = 2000.00, miloCounter = 0, miloAmount = 0;
var ovaltinePrice = 1500.00, ovaltineCounter = 0, ovaltineAmount = 0;
var bournvitaPrice = 1850.00, bournvitaCounter = 0, bournvitaAmount = 0;

var cart = {}; // Object to store counters for each item

function updateCart(item, price, counterKey) {
    if (!cart[counterKey]) { cart[counterKey] = 1; } 
    else { cart[counterKey] += 1; }
    var total = cart[counterKey] * price;
    document.getElementById('cartdetails').innerHTML +=
    '<tr><td>' + cart[counterKey] + '</td><td>' + total + '</td></tr>';
}

milo.addEventListener('click', function() { updateCart('milo', miloPrice, 'miloCounter'); });
ovaltine.addEventListener('click', function() { updateCart('ovaltine', ovaltinePrice, 'ovaltineCounter'); });
bournvita.addEventListener('click', function() { updateCart('bournvita', bournvitaPrice, 'bournvitaCounter'); });

التعامل مع تحديثات عناصر سلة التسوق باستخدام كائنات JavaScript

استخدام JavaScript مع إدارة الحالة القائمة على الكائنات

var cartItems = {
    'milo': { price: 2000, count: 0, total: 0 },
    'ovaltine': { price: 1500, count: 0, total: 0 },
    'bournvita': { price: 1850, count: 0, total: 0 }
};

function updateCartItem(item) {
    cartItems[item].count += 1;
    cartItems[item].total = cartItems[item].count * cartItems[item].price;
    renderCart();
}

function renderCart() {
    var cartHTML = '';
    for (var item in cartItems) {
        if (cartItems[item].count > 0) {
            cartHTML += '<tr><td>' + cartItems[item].count + '</td><td>' + cartItems[item].total + '</td></tr>';
        }
    }
    document.getElementById('cartdetails').innerHTML = cartHTML;
}

document.getElementById('milo').addEventListener('click', function() { updateCartItem('milo'); });
document.getElementById('ovaltine').addEventListener('click', function() { updateCartItem('ovaltine'); });
document.getElementById('bournvita').addEventListener('click', function() { updateCartItem('bournvita'); });

اختبار الوحدة لوظيفة عداد عربة التسوق في JavaScript

استخدام وظائف JavaScript البسيطة مع حالات الاختبار

function testCartCounter() {
    var testCart = { 'milo': 0, 'ovaltine': 0, 'bournvita': 0 };
    function clickProduct(item) { testCart[item] += 1; }
    clickProduct('milo');
    clickProduct('ovaltine');
    console.assert(testCart['milo'] === 1, 'Milo should have 1 count');
    console.assert(testCart['ovaltine'] === 1, 'Ovaltine should have 1 count');
    clickProduct('milo');
    console.assert(testCart['milo'] === 2, 'Milo should have 2 counts');
    console.log('All tests passed');
}

testCartCounter();

الأسئلة المتداولة حول منطق سلة التسوق في جافا سكريبت

1. كيف يمكنني إيقاف العدادات من البدء من جديد عندما أقوم بنقل الأشياء؟
2. لتجنب إعادة تعيين العداد، يمكنك تسجيل الإجماليات والكميات لكل عنصر على حدة باستخدام كائن عام مثل cartItems.
3. عندما أقوم بإضافة عنصر جديد إلى سلة التسوق الخاصة بي، لماذا يتم استبدال الإدخالات السابقة؟
4. يحدث هذا كنتيجة لاستبدال الكود برمز HTML الأصلي لسلة التسوق. لتصحيح ذلك، قم بإرفاق عناصر جديدة باستخدام innerHTML += دون إزالة الموجودة.
5. ما هي أفضل طريقة لتحديث سلة التسوق ديناميكيًا؟
6. للتأكد من أن سلة التسوق محدثة دائمًا ببيانات JavaScript، استخدم وظيفة مثل renderCart الذي يتكرر خلال جميع عناصر سلة التسوق ويغير العرض.
7. كيف يمكنني التحقق من أن العدادات الخاصة بي تعمل بشكل صحيح؟
8. للمساعدة في تحديد المشكلات، استخدم console.assert للتحقق من أن أعداد سلة التسوق الخاصة بك تظهر القيم الصحيحة بعد كل تفاعل.
9. هل من الممكن تطبيق نفس الكود على منتجات مختلفة؟
10. نعم، يمكنك التعامل مع المنطق الخاص بأي عدد من السلع بأقل قدر من التغييرات عن طريق تعديل الكود واستخدام وظائف مثل updateCart.

الأفكار النهائية حول منع إعادة تعيين العدادات في JavaScript

يكمن سر الحفاظ على حالة عربة التسوق الديناميكية سليمة في حفظ معلومات خاصة بالعنصر، مثل الإجماليات والعدادات، في كائن ما. تتأكد هذه التقنية من احتفاظ العناصر السابقة بقيمها الدقيقة حتى عند طرح منتجات جديدة. يتم تجنب مشكلة إعادة تعيين العدادات إلى واحدة.

تم تحسين تجربة المستخدم بشكل أكبر من خلال عرض سلة التسوق ديناميكيًا باستخدام البيانات المخزنة. باستخدام هذه الطريقة، تصبح سلة التسوق أكثر استجابة وتفاعلية، ويتم تحديث أسعار المنتجات وكمياتها لتعكس تفاعلات المستخدم الحالية.