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 相关文章推荐
firefox中用javascript实现鼠标位置的定位
Jun 17 Javascript
基于JQuery的多标签实现代码
Sep 19 Javascript
快速解决FusionCharts联动的中文乱码问题
Dec 04 Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
Sep 22 Javascript
jquery mobile开发常见问题分析
Jan 21 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
May 13 Javascript
BootStrap智能表单实战系列(三)分块表单配置详解
Jun 13 Javascript
浅析上传头像示例及其注意事项
Dec 14 Javascript
详解vue父子模版嵌套案例
Mar 04 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
Oct 12 Javascript
Typescript的三种运行方式(小结)
Sep 18 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 Vue.js
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
制作美丽的拉花
2021/03/03 冲泡冲煮
php switch语句多个值匹配同一代码块的实现
2014/03/03 PHP
PHP实现递归复制整个文件夹的类实例
2015/08/03 PHP
利用PHPExcel实现Excel文件的写入和读取
2017/04/26 PHP
PHP递归遍历文件夹去除注释并压缩php源代码的方法示例
2018/05/23 PHP
php ajax数据传输和响应方法
2018/08/21 PHP
JavaScript的public、private和privileged模式
2009/12/28 Javascript
关于JavaScript数组你所不知道的3件事
2016/08/24 Javascript
浅述Javascript的外部对象
2016/12/07 Javascript
javascript基础知识之html5轮播图实例讲解(44)
2017/02/17 Javascript
关于微信小程序bug记录与解决方法
2018/08/15 Javascript
详解离线安装npm包的几种方法
2018/11/25 Javascript
微信小程序module.exports模块化操作实例浅析
2018/12/20 Javascript
vue增加强缓存和版本号的实现方法
2019/05/01 Javascript
微信小程序扫描二维码获取信息实例详解
2019/05/07 Javascript
vue更改数组中的值实例代码详解
2020/02/07 Javascript
Python中模拟enum枚举类型的5种方法分享
2014/11/22 Python
Python的迭代器和生成器使用实例
2015/01/14 Python
Python实现购物车功能的方法分析
2017/11/10 Python
python之pandas用法大全
2018/03/13 Python
Django框架实现逆向解析url的方法
2018/07/04 Python
python+selenium实现简历自动刷新的示例代码
2019/05/20 Python
HTML5移动开发图片压缩上传功能
2016/11/09 HTML / CSS
基于HTML5 WebGL的3D机房的示例
2018/03/16 HTML / CSS
C语言怎样定义和声明全局变量和函数最好
2013/11/26 面试题
Linux如何压缩可执行文件
2014/03/27 面试题
鼓励运动员的广播稿
2014/02/08 职场文书
遥感技术与仪器求职信
2014/02/22 职场文书
校园学雷锋活动月总结
2014/03/09 职场文书
关于中国梦的演讲稿
2014/04/23 职场文书
“四风”问题对照检查材料思想汇报
2014/09/16 职场文书
小学生交通安全寄语
2015/02/27 职场文书
责任书范本大全
2015/05/11 职场文书
工作调动申请报告
2015/05/18 职场文书
教师节随笔
2015/08/15 职场文书
2019年手机市场的调研报告2篇
2019/10/10 职场文书