JavaScript Writing a Simple Shopping Cart Function

There are a lot of codes about shopping cart implementation on the Internet. Today, after studying some knowledge points, I decided to write it myself, so I wrote a simple shopping cart. Next, I will explain the specific implementation.　

1, Implement the content with html;　

2, Decorate the appearance with css;　

3, Design animation effects with js(jq);

Step 1:Firstly, design the html page. I use a large div to contain all products, and then encapsulate different products with different divs. I use ul li to implement the product list, and the specific implementation code is as follows (the products involved in the code are copied from the Internet and do not have reference value):　

<div id="goods">
  <div class="goodsItem">
   <ul class="goditem">
    <li class="godpic"><img src="images/1.png"></li>
    <li class="godprice">￥25.00/li>
    <li class="godinfo">Many poems in 'The Collection of Birds' were written in Bengali. This collection was first introduced to China by Mr. Zheng Zhenzhou./li>
    <li class="godadd"><a href="javascript:;">Add to Cart</a>/a></li>
   </ul>
  </div>
  <div class="goodsItem">
   <ul class="goditem">
    <li class="godpic"><img src="images/2.png"></li>
    <li class="godprice">￥56.00/li>
    <li class="godinfo">This book mainly introduces how to use existing Web-related technologies to build Android applications./li>
    <li class="godadd"><a href="javascript:;">Add to Cart</a>/a></li>
   </ul>
  </div>
  <div class="goodsItem">
   <ul class="goditem">
    <li class="godpic"><img src="images/3.png"></li>
    <li class="godprice">￥37.00/li>
    <li class="godinfo">Defeat time with words. Feng Tang's most popular work, his essays are the best-selling and most popular works./li>
    <li class="godadd"><a href="javascript:;">Add to Cart</a>/a></li>
   </ul>
  </div>
  <div class="goodsItem">
   <ul class="goditem">
    <li class="godpic"><img src="images/1.png"></li>
    <li class="godprice">￥25.00/li>
    <li class="godinfo">Many poems in 'The Collection of Birds' were written in Bengali. This collection was first introduced to China by Mr. Zheng Zhenzhou./li>
    <li class="godadd"><a href="javascript:;">Add to Cart</a>/a></li>
   </ul>
  </div>
  <div class="goodsItem">
   <ul class="goditem">
    <li class="godpic"><img src="images/2.png"></li>
    <li class="godprice">￥56</li>
    <li class="godinfo">This book mainly introduces how to use existing Web-related technologies to build Android applications./li>
    <li class="godadd"><a href="javascript:;">Add to Cart</a>/a></li>
   </ul>
  </div>
  <div class="goodsItem">
   <ul class="goditem">
    <li class="godpic"><img src="images/3.png"></li>
    <li class="godprice">￥37.00/li>
    <li class="godinfo">Defeat time with words. Feng Tang's most popular work, his essays are the best-selling and most popular works./li>
    <li class="godadd"><a href="javascript:;">Add to Cart</a>/a></li>
   </ul>
  </div>
 </div>
 <div id="godcar">
  <div class="dnum">0</div>
  <div class="dcar">
   <img src="images/car.jpg">
  </div>
 </div>

This involves a knowledge point: in <li class="godadd"><a href="javascript:;">Add to cart</a></In li>, I used javascript:; which means not to jump, but to execute an empty event.　

Step 2:For the appearance design, in order to display better, I have set width, height, and border for each product list div. It is worth noting that I set the position to fixed to keep the shopping cart fixed at a certain position, and then set top and left to fix it at the desired location. Additionally, learn to flexibly use margin and padding to make the display more beautiful.　

Note:If you want to set width and height for inline elements or other block-level element attributes, you need to set display: block first.　

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*It is a good habit to set margin and padding for all elements at the beginning.

Step 3:The static page has been implemented, and next, we need to use jq to implement the specific functions of the shopping cart, such as adding items to the cart and changing the quantity of the cart. I spent some time designing how to make the image of the product slowly move to the shopping cart, then shrink, and finally disappear. In this process, I used the animate function to achieve this. The difficulty in achieving this function is how to move the image and how to change it.　

Next, I will explain how to implement this process:　

1）Firstly, you need to get the image of the product, and then make a copy of the obtained image;

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

2）Get the top and left values of the product image and the shopping cart, so that the animate function can be used to move;

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

3）Write the animate function to achieve specific effects;
　cimg.appendTo($("body")).css({

    "position": "absolute",//Absolute positioning
    "opacity": "0.7
    "top": imgtop,
    "left": imgleft
   
    
    "left": carleft,
    "width": "40px",
    "height": "40px",
    "opacity": "0.3" //Transparency
   }, 1000, function () {
    cimg.remove(); //Image disappearance
    $(".dnum").text(i); //Change in shopping cart quantity
   });

Simple movement and change can be realized.

But then I thought, it doesn't seem to be in line with reality to reset the number of items in the shopping cart to 0 every time it is refreshed, so I thought about how to implement it so that the number of items in the shopping cart does not change when the page is refreshed. After searching for information, I summarized three methods:　

（1）Save to database;　
（2）Through cookie method;　
（3）Through h5localStorage method;　

Finally, I decided to try the third method because I wanted to try h5The new method (due to curiosity~~, also because I just saw this method and wanted to try it out), the data stored by localStorage method has no time limit. The data will still be available the next day, the next week, or even a year later. My specific implementation is localStorage.getItem.

All the necessary information has been explained. Here is all the jq code, if you like it, please give it a like:

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
   
    
    "left": carleft,
    "width": "40px",
    "height": "40px",
    "opacity": "0.3"
   }, 1000, function () {
    cimg.remove();
    $(".dnum").text(i);
    localStorage.setItem("inum", i);
   });
  }
 });
}); 

Illustration:

That's all for this article. I hope it will be helpful to everyone's learning, and I also hope everyone will support the Yelling Tutorial more.

Statement: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (When reporting, please replace # with @) to report violations, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.