Creating a Shopping Cart using only HTML JavaScript

Question

I m not sure what to do in order to complete this project   I need to create a shopping cart that uses only one HTML page   I have the table set up showing what is being sold but where I am lost is the JavaScript   I don t know how to link the  Add to Cart  button with all the necessary data  The name  description  and price  to be able to add it to the cart   I don t need to be able to remove it from the cart  but it does need to show the total   After searching online for a few answers  I ve tried some things but just cannot figure it out    Any help is definitely appreciated because I am completely lost at this point and am new to JavaScript in general   This is the jsFiddle but that was a little confusing to me  because it s working differently on there than if I just went to Run in Notepad     jsFiddle  http   jsfiddle net renavi ATjvt 5   function AddtoCart       console log  hi      var x   document getElementById  Items      var new row   x rows 1  cloneNode true     var len   x rows length    new row cells 0  innerHTML   len    var inp1   new row cells 1  getElementsByTagName  input   0     inp1 id    len    inp1 value         var inp2   new row cells 2  getElementsByTagName  input   0     inp2 id    len    inp2 value         x appendChild new row       The direct file is here  Pastebin  http   pastebin com sutGWjSY

User · Answer

You simply need to use simpleCart  It is a free and open-source javascript shopping cart that easily integrates with your current website   You will get the full source code at github

User · Answer

Here s a one page cart written in Javascript with localStorage  Here s a full working pen  Previously found on Codebox cart js var cart           A  PROPERTIES   hPdt   null     HTML products list   hItems   null     HTML current cart   items          Current items in cart        B  LOCALSTORAGE CART       B1  SAVE CURRENT CART INTO LOCALSTORAGE   save   function          localStorage setItem  quot cart quot   JSON stringify cart items                B2  LOAD CART FROM LOCALSTORAGE   load   function          cart items   localStorage getItem  quot cart quot        if  cart items    null    cart items             else   cart items   JSON parse cart items                 B3  EMPTY ENTIRE CART   nuke   function          if  confirm  quot Empty cart  quot            cart items             localStorage removeItem  quot cart quot          cart list                      C  INITIALIZE   init   function              C1  GET HTML ELEMENTS     cart hPdt   document getElementById  quot cart-products quot        cart hItems   document getElementById  quot cart-items quot             C2  DRAW PRODUCTS LIST     cart hPdt innerHTML    quot  quot       let p  item  part      for  let id in products             WRAPPER       p   products id         item   document createElement  quot div quot          item className    quot p-item quot         cart hPdt appendChild item             PRODUCT IMAGE       part   document createElement  quot img quot          part src    quot images  quot   p img        part className    quot p-img quot         item appendChild part             PRODUCT NAME       part   document createElement  quot div quot          part innerHTML   p name        part className    quot p-name quot         item appendChild part             PRODUCT DESCRIPTION       part   document createElement  quot div quot          part innerHTML   p desc        part className    quot p-desc quot         item appendChild part             PRODUCT PRICE       part   document createElement  quot div quot          part innerHTML    quot   quot    p price        part className    quot p-price quot         item appendChild part             ADD TO CART       part   document createElement  quot input quot          part type    quot button quot         part value    quot Add to Cart quot         part className    quot cart p-add quot         part onclick   cart add        part dataset id   id        item appendChild part                  C3  LOAD CART FROM PREVIOUS SESSION     cart load             C4  LIST CURRENT CART ITEMS     cart list                D  LIST CURRENT CART ITEMS  IN HTML    list   function              D1  RESET     cart hItems innerHTML    quot  quot       let item  part  pdt      let empty   true      for  let key in cart items          if cart items hasOwnProperty key     empty   false  break                   D2  CART IS EMPTY     if  empty          item   document createElement  quot div quot          item innerHTML    quot Cart is empty quot         cart hItems appendChild item                  D3  CART IS NOT EMPTY - LIST ITEMS     else         let p  total   0  subtotal   0        for  let id in cart items               ITEM         p   products id           item   document createElement  quot div quot            item className    quot c-item quot           cart hItems appendChild item               NAME         part   document createElement  quot div quot            part innerHTML   p name          part className    quot c-name quot           item appendChild part               REMOVE         part   document createElement  quot input quot            part type    quot button quot           part value    quot X quot           part dataset id   id          part className    quot c-del cart quot           part addEventListener  quot click quot   cart remove           item appendChild part               QUANTITY         part   document createElement  quot input quot            part type    quot number quot           part value   cart items id           part dataset id   id          part className    quot c-qty quot           part addEventListener  quot change quot   cart change           item appendChild part               SUBTOTAL         subtotal   cart items id    p price          total    subtotal                    EMPTY BUTTONS       item   document createElement  quot input quot          item type    quot button quot         item value    quot Empty quot         item addEventListener  quot click quot   cart nuke         item className    quot c-empty cart quot         cart hItems appendChild item             CHECKOUT BUTTONS       item   document createElement  quot input quot          item type    quot button quot         item value    quot Checkout -  quot     quot   quot    total        item addEventListener  quot click quot   cart checkout         item className    quot c-checkout cart quot         cart hItems appendChild item                     E  ADD ITEM INTO CART   add   function          if  cart items this dataset id     undefined          cart items this dataset id    1        else         cart items this dataset id               cart save        cart list                F  CHANGE QUANTITY   change   function          if  this value    0          delete cart items this dataset id         else         cart items this dataset id    this value            cart save        cart list                  G  REMOVE ITEM FROM CART   remove   function          delete cart items this dataset id       cart save        cart list                  H  CHECKOUT   checkout   function             SEND DATA TO SERVER        CHECKS        SEND AN EMAIL        RECORD TO DATABASE        PAYMENT        WHATEVER IS REQUIRED     alert  quot TO DO quot                var data   new FormData        data append  cart   JSON stringify cart items        data append  products   JSON stringify products        var xhr   new XMLHttpRequest        xhr open  quot POST quot    quot SERVER-SCRIPT quot        xhr onload   function               xhr send data                 window addEventListener  quot DOMContentLoaded quot   cart init

User · Answer

For a project this size  you should stop writing pure JavaScript and turn to some of the libraries available  I d recommend jQuery  http   jquery com    which allows you to select elements by css-selectors  which I recon should speed up your development quite a bit   Example of your code then becomes   function AddtoCart       var len       Items tr   length   row   inp1   inp2   cells      row       Items td first   clone true      cells    row find  td        cells get 0  html  len        inp1    cells get 1  find  input first       inp1 attr  id    inp1 attr  id     len  val          inp2    cells get 2  find  input first       inp2 attr  id    inp2 attr  id     len  val             Items   append  row           I can see that you might not understand that code yet  but take a look at jQuery  it s easy to learn and will make this development way faster    I would use the libraries already created specifically for js shopping carts if I were you though   To your problem  If i look at your jsFiddle  it doesn t even seem like you have defined a table with the id Items  Maybe that s why it doesn t work

User · Answer

I think it is a better idea to start working with a raw data and then translate it to DOM  document object model   I would suggest you to work with array of objects and then output it to the DOM in order to accomplish your task   You can see working example of following code at  http   www softxml com stackoverflow shoppingCart htm  You can try following approach     create array that will hold all ordered products     var shoppingCart              this function manipulates DOM and displays content of our shopping cart     function displayShoppingCart            var orderedProductsTblBody document getElementById  orderedProductsTblBody              ensure we delete all previously added rows from ordered products table         while orderedProductsTblBody rows length gt 0                orderedProductsTblBody deleteRow 0                        variable to hold total price of shopping cart         var cart total price 0            iterate over array of objects         for var product in shoppingCart                 add new row                   var row orderedProductsTblBody insertRow                  create three cells for product properties              var cellName   row insertCell 0               var cellDescription   row insertCell 1               var cellPrice   row insertCell 2               cellPrice align  right                 fill cells with values from current product object of our array             cellName innerHTML   shoppingCart product  Name              cellDescription innerHTML   shoppingCart product  Description              cellPrice innerHTML   shoppingCart product  Price              cart total price  shoppingCart product  Price                      fill total cost of our shopping cart          document getElementById  cart total   innerHTML cart total price              function AddtoCart name description price            Below we create JavaScript Object that will hold three properties you have mentioned     Name Description and Price        var singleProduct                Fill the product object with data        singleProduct Name name         singleProduct Description description         singleProduct Price price           Add newly created product to our shopping cart         shoppingCart push singleProduct            call display function to show on screen        displayShoppingCart                     Add some products to our shopping cart via code or you can create a button with onclick event       AddtoCart  Table   Big red table  50         AddtoCart  Door   Big yellow door  150         AddtoCart  Car   Ferrari S23  150000          lt table cellpadding  4  cellspacing  4  border  1  gt       lt tr gt           lt td valign  top  gt               lt table cellpadding  4  cellspacing  4  border  0  gt                   lt thead gt                       lt tr gt                           lt td colspan  2  gt                              Products for sale                          lt  td gt                       lt  tr gt                   lt  thead gt                   lt tbody gt                       lt tr gt                           lt td gt                              Table                          lt  td gt                           lt td gt                               lt input type  button  value  Add to cart  onclick  AddtoCart  Table   Big red table  50    gt                           lt  td gt                       lt  tr gt                       lt tr gt                           lt td gt                              Door                          lt  td gt                           lt td gt                               lt input type  button  value  Add to cart  onclick  AddtoCart  Door   Yellow Door  150    gt                           lt  td gt                       lt  tr gt                       lt tr gt                           lt td gt                              Car                          lt  td gt                           lt td gt                               lt input type  button  value  Add to cart  onclick  AddtoCart  Ferrari   Ferrari S234  150000    gt                           lt  td gt                       lt  tr gt                   lt  tbody gt                lt  table gt           lt  td gt           lt td valign  top  gt               lt table cellpadding  4  cellspacing  4  border  1  id  orderedProductsTbl  gt                   lt thead gt                       lt tr gt                           lt td gt                              Name                          lt  td gt                           lt td gt                              Description                          lt  td gt                           lt td gt                              Price                          lt  td gt                       lt  tr gt                   lt  thead gt                   lt tbody id  orderedProductsTblBody  gt                    lt  tbody gt                   lt tfoot gt                       lt tr gt                           lt td colspan  3  align  right  id  cart total  gt                            lt  td gt                       lt  tr gt                   lt  tfoot gt               lt  table gt           lt  td gt       lt  tr gt   lt  table gt    Please have a look at following free client-side shopping cart   SoftEcart js  is a Responsive  Handlebars  amp  JSON based  E-Commerce shopping cart written in JavaScript with built-in PayPal integration   Documentation  http   www softxml com softecartjs-demo documentation SoftecartJS free html  Hope you will find it useful

[javascript] Creating a Shopping Cart using only HTML/JavaScript

Examples related to javascript

Examples related to html

Examples related to arrays

Examples related to html-table

Examples related to cart