We have many ways to add products to the shopping cart. The usual practice is to click the "Add to Cart" button, which will jump to the shopping cart. In the shopping cart, you can click the "Check" button to check. And today I will introduce you to a more friendly solution.
View the demo download source code
By default, the shopping cart is hidden and invisible. When the user clicks the Add to Cart button, the product information will be added to the cart. The shopping cart will appear in the lower right corner of the page in the form of a button. Clicking the button will expand the shopping cart to display the product information in the cart. At the same time, you can also delete or settle the products in the cart. Users can also temporarily close their shopping carts and continue shopping.
HTML structure
The HTML structure mainly includes two parts. The first part is the "Add to Shopping Cart" button in the product list. As shown in the following code, we use the data-* attribute to bring the product's id, picture, name, price and other information together.
<a href="#0" data-price="3669.00" data-proid="1" data-proname="Huawei P9" data-proimg="img/huawei_p9.jpg">Add to cart</a>
The second part is the shopping cart, the shopping cart part includes the trigger shopping cart and the shopping cart statistics part.cd-cart-trigger and the shopping cart body content part.cd-cart.
<div> <a href="#0"> Shopping cart<ul> <!-- cart items count --> <li>0</li> <li>0</li> </ul> </a> <div> <div> <header> <h2>Shopping cart</h2> <span>Deleted<a href="#0">Recover</a></span> </header> <div> <ul> <!-- This part is the cart product part, dynamically inserted by javascript --> </ul> </div> <footer> <a href="#0"><em>Current- ￥<span>0</span></em></a> </footer> </div> </div> </div>
The ul list in the div.body element is empty by default. It is used to display the product list information of the shopping cart. Its rough structure is as follows. It is dynamically inserted by Javascript.
<div> <ul> <li> <div> <a href="#0"><img src="img/pro.jpg"></a> </div> <div> <h3><a href="#0">Product name</a></h3> <span>￥3999.99</span> <div> <a href="#0">Delete</a> <div> <label for="cd-product-'+ productId +'">Number of items</label> <span> <span>x<i id="cd-product-'+proid+'">1</i></span> </span> </div> </div> </div> </li> </ul> </div> </div> </div> </div> </li> </div> </div> </div> </li> </div> </div> </div> </div> </li> </div> </div>
The CSS part is not displayed in this article. You can download the css/style.css in the source code to view it.
Javascript
The code of this example is based on jQuery, so the jQUery library file needs to be loaded in advance.
When the user clicks the button .add-button, trigger the function addProduct() and insert the product information into .body > ul.
function addProduct(proname,proid,price,proimg) { var quantity = $("#cd-product-"+proid).text(); var select='',productAdded=''; if(quantity==''){ var select = '<span>x<i id="cd-product-'+proid+'">1</i></span>'; var productAdded = $('<li><div><a href="#0"><img src="'+proimg+'"></a></div><div><h3><a href="#0">'+proname+'</a></h3><span>￥'+price+'</span><div><a href="#0">Delete</a><div><label for="cd-product-'+proid +'">Number of files</label>'+select+'</div></div></li>'); cartList.prepend(productAdded); }else{ quantity = parseInt(quantity); $("#cd-product-"+proid).html(quantity+1); } }The above is the JavaScript-based implementation of the effect added to the shopping cart with source code download. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support to Wulin.com website!