Escribir una función de carrito de compras simple en JavaScript

Hay muchos códigos sobre la implementación del carrito de compras en línea, hoy vi algunos puntos de conocimiento, decidí hacerlo yo mismo, así que escribí un carrito de compras simple, a continuación, explico la implementación específica.　

1、Implementar el contenido con html;　

2、Decorar el aspecto con css;　

3、Diseñar efectos dinámicos con js(jq);

Paso 1:Primero es el diseño de la página html, uso un gran div para contener todos los productos, luego uso diferentes div para encapsular diferentes productos, en la lista de productos uso ul li para implementar, el código específico es como sigue (los productos involucrados en el código son copiados de la red, sin valor de referencia):　

<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">Muchos poemas en la colección "El conjunto de pájaros" fueron escritos en bengalí, esta colección fue traducida a China por el Sr. Zheng Zhenzhou.</li>
    <li class="godadd"><a href="javascript:;">Agregar al carrito</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">Este libro principalmente introduce cómo utilizar las tecnologías web existentes para construir aplicaciones Android.</li>
    <li class="godadd"><a href="javascript:;">Agregar al carrito</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">Derrotar al tiempo con palabras. La obra más vendida de Feng Tang, los ensayos son sus obras más vendidas y populares.</li>
    <li class="godadd"><a href="javascript:;">Agregar al carrito</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">Muchos poemas en la colección "El conjunto de pájaros" fueron escritos en bengalí, esta colección fue traducida a China por el Sr. Zheng Zhenzhou.</li>
    <li class="godadd"><a href="javascript:;">Agregar al carrito</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">Este libro principalmente introduce cómo utilizar las tecnologías web existentes para construir aplicaciones Android.</li>
    <li class="godadd"><a href="javascript:;">Agregar al carrito</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">Derrotar al tiempo con palabras. La obra más vendida de Feng Tang, los ensayos son sus obras más vendidas y populares.</li>
    <li class="godadd"><a href="javascript:;">Agregar al carrito</a></li>
   </ul>
  </div>
 </div>
 <div id="godcar">
  <div class="dnum">0</div>
  <div class="dcar">
   <img src="images/car.jpg">
  </div>
 </div>

Entre los puntos que se involucran hay un conocimiento: en <li class="godadd"><a href="javascript:;">agregar al carrito</a></li>，我使用了javascript:;这个的意思表示不进行跳转，执行一个空事件。　

Segundo paso:Para el diseño de apariencia, para una mejor visualización, he establecido width y height, así como borde para cada div de lista de productos. Es importante destacar que, para que el carrito de compras se mantenga en una posición específica, he establecido position: fijo y luego he establecido top y left para que se mantenga en la posición deseada. Además, aprende a usar margen y relleno de manera flexible para que la visualización sea más hermosa.　

Nota:Si desea establecer width y height para elementos en línea u otros atributos de elementos de bloque,则需要设置display:block才能。　

El código de diseño específico es el siguiente:　

* {
 relleno: 0px;
 margen: 0px;
 fuente-familia: "微软雅黑";
}
.goodsItem{
 ancho:280px;
 altura: 400px;
 flotar: izquierda;
 borde: 1px sólido #ccc;
 margen:5px;}
}
#goods{
 ancho:910px;}
}
.goditem{
 lista-estilo: ninguna;
}
.godpic img{
 visualización: bloque;
 ancho:250px;
 altura: 250px;
 margen:0px auto;
}
.godprice,.godinfo,.godadd{
 visualización: bloque;
 ancho:220px;
 margen:0px auto;
 texto-alineación: centro;
}
.godprice{
 fuente-tamaño: 20px;
 color: #f00;
}
.godinfo{
 texto-alineación: centro;
 fuente-tamaño: 14px;}
 margen: 10px 0px;
}
.godadd a{
 visualización: bloque;
 ancho: 150px;
 altura: 36px;}
 background-color: #fd6a01;
 borde-radio: 10px;}
 margen: 0px auto;
 texto-decoración: ninguna;
 color:#fff;
 línea-altura: 36px;}
}
#godcar{
 posición: fija;
 derecha: 0px;
 arriba:40%;
 ancho: 72px;}
 altura: 64px;}
}
#godcar .dnum{
 ancho:24px;}
 altura: 24px;}
 borde-radio: 12px;}
 background-color: #f00;
 texto-alineación: centro;
 línea-altura: 24px;}
 posición: absoluta;
 fuente-tamaño: 12px;}
 top:0px;
}
.godadd .bg {
 background-color: #808080;
}

El primero*Representa establecer propiedades para todos los elementos, establecer margin y padding al principio es un buen hábito.

Tercer paso:Se ha implementado la página estática, a continuación, se necesita implementar específicamente el carrito de compras a través de jq, como agregar al carrito, cambio de cantidad del carrito, etc. Pasé algo de tiempo en el diseño: cómo hacer que la imagen del producto se mueva lentamente al carrito, luego se变小, y finalmente desaparezca. Entre ellos, utilicé la función animate para lograr este proceso. El punto difícil de este funcionalidad es: cómo mover la imagen, cómo cambiar.　

A continuación, explico cómo lograr este proceso:　

1) primero necesita obtener la imagen del producto, luego copiar la imagen obtenida;

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

2) obtener el valor top y left de la imagen del producto, y el valor top y left del carrito de compras, de esta manera, se puede lograr el movimiento a través de la función animate; var imgtop = img.offset().top;

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

3) escribir la función animate para lograr el efecto específico;
　cimg.appendTo($("body")).css({

    "position": "absolute",//Posición absoluta
    "opacity": "0.7
    "top": imgtop,
    "left": imgleft
   
    
    "left": carleft,
    "width": "40px",
    "height": "40px",
    "opacity": "0.3" //Transparencia
   }, 1000, function () {
    cimg.remove(); //Desaparición de la imagen
    $(".dnum").text(i); //Cambio de cantidad del carrito de compras
   });

El movimiento y el cambio simples lo logran.

Pero luego pensé, cada vez que recargues la página, el número del carrito de compras vuelve a 0, lo que no parece muy realista, así que pensé cómo lograr que el número del carrito de compras no cambie al recargar la página, investigué y resumí tres métodos:　

(1) guardar en la base de datos;　
(2) a través del método cookie;　
(3) a través de h5método localStorage;　

Finalmente, decidí probar el tercer método, porque quería probar h5nueva función (por curiosidad~~, también porque justo vi este método, así que lo probé), los datos almacenados con localStorage no tienen límite de tiempo. El día siguiente, la próxima semana o el próximo año, los datos aún estarán disponibles. Mi implementación específica: localStorage.getItem.

Bueno, ya he explicado todo lo que debía, aquí tienes todo el código de jq, si te gusta, dale un 'me gusta':

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);
   });
  }
 });
}); 

Efecto visual:

Esto es todo el contenido del artículo, esperamos que sea útil para su aprendizaje y que todos nos apoyen en el tutorial de alarido.

Declaración: El contenido de este artículo se ha obtenido de la red, es propiedad del autor original, el contenido se ha contribuido y subido por los usuarios de Internet, este sitio no posee los derechos de propiedad, no se ha realizado una edición humana y no asume ninguna responsabilidad legal. Si encuentra contenido sospechoso de infracción de derechos de autor, le invitamos a enviar un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, reemplace # con @) para denunciar y proporcionar evidencia relevante. Una vez confirmado, este sitio eliminará inmediatamente el contenido sospechoso de infracción.