JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】


Posted in Javascript onOctober 17, 2016

本文实例讲述了JS+HTML5实现的前端购物车功能插件。分享给大家供大家参考,具体如下:

最近做一个商城,需要用到一个简答的购物车功能,当然,后端实现比较容易,,这里重点还是讲一下前端的JS插件。

从源代码里面没看出来,它叫啥,好像叫:ctshop .js,不管啦,反正我提供下载就好,我做了一些简单的修复,支持了中文

这个插件使用了HTML5的新特效:storage ,就是游览器数据库的功能,这跟之前把数据存在cookies里面原理是相识的,这样的好处在于用户刷新页面,数据还在,,又不需要跟后端进行数据交互。

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>")
  }
},

需要兼容老版的游览器,需要在上面进行修改。下面是插件的配置文件

s = {
  currency: "$",
  currency_after_number: "false",
  permanent_cart_buttons: "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:{  //我新增的属性,主要是用来支持多语言
  clear:'清空',
  checked:'结算'
 },
};

实例化

$('body').ctshop({
  currency: '$',
  paypal: {
  currency_code: 'RMB'
 },
  empty_text:'您敢信,你的购物车居然是空的!',
});

很简单的吧。。

运行效果图如下:

JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】

完整实例代码点击此处本站下载

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
Jquery Ajax.ashx 高效分页实现代码
Oct 20 Javascript
js控制CSS样式属性语法对照表
Dec 11 Javascript
在javascript中如何得到中英文混合字符串的长度
Jan 17 Javascript
JavaScript中的ParseInt(&quot;08&quot;)和“09”返回0的原因分析及解决办法
May 19 Javascript
浅析JavaScript中作用域和作用域链
Dec 06 Javascript
angularjs2中父子组件的数据传递的实例代码
Jul 05 Javascript
关于vue-router的那些事儿
May 23 Javascript
vue axios数据请求及vue中使用axios的方法
Sep 10 Javascript
JSX在render函数中的应用详解
Sep 04 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
Sep 05 Javascript
深入浅析JavaScript中的in关键字和for-in循环
Apr 20 Javascript
javascript实现页面的实时时钟显示示例
Aug 06 Javascript
jquery checkbox的相关操作总结
Oct 17 #Javascript
JS动态添加选项案例分析
Oct 17 #Javascript
Java  Spring 事务回滚详解
Oct 17 #Javascript
使用jquery.qrcode.js生成二维码插件
Oct 17 #Javascript
js浏览器html5表单验证
Oct 17 #Javascript
使用开源工具制作网页验证码的方法
Oct 17 #Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
Oct 17 #Javascript
You might like
php正则
2006/07/07 PHP
Apache2 httpd.conf 中文版
2006/11/17 PHP
dedecms 批量提取第一张图片最为缩略图的代码(文章+软件)
2009/10/29 PHP
php中文字符串截取方法实例总结
2014/09/30 PHP
php中字符串和正则表达式详解
2014/10/23 PHP
PHP中定义数组常量(array常量)的方法
2014/11/17 PHP
php批量删除cookie的简单实现方法
2015/01/26 PHP
php实现查询功能(数据访问)
2017/05/23 PHP
PHP simplexml_load_file()函数讲解
2019/02/03 PHP
将HTML自动转为JS代码
2006/06/26 Javascript
javascript表单验证 - Parsley.js使用和配置
2013/01/25 Javascript
纯css+js写的一个简单的tab标签页带样式
2014/01/28 Javascript
全面兼容的javascript时间格式化函数(比较实用)
2014/05/14 Javascript
jQuery回调函数的定义及用法实例
2014/12/23 Javascript
超级简单实现JavaScript MVC 样式框架
2015/03/24 Javascript
js实现超简单的展开、折叠目录代码
2015/08/28 Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
2015/09/02 Javascript
深入浅析同源策略和跨域访问
2015/11/26 Javascript
概述VUE2.0不可忽视的很多变化
2016/09/25 Javascript
input file样式修改以及图片预览删除功能详细概括(推荐)
2017/08/17 Javascript
利用babel将es6语法转es5的简单示例
2017/12/01 Javascript
在Vue项目中引入腾讯验证码服务的教程
2018/04/03 Javascript
Layer弹出层动态获取数据的方法
2018/08/20 Javascript
使用Vue.js中的过滤器实现幂方求值的方法
2019/08/27 Javascript
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
2019/09/09 Javascript
python解析中国天气网的天气数据
2014/03/21 Python
用Python实现一个简单的能够发送带附件的邮件程序的教程
2015/04/08 Python
Python保存MongoDB上的文件到本地的方法
2016/03/16 Python
Python实例方法、类方法、静态方法的区别与作用详解
2019/03/25 Python
网络技术支持面试题
2013/04/22 面试题
金融专业个人的自我评价
2013/10/18 职场文书
不尊敬老师的检讨书
2014/12/21 职场文书
街道社区活动报告
2015/02/05 职场文书
物业前台接待岗位职责
2015/04/03 职场文书
婚宴领导致辞
2015/07/28 职场文书
「SHOW BY ROCK!!」“雫シークレットマインド”组合单曲MV公开
2022/03/21 日漫