Added to the shopping cart based on JavaScript with source code download, shopping cart source code download

Added to the shopping cart based on JavaScript with source code download, shopping cart source code download

There are many ways to add items to the shopping cart. Generally, you can click the "add to shopping cart" button to jump to the shopping cart. You can click the "Settlement" button in the shopping cart for settlement. Today I will introduce you to a more friendly solution.

View demo download source code

By default, the shopping cart is hidden and invisible. When you click the add to shopping cart button, the product information will be added to the shopping cart. The shopping cart will appear in the lower-right corner of the page as a button, click the button to display the shopping cart. The information about the items in the shopping cart is displayed. You can also delete or settle the items in the shopping cart. You can also temporarily close the shopping cart to continue shopping.

HTML Structure

The HTML structure consists of two parts. The first part is the "add to shopping cart" button in the product list. The following code uses the data-* attribute to set the product id, images, names, prices, and other information are included.

<A href = "#0" class = "btn-success add-button" data-price = "3669.00" data-proid = "1" data-proname = "Huawei P9 "data-proimg =" img/Hangzhou wei_p9.jpg "> Add to shopping cart </a>

The second part is the shopping cart. The shopping cart part includes the trigger shopping cart and the shopping cart Statistics Section. cd-cart-trigger and the content section. cd-cart of the shopping cart.

<Div class = "cd-cart-container empty"> <a href = "#0" class = "cd-cart-trigger"> shopping cart <ul class = "count"> <! -- Cart items count --> <li> 0 </li> <li> 0 </li> </ul> </a> <div class = "cd-cart"> <div class = "wrapper"> 
The ul list in the div. body element is empty by default. It is used to display the commodity list information of the shopping cart. Its structure is as follows, which is dynamically inserted by Javascript.
<Div class = "body"> <ul> <li class = "product"> <div class = "product-image"> <a href = "#0">  </a> </div> <div class = "product-details"> 
The CSS section is not shown in this article. You can download css/style.css in the source code to view it.
Javascript
The code of this example is based on jQuery. Therefore, you need to load the jQUery library file in advance.
After the user clicks the button. add-button, the addProduct () function is triggered to insert the product information to. body> ul.
Function addProduct (proname, proid, price, proimg) {var quantity = $ ("# cd-product-" + proid ). text (); var select = '', productAdded =''; if (quantity = '') {var select = '<span class = "select"> x <I id = "cd-product-' + proid + '"> 1 </I> </span>'; var productAdded = $ ('<li class = "product"> <div class = "product-image"> <a href = "#0">  </a> </div> <div class =" product-details "> 
The above is a small series of JavaScript-based implementation added to the shopping cart effect with source code download, I hope to help you, if you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!