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

Source: Internet
Author: User

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.