HTMLify
cart.js
Views: 3 | Author: cody
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 | console.clear(); if(document.cookie.indexOf(',counter=')>=0) { let counter = document.cookie.split(',')[1].split('=')[1] document.getElementById("badge").innerHTML = counter } let cartContainer = document.getElementById('cartContainer') let boxContainerDiv = document.createElement('div') boxContainerDiv.id = 'boxContainer' // DYNAMIC CODE TO SHOW THE SELECTED ITEMS IN YOUR CART function dynamicCartSection(ob,itemCounter) { let boxDiv = document.createElement('div') boxDiv.id = 'box' boxContainerDiv.appendChild(boxDiv) let boxImg = document.createElement('img') boxImg.src = ob.preview boxDiv.appendChild(boxImg) let boxh3 = document.createElement('h3') let h3Text = document.createTextNode(ob.name + ' × ' + itemCounter) // let h3Text = document.createTextNode(ob.name) boxh3.appendChild(h3Text) boxDiv.appendChild(boxh3) let boxh4 = document.createElement('h4') let h4Text = document.createTextNode('Amount: Rs' + ob.price) boxh4.appendChild(h4Text) boxDiv.appendChild(boxh4) // console.log(boxContainerDiv); buttonLink.appendChild(buttonText) cartContainer.appendChild(boxContainerDiv) cartContainer.appendChild(totalContainerDiv) // let cartMain = document.createElement('div') // cartmain.id = 'cartMainContainer' // cartMain.appendChild(totalContainerDiv) return cartContainer } let totalContainerDiv = document.createElement('div') totalContainerDiv.id = 'totalContainer' let totalDiv = document.createElement('div') totalDiv.id = 'total' totalContainerDiv.appendChild(totalDiv) let totalh2 = document.createElement('h2') let h2Text = document.createTextNode('Total Amount') totalh2.appendChild(h2Text) totalDiv.appendChild(totalh2) // TO UPDATE THE TOTAL AMOUNT function amountUpdate(amount) { let totalh4 = document.createElement('h4') // let totalh4Text = document.createTextNode(amount) let totalh4Text = document.createTextNode('Amount: Rs ' + amount) totalh4Text.id = 'toth4' totalh4.appendChild(totalh4Text) totalDiv.appendChild(totalh4) totalDiv.appendChild(buttonDiv) console.log(totalh4); } let buttonDiv = document.createElement('div') buttonDiv.id = 'button' totalDiv.appendChild(buttonDiv) let buttonTag = document.createElement('button') buttonDiv.appendChild(buttonTag) let buttonLink = document.createElement('a') buttonLink.href = '/orderPlaced.html?' buttonTag.appendChild(buttonLink) buttonText = document.createTextNode('Place Order') buttonTag.onclick = function() { console.log("clicked") } //dynamicCartSection() // console.log(dynamicCartSection()); // BACKEND CALL let httpRequest = new XMLHttpRequest() let totalAmount = 0 httpRequest.onreadystatechange = function() { if(this.readyState === 4) { if(this.status == 200) { // console.log('call successful'); contentTitle = JSON.parse(this.responseText) let counter = Number(document.cookie.split(',')[1].split('=')[1]) document.getElementById("totalItem").innerHTML = ('Total Items: ' + counter) let item = document.cookie.split(',')[0].split('=')[1].split(" ") console.log(counter) console.log(item) let i; let totalAmount = 0 for(i=0; i<counter; i++) { let itemCounter = 1 for(let j = i+1; j<counter; j++) { if(Number(item[j]) == Number(item[i])) { itemCounter +=1; } } totalAmount += Number(contentTitle[item[i]-1].price) * itemCounter dynamicCartSection(contentTitle[item[i]-1],itemCounter) i += (itemCounter-1) } amountUpdate(totalAmount) } } else { console.log('call failed!'); } } httpRequest.open('GET', 'https://5d76bf96515d1a0014085cf9.mockapi.io/product', true) httpRequest.send() |