Ostukorvi loendurite sisendelementide väärtuste täpne värskendamine JavaScripti If-Else avaldustes

Tõhusad JavaScripti loenduri värskendused mitme toote jaoks

JavaScripti dünaamiliste sisendelementidega töötamine võib olla keeruline, eriti kui värskendate tingimuslikult selle sees olevaid väärtusi kui-muidu avaldused. Kogusummade ja summade täpne registreerimine on ülioluline sellistes olukordades nagu kaupade lisamine veebipõhisesse ostukorvi. Siiski tekitab selles olukorras mitme asja haldamine arendajatele sageli raskusi.

See postitus käsitleb levinud probleemi, mille puhul uute asjade valimine ostukorvist põhjustab eelnevalt valitud kaupade loenduri lähtestamise. Näib, et loendurid lähtestuvad üksuste vahel teisaldamisel, kuigi alguses töötavad need korralikult. Kasutajad lähevad sellisest käitumisest segadusse, kuna mitte kõik ostukorvis olevad tooted ei vasta õigetele kogustele.

Vaatame läbi koodinäite, kus see probleem tekib, ja arutame selle põhjust. Sujuva töö tagamiseks on oluline teada, kuidas hoida iga toote loendurit kontrolli all ja tagada, et kõik sisendnumbrid jäävad samaks. Mõne näpunäidetega kui-muidu JavaScripti loogikat kasutavad avaldused saavad sellega korralikult hakkama.

Kui olete selle artikli lugemise lõpetanud, teate, kuidas probleem lahendada ja kõik loendurid säilitada, tagades, et teie ostukorvis kuvatakse alati iga kauba õige kogus, isegi kui vahetate nende vahel.

Dünaamilise ostukorvi värskendamise probleemide lahendamine JavaScriptiga

Eelnimetatud skriptid lahendavad sagedase probleemi, kui kasutate JavaScripti mitme ostukorvis oleva toote haldamiseks. Peamine probleem seisneb selles, et uue üksuse lisamine lähtestab varem lisatud üksuste loendurid. Skriptid kasutavad objektide arvude ja kogusummade salvestamiseks objektipõhist meetodit koos sündmuste kuulajatega, et seda lahendada. Garanteerime, et iga toote loendurit uuendatakse ja hoitakse teistest eraldi, ilma et neid segataks, kasutades selleks käru objektiks. See meetod kõrvaldab lähtestamise probleemi, nii et iga toote loendus jääb täpseks.

The uuendada ostukorvi Meetod, mis juhib dünaamiliselt toodete ostukorvi lisamist, on lahenduse ülioluline komponent. See funktsioon kasutab kordumatut loenduri võtit (nt "miloCounter"), et teha kindlaks, kas toode on ostukorvis. Skript initsialiseerib loenduri, kui see on esimene kord, kui üksust lisatakse. Kui ei, siis funktsioon arvutab koguhinna ümber ja suurendab praegust loendurit. The sisemine HTML atribuut värskendab HTML-i, nii et kasutaja näeb muudatusi kohe.

Iga ostukorvis oleva toote täpse kuvamise tagab renderCart funktsiooni. See kordub läbi ostukorviKaubad objekti, kontrollides, kas iga toote arv ületab nulli. Sel juhul loob funktsioon vajaliku HTML-i, et kuvada iga kauba summa ja kogumaksumus. See garanteerib, et uute toodete lisamine ei kirjuta üle vanu ja säilitab ostukorvi kuva ajakohasuse. Võrgurakendustes on see tehnika dünaamilise sisu käsitlemisel väga kasulik.

Lisaks konsool.assert kasutatakse ühikutestides, et kontrollida, kas kaubaloendurid ja kogusummad töötavad ettenähtud viisil. Klõpsates tootenuppudel ja veendudes, et eeldatavad loenduri väärtused ühtivad rakendusse salvestatud tegelike tulemustega käru objekti, need testid jäljendavad kasutaja interaktsioone. See tagab usaldusväärse arutluskäigu ja hoiab ära vead avastamata. Kõike arvesse võttes pakuvad skriptid korduvkasutatavat ja modulaarset lähenemist tootevärskenduste haldamiseks JavaScriptil töötavas ostukorvis.

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'); });

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'); });

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();

JavaScripti ostukärude oleku säilitamine ja loenduri lähtestamise vältimine

Iga üksuse oleku säilitamine ostukorvis on JavaScriptis dünaamiliste ostukorvidega töötamisel tavaline raskus, eriti kui lisatakse uusi tooteid. Probleem tekib tavaliselt siis, kui sündmuste kuulajad lähtestavad loendused toodete vahel vahetades, kuna neid ei ole iga toote jaoks õigesti salvestatud. Tõhusam meetod selle käsitlemiseks oleks globaalse objekti loomine, mis sisaldab iga ostukorvis oleva kauba olekut. Sel viisil ei muutu varasemate üksuste loendurid isegi uue üksuse klõpsamisel.

Saate lihtsalt juurde pääseda ja redigeerida iga toote kogust ja hinda ilma teiste skriptielementide sekkumiseta, salvestades need globaalsesse objekti, näiteks ostukorviKaubad. Lisaks pakub objektipõhine meetod hästi määratletud struktuuri, mis hõlbustab mitme üksuse korraga haldamist. Objekti asjakohast osa muudetakse iga kord, kui üksusel klõpsate, ja muudatused kuvatakse koheselt ostukorvi liideses.

Samuti on ülioluline veenduda, et ostukorvi iga renderdamise või värskenduse puhul kontrollitakse ja säilitatakse varasemad kauba olekud. Selle saavutamiseks renderdage ostukorvi kõige värskemate andmetega, mis on salvestatud ostukorviKaubad objektiks. See meetod tagab, et kõik ostukorvis olevad tooted kuvavad õigeid numbreid ja summasid ka pärast kaupade lisamist või eemaldamist, vältides varasemate andmete ülekirjutamise probleemi.