Compile a simple Shopping Cart function in JavaScript

This article describes how to write code for the simple JavaScript shopping cart function, which has some reference value. If you are interested, you can refer to the many online shopping cart implementation codes, today I read some knowledge points and decided to write them by myself. So I wrote a simple shopping cart and explained the specific implementation.

1. Use html to implement content;

2. Use css to modify the appearance;

3. Use js (jq) to design animations.

Step 1: Design the html page first. I use a large p to include all the items, and then use different p to encapsulate different items, I use ul li in the product list. The specific implementation code is as follows (all the products involved in the Code are copied on the Internet without reference value ):

  
   
 
 
    
  
  
    
  
  
￥25.00
    
  
  
Many of the poems in the birds set were created in Bangladesh. These poems were first translated to China by Mr. Zheng zhenduo.
    
  
  
Add to shopping cart
   
 
 
  
  
   
 
 
    
  
  
    
  
  
￥56.00
    
  
  
This book describes how to use existing Web-related technologies to build Android applications.
    
  
  
Add to shopping cart
   
 
 
  
  
   
 
 
    
  
  
    
  
  
￥37.00
    
  
  
Beat time with words. The best-selling works of Feng Tang and miscellaneous are the most popular works with the best sales volume.
    
  
  
Add to shopping cart
   
 
 
  
  
   
 
 
    
  
  
    
  
  
￥25.00
    
  
  
Many of the poems in the birds set were created in Bangladesh. These poems were first translated to China by Mr. Zheng zhenduo.
    
  
  
Add to shopping cart
   
 
 
  
  
   
 
 
    
  
  
    
  
  
￥56
    
  
  
This book describes how to use existing Web-related technologies to build Android applications.
    
  
  
Add to shopping cart
   
 
 
  
  
   
 
 
    
  
  
    
  
  
￥37.00
    
  
  
Beat time with words. The best-selling works of Feng Tang and miscellaneous are the most popular works with the best sales volume.
    
  
  
Add to shopping cart
   
 
 
  
 
  
  
0
  
     
 

It involves a knowledge point:

Add to shopping cart

In, I used javascript:;, which means no jump is performed and an empty event is executed.

Step 2: design the appearance. For better display, I set the width and height of p containing each item list, and border. It is worth noting that, in order to fix the shopping cart to a certain position, I set its position to fixed, and set top and left to fix it to the position you want. In addition, you must learn to use margin and padding flexibly to make the display more beautiful.

Note: If you want to set width and height or other block-level element attributes for the Row Element, you need to set display: block.

The specific design code is as follows:

* {Padding: 0px; margin: 0px; font-family: "";}. goodsItem {width: 280px; height: 400px; float: left; border: 1px solid # ccc; margin: 5px ;}# goods {width: 910px ;}. goditem {list-style: none ;}. godpic img {display: block; width: 250px; height: 250px; margin: 0px auto ;}. godprice ,. godinfo ,. godadd {display: block; width: 220px; margin: 0px auto; text-align: center ;}. godprice {font-size: 20px; color: # f00 ;}. godinfo {text-align: center; font-size: 14px; margin: 10px 0px ;}. godadd a {display: block; width: 150px; height: 36px; background-color: # fd6a01; border-radius: 10px; margin: 0px auto; text-decoration: none; color: # fff; line-height: 36px;} # godcar {position: fixed; right: 0px; top: 40%; width: 72px; height: 64px;} # godcar. dnum {width: 24px; height: 24px; border-radius: 12px; background-color: # f00; text-align: center; line-height: 24px; position: absolute; font-size: 12px; top: 0px ;}. godadd. bg {background-color: #808080 ;}

The first * Indicates setting attributes for all elements. Setting margin and padding at the beginning is a good habit.

Step 3: implement the static page, and then use jq to implement the specific shopping cart, such as adding to the shopping cart and changing the quantity of shopping cart. I spent some time designing: how to move images to the shopping cart slowly when adding products to the shopping cart, then get smaller and disappear. Here, I used the animate function to implement this process. The difficulty of implementing this function is: how to move and change images.

Next we will explain how to implement this process:

1) first, you must obtain the image of the product and copy the image;

var img = $(this).parent().find(".godpic").find("img"); var cimg = img.clone();

2) obtain the top and left values of the product image, the top and left values of the shopping cart, so that the animation function can be used to move; var imgtop = img. offset (). top;

var imgleft = img.offset().left;var cartop = $("#godcar").offset().top;var carleft = $("#godcar").offset().left;

3) Compile the animate function to achieve specific results;
Cimg. appendTo ($ ("body" into detail .css ({

"Position": "absolute", // absolute positioning "opacity": "0.7", "top": imgtop, "left": imgleft }). animate ({"top": cartop, "left": carleft, "width": "40px", "height": "40px", "opacity ": "0.3" // transparency}, 1000, function () {cimg. remove (); // image disappears $ (". dnum "). text (I); // The number of Shopping Cart changes });

Simple movement and changes are implemented.

However, I thought that it would not be true to refresh the number of shopping carts to 0 every time. So I thought about how to refresh the page without changing the number of shopping carts and checking the information, three methods are summarized:

(1) Save it to the database;
(2) cookie method;
(3) Use the localStorage method of h5;

Finally, I decided to adopt the third method, because I wanted to try the new h5 method (out of curiosity ~~, Also, if you just see this method, try it.) There is no time limit on the data stored by the localStorage method. Data is still available on the second day, the second week, or after the next year. Implementation of my code: localStorage. getItem.

Okay, all the things I have to talk about are finished. I will attach all the jq code and like it, just like it:

var i = 0;$(function(){ var inum = 0; if(localStorage.getItem("inum")!==null){  inum = localStorage.getItem("inum"); } $(".dnum").text(inum);  $(".godadd").click(function(){  if (!$(this).find("a").hasClass("bg")) {   i++;   $(this).find("a").addClass("bg");   var img = $(this).parent().find(".godpic").find("img");   var cimg = img.clone();    var imgtop = img.offset().top;   var imgleft = img.offset().left;    var cartop = $("#godcar").offset().top;   var carleft = $("#godcar").offset().left;    cimg.appendTo($("body")).css({    "position": "absolute",    "opacity": "0.7",    "top": imgtop,    "left": imgleft   }).animate({    "top": cartop,    "left": carleft,    "width": "40px",    "height": "40px",    "opacity": "0.3"   }, 1000, function () {    cimg.remove();    $(".dnum").text(i);    localStorage.setItem("inum", i);   });  }  });});

:

The above is all the content of this article. I hope it will help you learn and support PHP.

For more articles about the simple Shopping Cart function written in JavaScript, please follow the PHP Chinese network!