Tikslus pirkinių krepšelio skaitiklių įvesties elementų verčių atnaujinimas „JavaScript If-Else“ teiginiuose

Veiksmingi „JavaScript“ skaitiklio atnaujinimai keliems produktams

Gali būti sudėtinga dirbti su „JavaScript“ dinaminiais įvesties elementais, ypač kai sąlygiškai atnaujinate reikšmes viduje jei-kitaip pareiškimus. Tiksliai įrašyti bendras sumas ir sumas labai svarbu tokiose situacijose, kaip prekių įtraukimas į internetinį pirkinių krepšelį. Tačiau kelių dalykų valdymas šioje situacijoje kūrėjams dažnai sukelia sunkumų.

Šiame įraše bus aptarta paplitusi problema, kai pasirinkus naujus daiktus pirkinių krepšelyje iš naujo nustatomas anksčiau pasirinktų prekių skaitiklis. Atrodo, kad perkeliant elementus skaitikliai nustatomi iš naujo, nors iš pradžių jie veikia tinkamai. Naudotojus glumina toks elgesys, nes ne visi krepšelyje esantys produktai atitinka tinkamus kiekius.

Peržiūrėsime kodo pavyzdį, kuriame iškyla ši problema, ir aptarsime priežastį. Norint sklandžiai veikti, labai svarbu žinoti, kaip kontroliuoti kiekvieno gaminio skaitiklį ir užtikrinti, kad visi įvesties skaičiai išliks pastovūs. Su keliais pataisymais, jei-kitaip „JavaScript“ logiką naudojantys teiginiai gali tai tinkamai tvarkyti.

Kai baigsite skaityti šį straipsnį, žinosite, kaip išspręsti problemą ir išsaugoti visus skaitiklius, taip užtikrindami, kad jūsų pirkinių krepšelyje visada būtų rodoma teisinga kiekvienos prekės suma, net kai pereisite tarp jų.

Dinaminio krepšelio atnaujinimo problemų sprendimas naudojant „JavaScript“.

Pirmiau minėti scenarijai išsprendžia dažną problemą, kai naudojate „JavaScript“ kelių prekių krepšelyje tvarkyti. Pagrindinė problema yra ta, kad pridėjus naują elementą iš naujo nustatomi anksčiau pridėtų elementų skaitikliai. Scenarijuose naudojamas objektas pagrįstas metodas elementų skaičiams ir sumoms saugoti kartu su įvykių klausytojais, kad tai išspręstų. Garantuojame, kad kiekvieno gaminio skaitiklis yra atnaujinamas ir prižiūrimas atskirai nuo kitų, jiems netrukdant naudojant krepšelis objektas. Šis metodas pašalina iš naujo nustatymo problemą, kad kiekvieno produkto skaičius išliktų tikslus.

The atnaujinti krepšelį Metodas, kuris valdo dinamišką produktų įtraukimą į krepšelį, yra esminis sprendimo komponentas. Ši funkcija naudoja unikalų skaitiklio raktą (pvz., „miloCounter“), kad nustatytų, ar prekė yra krepšelyje. Scenarijus inicijuoja skaitiklį, jei elementas pridedamas pirmą kartą. Jei ne, funkcija perskaičiuoja bendrą kainą ir padidina dabartinį skaitiklį. The vidinis HTML atributas atnaujina HTML, kad vartotojas iškart matytų pakeitimus.

Tikslų kiekvienos krepšelyje esančios prekės pateikimą garantuoja renderCart funkcija. Jis kartojasi per krepšelisPrekės objektą, patikrindami, ar kiekvieno produkto skaičius viršija nulį. Tokiu atveju funkcija sukuria reikiamą HTML, kad būtų rodoma kiekvienos prekės suma ir bendra kaina. Tai garantuoja, kad įtraukus naujus produktus nebus perrašomi senieji ir išsaugoma krepšelio rodymo srovė. Internetinėse programose ši technika labai naudinga tvarkant dinaminį turinį.

Be to, konsolė.tvirtinti naudojamas vienetų testuose, siekiant patikrinti, ar prekių skaitikliai ir sumos veikia taip, kaip numatyta. Spustelėję gaminio mygtukus ir įsitikinę, kad laukiamos skaitiklio reikšmės sutampa su faktiniais rezultatais, išsaugotais krepšelis objektas, šie testai imituoja vartotojo sąveiką. Tai garantuoja patikimą samprotavimą ir neleidžia nepastebėti klaidų. Atsižvelgiant į viską, scenarijai suteikia daugkartinį ir modulinį požiūrį į produktų naujinimų valdymą pirkinių krepšelyje, kuriame veikia „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'); });

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

Būsenos palaikymas ir skaitiklio atstatymo prevencija „JavaScript“ pirkinių krepšeliuose

Kiekvienos krepšelyje esančios prekės būsenos išlaikymas yra dažnas sunkumas dirbant su dinaminiais pirkinių krepšeliais JavaScript, ypač kai pridedami nauji produktai. Problema dažniausiai kyla, kai įvykių klausytojai iš naujo nustato skaičiavimus, kai perjungia produktus, nes jie nėra tinkamai saugomi arba saugomi kiekvienam produktui. Sukurti visuotinį objektą, kuriame būtų kiekvienos krepšelyje esančios prekės būsena, būtų efektyvesnis būdas tai tvarkyti. Tokiu būdu ankstesnių elementų skaitikliai nesikeičia net spustelėjus naują elementą.

Galite tiesiog pasiekti ir redaguoti kiekvieno produkto kiekį ir kainą be kitų scenarijaus elementų trukdžių, išsaugodami juos visuotiniame objekte, pvz., krepšelisPrekės. Be to, objektas pagrįstas metodas siūlo gerai apibrėžtą struktūrą, kuri palengvina kelių elementų valdymą vienu metu. Atitinkama objekto dalis keičiama kiekvieną kartą spustelėjus prekę, o modifikacijos akimirksniu parodomos pirkinių krepšelio sąsajoje.

Taip pat labai svarbu įsitikinti, kad ankstesnės prekių būsenos yra patikrintos ir palaikomos kiekvieną kartą pateikiant ar atnaujinant krepšelį. Norėdami tai padaryti, pateikite krepšelį naudodami naujausius duomenis, saugomus krepšelisPrekės objektas. Šis metodas garantuoja, kad visos krepšelyje esančios prekės rodo teisingus skaičius ir sumas net ir pridėjus ar pašalinus prekes, išvengiant ankstesnių duomenų perrašymo problemos.