Example of the front-end shopping cart function plug-in implemented by JS + HTML5 [Download demo source code] And html5demo

Example of the front-end shopping cart function plug-in implemented by JS + HTML5 [Download demo source code] And html5demo

This article describes the front-end shopping cart function plug-in implemented by JS + HTML5. We will share this with you for your reference. The details are as follows:

Recently, a shopping mall needs a simple Shopping Cart function. Of course, backend implementation is relatively easy. Here we will focus on the front-end JS plug-ins.

I can't see it from the source code. It's called ctshop. js. No matter what it is, I can download it. I made some simple fixes and supported Chinese characters.

This plug-in uses the new HTML5 special effect storage, which is the function of the browser database. This is familiar with the principle of storing data in cookies. The advantage is that users refresh the page, the data is still there and does not need to interact with the backend.

create_storage_cart: function() { for (var t = this, e = t.storage_get(), a = 0, n = e.items.length; n > a; a++) {  var i = e.items[a].id,  r = e.items[a].name,  s = e.items[a].price,  c = e.items[a].input;  t.cart.append('<li class="animated ' + t.settings.animation + '" data-id=' + i + "><span class=" + t.settings.cart + "-name>" + r + "</span><span class=" + t.settings.cart + "-price>" + s + '</span><input type="number" min="1" value="' + c + '" class=' + t.settings.cart + "-input><button class=" + t.settings.cart + "-remove>x</button></li>")  }},

The browser must be compatible with the old version and must be modified on it. The following is the plug-in configuration file

S = {currency: "$", currency_after_number: "false", priority: "false", display_total_value: "true", permanent_total_value: "false", animation: "fadeIn ", empty_disable: "false", empty_text: "Your cart is empty", paypal: {business: "office@createit.pl", currency_code: "USD", lc: "EN", cpp_cart_border_color: "", cpp_payflow_color: "", no_note: "0", no_shipping: "0", "return": "", cancel_return: ""}, lang: {// my new attributes are mainly used to support multi-language clear: 'clear', checked: 'clear '},};

Instantiation

$ ('Body '). ctshop ({currency: '$', paypal: {currency_code: 'RMB'}, empty_text: 'You can believe that your shopping cart is empty! ',});

That's easy ..

Run the following command:

Click here for the complete instance codeDownload from this site.