Shopping Chart javascript Array function json Melanjutkan fungsi

Shopping Chart (javascript: Array, function, json)

Melanjutkan fungsi untuk Add to Chart pada file product. Detail. html

Petunjuk Praktikum • Pada folder js, buat file baru bernama cart. js • Tambahkan link ke file cart. js pada bagian head dari file Product. Details. html <script src=”js/cart. js"></script>

Isi file cart. js Pada file cart. js, tambahkan script berikut ini: window. onload = function() { var addtocartbtns = document. get. Elements. By. Class. Name("addtocartbutton"); var shoppingcart = document. get. Element. By. Id("shoppingcart"); var cartitem = document. query. Selector. All("#shoppingcart ul")[0]; var empty. Cart = document. get. Element. By. Id("empty. Cart"); for (var i = 0; i < addtocartbtns. length; i++) { addtocartbtns[i]. add. Event. Listener("click", function (ev) { alert('hi'); }); } }

Penjelasan • The window. onload is an event handler. It is triggered when the page is completely loaded. This is important because we need all the html elements to be loaded in before we assigning event handler to them as you will see in the following explanation • The statement: var addtocartbtns = document. get. Elements. By. Class. Name("addtocartbutton"); searchs through the entire current document for all elements associated with the class addtocartbutton. All the elements found is put into an array. • The next few statement: var shoppingcart = document. get. Element. By. Id("shoppingcart"); var cartitem = document. query. Selector. All("#shoppingcart ul")[0]; var empty. Cart = document. get. Element. By. Id("empty. Cart"); The first statement gets the element with the id “shoppingcart” so that we can The second statement get the first item in the shopping cart and the last statement is for the button that has id “empty. Cart”.

Modifikasi cart. js Silahkan modifikasi file cart. js. Pada bagian alert, silahkan ganti dengan script berikut ini: for (var i = 0; i < addtocartbtns. length; i++) { addtocartbtns[i]. add. Event. Listener("click", function (ev) { var furniture. Id = this. get. Attribute("data-item"); var furniture. Price = this. get. Attribute("data-price"); alert(furniture. Id + ' ' + furniture. Price); } The get. Attribute is the one that retrieve the item info and the item embedded earlier in the add. To. Cart button. Here we join them together to show the results

Menyimpan ke Array var current. Cart = new Array(); for (var i = 0; i < addtocartbtns. length; i++) { addtocartbtns[i]. add. Event. Listener("click", function (ev) { var furniture. Id = this. get. Attribute("data-item"); var furniture. Price = this. get. Attribute("data-price"); var item = {id: furniture. Id, price: furniture. Price}; current. Cart. push(item); Update. Shopping. Cart. UI(); //alert(furniture. Id + ' ' + furniture. Price); } • First, we create a variable called current. Cart to store an Array of furniture items. Each item has 2 attributes, 1 is id which is the name of the furniture and the other is price. • Once it is done, we add it to the array by pushing it. • Finally we call the Update. Shopping. Cart. UI() function that we will be creating in a short while to update the display • We comment the alert

Update Fungsi Update. Shopping. Cart. UI function Update. Shopping. Cart. UI() { cartitem. inner. HTML = ""; for (var i = 0; i < current. Cart. length; i++) { var li. Element = document. create. Element('li'); li. Element. inner. HTML = current. Cart[i]. id + " " + current. Cart[i]. price + ""; cartitem. append. Child(li. Element); } }; The function first clear whatever that is in the list and then simply go through each item in the current. Cart array and create a list item <li> for each of them. After which, it is added to the unordered list.

Silahkan coba file web anda. Harusnya shopping cart sudah dapat terisi saat add to cart di klik

Empty Cart Button empty. Cart. add. Event. Listener("click", function (ev) { current. Cart = new Array(); Update. Shopping. Cart. UI(); }); Pada file cart. js, tambahkan function berikut ini. Langkahnya cukup sederhana, yakni dengan mengosongkan array dan mengupdate function Update. Shopping. Cart. UI(); Silahkan coba akses kembali web anda dan tekan empty cart. Apabila button belum ada di halaman web anda, silahkan buat button untuk Empty Cart

Update Shopping Cart • Apakah shopping cart anda telah selesai? Silahkan dari halaman productdetail. html yang shooping cartnya telah terisi, anda pindah ke halaman lain dan kembali lagi ke halaman productdetail. html. Maka data dalam shopping cart menjadi hilang. • Javascript selalu meng-inisialisasi dirinya sendiri setiap kali ia di load. • Untuk mengatasi hal ini, kita perlu menyimpan data shopping cart pada temporary storage yang disediakan oleh browser.

Update Shopping Cart • Silahkan tambahkan script yang bold berikut ini pada file cart. js function Update. Shopping. Cart. UI() { cartitem. inner. HTML = ""; for (var i = 0; i < current. Cart. length; i++) { var li. Element = document. create. Element('li'); li. Element. inner. HTML = current. Cart[i]. id + " " + current. Cart[i]. price + ""; cartitem. append. Child(li. Element); } local. Storage. set. Item('cart', JSON. stringify(current. Cart)); }; Data disimpan dalam local storage bernama cart. Data akan tetap berada disana sampai ada penghapusan

Jalankan pada browser. Apabila anda menggunakan Chrome, tekan CTRL + Shift + J untuk mengaktifkan developer tools. Pilih Tab Application dan pilih File yang berada dalam Local Storage Silahkan lakukan proses penambahan data pada local storage dan juga penghapusan data untuk melihat hasilnya. Silahkan berpindah ke halaman lain. Meskipun data pada cart sudah dikosongkan, cart pada local storage masih menyimpan data.

Update file car. js. . . var empty. Cart = document. get. Element. By. Id("empty. Cart"); current. Cart = JSON. parse(local. Storage. get. Item('cart')); if (!current. Cart) { current. Cart = new Array(); } Update. Shopping. Cart. UI(); for (var i = 0; i < addtocartbtns. length; i++) {. . . • Untuk mengatasi hal tersebut, yang dilakukan adalah mengambil data dari local storage setiap kali halaman refresh. Silahkan modifikasi file cart. js dengan menambahkan script yang bold pada bagian awal file cart. js • Sederhana saja, yang dilakukan adalah dengan mengambil data dari local storage dan melakukan update pada shopping cart.

Tugas • Silahkan tambahkan tombol add to cart pada file collections. html • Saat add to cart di klik, data pada shopping cart juga bertambah.