API tools faq
paste
Advertisement
jackieradallhazik

Cart shop JS

jackieradallhazik
Dec 3rd, 2016
240
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 5.05 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>test</title>
  5. <script type="text/javascript">
  6.         var product = ["Pepsi","Coca","Sting","Piss","Canon in D", "Beethoven","Mozart sida","HIV","VIRUS ZIKA","FRIENDZONE","LOVERS","KHANH LINH","XNXX","VLXX","THIEN DIA HOI"];
  7.         var price = [65,56,48,654,65,4,6,165,1,6500000,16,5100,560,160,501];// product and price
  8.     var cart = {
  9.         "avai_st":function(){
  10.             return (typeof(Storage) !== "undefined");
  11.         },
  12.         "saved" : function(item){
  13.             if(this.avai_st){
  14.                 localStorage.setItem("cart", item);
  15.             }
  16.         },
  17.         "append":function(id){
  18.             id = id.toString();
  19.             var mount = parseInt(document.getElementsByName("product"+id)[0].value);
  20.             document.getElementsByName("product"+id)[0].value = 0; // set back for product = 0;
  21.             if(mount==0) return 0;
  22.             if(this.avai_st){
  23.                 var fl =0;// use later
  24.                 var ob_item = new Object;
  25.                 ob_item[id] = mount;// create object {id:item}
  26.                 var store_str = localStorage.getItem("cart");
  27.                 if(store_str==null) {//check cart exist or not.
  28.                     this.saved(JSON.stringify([ob_item]));//not exist, create new
  29.                 }
  30.                 else{
  31.                     var json_arr = JSON.parse(store_str);// exist, convert to array object (array have object inside [{object},{object}, ...{object}])
  32.                     for(var i = 0; i< json_arr.length;i++){// search (is product in cart or not)
  33.                         if(json_arr[i][id]!=undefined){json_arr[i][id]+=mount;fl=1; break;}// product existed, sum more mount
  34.                     }
  35.                     if(fl!=1){
  36.                         json_arr.push(ob_item);// product not existed in cart, append product.
  37.                     };
  38.                     this.saved(JSON.stringify(json_arr));// save cart
  39.                 }
  40.                 alert("You added "+mount+" "+product[parseInt(id)]+" successfully!");
  41.             }else{
  42.                 alert("Added fails! Restart your browser.");
  43.             }
  44.         },
  45.         "get":function(){
  46.             var item = "";
  47.             if(this.avai_st)
  48.                 item = localStorage.getItem("cart");
  49.             document.getElementById("bought").innerHTML = item;
  50.         },
  51.         "del_cart":function(){
  52.             localStorage.clear();
  53.         },
  54.         "update":function(){
  55.             if(this.avai_st){
  56.                 document.getElementById("cart").innerHTML = ""; // làm sạch cart trên html source
  57.                 var sum_money= 0;
  58.                 var store_str = localStorage.getItem("cart");
  59.                 if(store_str!=null){// kiểm tra nó còn sp hay k?
  60.                     var json_arr = JSON.parse(store_str);
  61.                     for(var i=0;i<json_arr.length;i++){
  62.                         var id = Object.keys(json_arr[i]);// lấy id của sản phẩm
  63.                         var mount = json_arr[i][id];// lấy số lượng
  64.                         var input="";
  65.                             input += "<img src=\"image\/"+id+".jpg\" width=\"40\" height=\"40\"><h4>"+product[parseInt(id)]+"<\/h4><br \/>";// hình của sp
  66.                             sum_money+=(mount*price[parseInt(id)]);// tổng tiền
  67.                             input += "<p>"+mount+" * $"+price[parseInt(id)]+" = $"+(mount*price[parseInt(id)])+"<\/p>";// tính tiền sản phẩm (price * với số lượng)
  68.                             input += "<hr \/>";
  69.  
  70.                         document.getElementById("cart").innerHTML += input;
  71.                     }
  72.  
  73.                 }
  74.                 document.getElementById("cart").innerHTML += "<h3>Sum = $"+sum_money+"</h3>";// in ra tổng tiền
  75.             }
  76.         }
  77.     }
  78.     function add_pro(item){
  79.         document.getElementById("product").innerHTML += item;
  80.     }
  81.     function cha_m(state,id){
  82.         var num = parseInt(document.getElementsByName("product"+id)[0].value);
  83.         if(num==0 && state == 0) return 0;
  84.         else if(state == 1) num+=1;
  85.         else num -= 1;
  86.         document.getElementsByName("product"+id)[0].value = num;
  87.     }
  88.     function products(){
  89.         for(var i = 0; i <product.length; i++){
  90.             add_pro("<li><img src=\"image/"+i+".jpg\" width=\"150\" height=\"150\"><h3>"+product[i]+"</h3><p>$"+price[i]+"</p><button onclick=\"cha_m(0,"+i+")\">-</button><input type=\"text\" value=\"0\" name=\"product"+i+"\" disabled><button onclick=\"cha_m(1,"+i+")\">+</button>   <button onclick=\"cart.append("+i+")\">Add to cart</button></li>");
  91.             if((i+1)%4==0) add_pro("<br />");
  92.         }
  93.     }
  94. </script>
  95. <style type="text/css">
  96. ul.products li {
  97.     width: 200px;
  98.     display: inline-block;
  99.     vertical-align: top;
  100.     text-align: center;
  101.     border-style: solid;
  102. }
  103. ul.products p {
  104.     color: red;
  105.  
  106. }
  107.  
  108. ul.products input {
  109.     color: blue;
  110.     text-align: center;
  111.     max-width: 30px;
  112.  
  113.  
  114. }
  115.  
  116. .dropdown {
  117.     position: relative;
  118.     display: inline-block;
  119. }
  120.  
  121. .dropdown-content {
  122.     display: none;
  123.     position: absolute;
  124.     background-color: #ffe8e8;
  125.     min-width: 160px;
  126.     padding: 20px 50px;
  127. }
  128.  
  129. .dropdown:hover .dropdown-content {
  130.     display: block;
  131. }
  132. #bought button{
  133.     background-color: black; /* Green */
  134.     border: none;
  135.     color: white;
  136.     padding: 15px 32px;
  137.     text-align: center;
  138.     text-decoration: none;
  139.     display: inline-block;
  140.     font-size: 20px;
  141.     align-content: right;
  142. }
  143. #cart img{
  144.     display: inline;
  145. }
  146. #cart p{
  147.     display: inline;
  148. }
  149. #cart h4{
  150.     display: inline;
  151. }
  152. </style>
  153. </head>
  154. <body onload="products();">
  155. <button onclick="cart.del_cart()">Delete Cart</button>
  156.  
  157. <hr />
  158. <div id="bought">
  159. <div class="dropdown">
  160.   <button onmouseover="cart.update();">Show cart</button>
  161.   <div class="dropdown-content" id="cart">
  162.   </div>
  163. </div>
  164.  
  165. </div>
  166. <hr />
  167. <ul id="product" class="products">
  168. </ul>
  169. </body>
  170. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!