Follow the development of e-commerce websites-follow the development of products and table structures-follow the development of e-commerce websites-simple and easy-to-use jquery plug-ins -lazyload)"

Preface

 

The four most basic modules for developing an e-commerce website are the product module, shopping cart module, order module, and personal center module, except for the personal center module, the other three modules are necessary (the minimum browsing item is added to the shopping cart order ). In my first blog post, the product module focuses on the development of e-commerce websites. As mentioned in "Product table structure", what I want to write today is the shopping cart module, JS object-oriented + jquery, it supports most e-commerce websites, hoping to inspire some people who are interested in or preparing for this line.

 

The article mainly describes the ideas and explains the code of the important part. The source code will be included at the end.

Reference

Mainly used plug-ins $. Cookie this plug-in has been introduced in my previous article to focus on e-commerce website development-simple and easy-to-use jquery plug-in-lazyload

Ideas

 

Step 1: declare the shopping cart object

Code

Cart = {    Product: new Array(),    TotalPrice: 0,    Limit: 40,    Add: function (product) {        //...    },    FindProductBySku: function (sku){        //...    },    Account: function () {        //...    },    SaveCookie: function () {        //...    },    ClearCookie: function () {        //...    },    Load: function () {        //...    }}

There are many attributes and methods in the shopping cart, such as product set product; total price totalprice; limit; add a commodity to the shopping cart to add; find whether there is a commodity findproductbysku in the shopping cart; calculate the price account; save the product information to the savecookie in the cookie, clear the clearcookie in the shopping cart, and load the shopping cart. There are other methods that will not be described one by one. If you are interested, you can view them in the source code.

 

Step 2: add to shopping cart

The add operation is performed by adding a shopping cart. The parameter is the product object, and the product object also has its own attributes, including name, encoding SKU, Price, number of added count, attribute, when adding a product, you must declare a product object and assign values to each property of the product. The Code is as follows:

VaR Product = {}; var para = '2017, item X, 201210120006, 1, red'; product. SKU = para. split (',') [0]; product. name = para. split (',') [1]; product. price = para. split (',') [2]; product. count = para. split (',') [3]; product. attribute = para. split (',') [4]; cart. add (product );

The main idea of adding a commodity is to determine whether there is a commodity in the shopping cart. If not, display the shopping cart and add the commodity. If yes, determine whether the commodity exists in the shopping cart (Use method: findproductbysku ), if yes, the quantity is increased. If no, the quantity is added to the shopping cart.

 

Step 3: calculate the price and quantity

The total price is calculated by traversing the product set and then adding the total number, that is, the number of product sets. This step is relatively simple.

Code:

Account: function () {var allamount = 0.0; For (VAR I = 0; I <this. product. length; I ++) {var price = This. product [I]. price; // unit price var COUNT = This. product [I]. count; // unit price var rowamount = parsefloat (price) * parsefloat (count); // a single total price allamount + = rowamount;} This. totalprice = parsefloat (allamount ). tofixed (1 );}

 

Step 4: Save to Cookie

To ensure that the shopping cart is global, the product information must be recorded in the cookie for a period of three days. The principle is that each product records one item, which takes into account the size limit of the browser cookie, we also need to take into account the number of cookies, so we will also impose a number limit when we add them to the shopping cart. Each cookie records all attributes of the product. Each attribute is separated by a symbol ^, which is used for parsing during loading, use the ^ symbol because some product names may also contain some commonly used punctuation marks. At the same time, to display the number of shopping carts in a global real-time manner, you can add an ID as the cartcount element in the general header of the website, so that each added item will be displayed accordingly.

Code:

Savecookie: function () {for (VAR I = 0; I <this. product. length; I ++) {var productsku = This. product [I]. SKU; // product code var productname = This. product [I]. name; // product name var productprice = This. product [I]. price; // product unit price var productcount = This. product [I]. count; // number of products var productattribute = This. product [I]. attribute; // product property var productinfo = productsku + "^" + productname + "^" + productprice + "^" + productcount + "^" + productattribute $. cookie ("productinfo" + I, productinfo, {expires: 3, path: '/'});} $. cookie ("cartcount", this. product. length, {expires: 3, path: '/'}); $. cookie ("carttotleprice", this. totalprice, {expires: 3, path: '/'}); $ ("# cartcount" ).html (this. product. length );}

Others:

Another load method is called when you enter the shopping cart page or the shopping cart operation page (commodity list page). The Code is as follows:

Load: function () {var cartcount = $. Cookie ("cartcount")-0; If (cartcount! = 0) {for (VAR I = 0; I <cartcount; I ++) {var productinfo = $. cookie ("productinfo" + I); var Product = {}; var temp = ""; var productitemprice = ""; product. SKU = productinfo. split ('^') [0]; // product code. name = productinfo. split ('^') [1]; // product name. price = productinfo. split ('^') [2]; // product unit price. count = productinfo. split ('^') [3]; // number of products. attribute = productinfo. split ('^') [4]; // product property this. product. push (product);} cart. account ();}}

Here are two pages to implement the shopping cart function. If you are interested, you can try it out.

Click here: Shopping Cart page, product list page

Click here to download

 

Recruitment is required for the Organization. The following is the job description for recruitment.

Job description:
1. 1 year or above software development experience, good coding skills;
2. Familiar with BS/Cs framework program development;
3. Profound Understanding of ASP. NET and C #. Familiar with web development technologies such as JavaScript, HTML, XML, CSS + div;
4. proficient in SQL language and SQL Server;
5. Have a deep understanding of object-oriented programming;
6. development of management information systems, enterprise ERP systems or business websites with relevant experience is preferred;
7. anyone familiar with jquery is preferred;
8. You must have strong self-learning skills, be steadfast, and have a good sense of teamwork;
9. Unlimited education, unlimited education, unlimited age for men and women;

According to the situation of each person, we will discuss the treatment in detail.

Applicant company: subordinate units of Jiangsu Radio and Television Group
Location: No. 280, Zhujiang Road, Xuanwu District, Nanjing
Contact: 80692416@qq.com (send your resume to your mailbox, reply within 1 hour of work day)