Tenemos muchas formas de agregar productos al carrito de compras. La práctica habitual es hacer clic en el botón "Agregar al carrito", que saltará al carrito de compras. En el carrito de compras, puede hacer clic en el botón "Verificar" para verificar. Y hoy te presentaré una solución más amigable.
Ver el código fuente de descarga de demostración
Por defecto, el carrito de compras está oculto e invisible. Cuando el usuario hace clic en el botón Agregar al carrito, la información del producto se agregará al carrito. El carrito de compras aparecerá en la esquina inferior derecha de la página en forma de botón. Al hacer clic en el botón, expandirá el carrito de compras para mostrar la información del producto en el carrito. Al mismo tiempo, también puede eliminar o establecer los productos en el carrito. Los usuarios también pueden cerrar temporalmente sus carritos de compras y continuar comprando.
Estructura html
La estructura HTML incluye principalmente dos partes. La primera parte es el botón "Agregar al carrito de compras" en la lista de productos. Como se muestra en el siguiente código, utilizamos el atributo de datos:* para reunir la identificación, imagen, nombre, precio y otra información del producto.
<a href = "#0" data -price = "3669.00" data-propid = "1" data-proname = "Huawei p9" data-proimg = "img/huawei_p9.jpg"> Agregar al carro </a>
La segunda parte es el carrito de compras, la parte del carrito de compras incluye el carrito de compras de gatillo y la parte de las estadísticas del carrito de compras.
<viv> <a href = "#0"> Cart de compras <ul> <!-Cart Artems Count-> <li> 0 </li> <li> 0 </li> </ul> </a> <div> <div> <veader> <h2> compras de compra Parte, insertado dinámicamente por JavaScript-> </ul> </div> <footer> <a href = "#0"> <em> Current- ￥ <span> 0 </span> </em> </a> </toTer> </div> </div> </div>
La lista UL en el elemento Div.Body está vacía de forma predeterminada. Se utiliza para mostrar la información de la lista de productos del carrito de compras. Su estructura rugosa es la siguiente. Es insertado dinámicamente por JavaScript.
<div> <ul> <li> <div> <a href = "#0"> <img src = "img/pro.jpg"> </a> </div> <div> <hiv> <h3> <a href = "#0"> Nombre del producto </a> </h3> <span> ￥ 3999.99 </span> <hiv> <hiv <a href = "#0" for = "CD-Product-'+ProductId+'"> Número de elementos </seleting> <span> <span> x <i id = "CD-Product-'+proid+'"> 1 </i> </span> </span> </div> </div> </li> </ul> </div> </div> </iv> </li> </div> </div divir </div> </div> </div> </div> </li> </div> </div>
La parte CSS no se muestra en este artículo. Puede descargar el CSS/style.css en el código fuente para verlo.
Javascript
El código de este ejemplo se basa en jQuery, por lo que el archivo de la biblioteca jQuery debe cargarse por adelantado.
Cuando el usuario haga clic en el botón .Add-Button, active la función addProduct () e inserte la información del producto en .Body> ul.
función addProduct (proname, proid, precio, proimg) {var cantity = $ ("#cd-product-"+proid) .Text (); var select = '', productAdded = ''; if (cantidad == '' ') {var select =' <span> x <i id = "CD-Product-'+proid+'"> 1 </i> </span> '; var productAdDed = $ ('<ri> <iv> <a href = "#0"> <img src = "'+proimg+'"> </a> </div> <div> <div> <h3> <a href = "#0">'+proname+'</a> </h3> <span> ￥'+precio+'</span> <viv> <a a a href = "#0"> Eliminar </a> <div> <etiqueta for = "CD-Product-'+proid+'"> Número de archivos </label> '+select+' </div> </div> </li> '); CartList.Prepent (ProductAdded); } else {cantidad = parseInt (cantidad); $ ("#CD-Product-"+PROID) .html (cantidad+1); }}Lo anterior es la implementación basada en JavaScript del efecto agregada al carrito de compras con la descarga del código fuente. Espero que sea útil para todos. Si tiene alguna pregunta, déjame un mensaje y el editor responderá a todos a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!