Vytvorenie nákupného košíka s vanilkovým JavaScriptom

Vyskúšajte Náš Nástroj Na Odstránenie Problémov

Prostredníctvom tejto témy chcem pomôcť všetkým ľuďom, ktorí môžu mať iba juniorský vývojár JavaScriptu, k dispozícii dobrý dokument na priblíženie sa k veľmi fascinujúcemu a trendovému programovaciemu jazyku. Teraz začnime.

Predtým, ako začneme kódovať, mali by sme si trocha rozobrať, prečo musíme používať Vanilla Javascript? Prečo nepoužívame prominentný rámec ako Reactjs alebo Angular, aby náš zdrojový kód vyzeral tak pekne?

Skript Reason is Vanilla so mnou je predchodcom každého rámca používajúceho javascript. Takže keď sme skutočne majstrom Vanilla Javascriptu, môžeme veľmi ľahko porozumieť štruktúre moderného rámca a je to dobrý spôsob, ako sa pomocou Javascriptu priblížiť rýchlejšie a hlbšie a ľahko rozšíriť svoje znalosti o tomto v budúcnosti.



Prejdeme k kódovaniu

kde kúpiť dobrý token

Štruktúra projektu nákupného košíka

Pomocou programu Vanilla Script nasmerujeme odkaz CSS a Javascript do súboru index.html.

Tu môžete uložiť a skopírovať zdrojový kód HTML a CSS: https://github.com/vckhanhitiu1/ShoppingCartWithVanillaJavascript

keď spustíme index.html v prehliadači, vidíme naše rozhranie ako na obrázku nižšie a nemôžeme nič ovplyvňovať pomocou tlačidiel webových stránok

Cieľom tejto praxe je, aby sme kliknutím na ikonu nižšie pridali nový kurz do nášho zoznamového košíka.

Teraz sa presunieme do súboru app.js a začneme kódovať

const courses = document.querySelector('#courses-list'), shoppingCartContent = document.querySelector('#cart-content tbody')

Vo vyššie uvedenom kóde inicializujeme 2 kurzy s konštantnou hodnotou a shoppingCartContent. Ich účelom je získať prvok, ktorý má zoznam id = courses-list

Získajte Element have id je zoznam kurzov

python korytnačka kód drak

a ďalší prvok get tbody v tabuľke má id je card-content

Získať prvok tbody v tabuľke má ID je obsah karty

Ďalšie , napíšeme hlavnú funkciu, ktorá bude spustená pri načítaní prehliadača -> hovoríme jej meno je poslucháč

loadEventListeners(); function loadEventListeners(){ //when new course is added courses.addEventListener('click', buyCourse); function buyCourse(e){ if(e.target.classList.contains('add-to-cart')){ //read the course value const course = e.target.parentElement.parentElement; getCourseInfo(course); } }}

Účelom vyššie uvedeného kódu je, keď klikneme na tlačidlo, ktoré použijeme *e.target.classList.contains („add-to-cart“) *na nájdenie tlačidla Pridať do košíka

keď klikneme na tlačidlo Pridať do košíka, zavoláme funkciu getCourseInfo ()

function getCourseInfo(course) { //create an Object with course data const courseInfo = { image: course.querySelector('img').src, title: course.querySelector('h4').textContent, price: course.querySelector('.price span').textContent, id: course.querySelector('a').getAttribute('data-id') } addToCart(courseInfo); } function addToCart(course){ const row = document.createElement('tr'); row.innerHTML = ` ${course.title} ${course.price} X ` ; shoppingCartContent.appendChild(row); }

Vo funkcii getCourseInfo (kurz) je hodnota kurzu alebo v tomto prípade ide o prvok košíka, ktorý sme už získali kliknutím na tlačidlo Pridať do košíka

hladný medveď krypto cena

Nová hodnota courseInfo preformátuje hodnotu prvku kurzu

Ľahko môžeme konzolovým protokolom zobraziť hodnotu JSON courseInfo

Potom môžeme túto funkciu zavolať pridať do košíka a preneste súbor courseInfo hodnotu do tejto funkcie a pridajte nové informácie o kurze do nášho košíka.

Teraz prejdeme k addToCart (závod)

V tomto kurze použijeme document.createElement (‘tr’) na vytvorenie prvku v našom strome DOM a potom použijeme funkciu appendChild () na pridanie prvku do tabuľky tela obsahu karty.

Takže konečný výsledok, keď použijeme JavaScript v našom kóde, je, keď klikneme na tlačidlo Pridať do košíka

A klikneme na ikonu nákupu a vidíme výsledok

Kurzy je možné pridať potom, čo zvládneme tlačidlo kliknutia v jazyku Javascript.

kód philo.com/roku

Rovnakým spôsobom ako pri pridávaní nového kurzu online môžeme implementovať odstránenie vybraného online kurzu kliknutím na červené tlačidlo a vymazanie košíka kliknutím na tlačidlo VYMAZAŤ KOŠÍK podľa nasledujúceho kódu

shoppingCartContent = document.querySelector('#cart-content tbody'), clearCartBtn = document.querySelector('#clear-cart'); loadEventListeners(); function loadEventListeners(){ //when new course is added courses.addEventListener('click', buyCourse); shoppingCartContent.addEventListener('click', removeCourse); clearCartBtn.addEventListener('click', clearCart); } function removeCourse(e){ if(e.target.classList.contains('remove')){ e.target.parentElement.parentElement.remove(); } } function clearCart(){ console.log(shoppingCartContent.firstChild) while(shoppingCartContent.firstChild){ shoppingCartContent.removeChild(shoppingCartContent.firstChild); } }

Takže všetko k tejto téme. Dúfam, že sa z môjho zdieľania môžete naučiť niečo nové. Bavte sa a pokračujte v učení!

#javascript #vývoj webových aplikácií

medium.com

Vytvorenie nákupného košíka s vanilkovým JavaScriptom

V tomto článku sa naučíte precvičovať programovanie nákupného košíka pomocou JavaScriptu.

Pozri Tiež:

Nové Položky

Najpritibilnejšie

Redakcia Choice