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 相关文章推荐
JavaScript 指导方针
Apr 05 Javascript
JS实多级联动下拉菜单类,简单实现省市区联动菜单!
May 03 Javascript
jQuery学习笔记[1] jQuery中的DOM操作
Dec 03 Javascript
JavaScript 选中文字并响应获取的实现代码
Aug 28 Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
Nov 25 Javascript
js简单实现图片延迟加载的方法
Jul 19 Javascript
BootStrap网页中代码显示用法详解
Oct 21 Javascript
通过命令行生成vue项目框架的方法
Jul 12 Javascript
vue-router 源码实现前端路由的两种方式
Jul 02 Javascript
JS实现获取自定义属性data值的方法示例
Dec 19 Javascript
vue favicon设置以及动态修改favicon的方法
Dec 21 Javascript
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
Sep 22 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获取当前网址及域名的实现代码
2013/06/23 PHP
php函数指定默认值方法的小例子
2013/12/04 PHP
PHP获取MySql新增记录ID值的3种方法
2014/06/24 PHP
php结合mysql与mysqli扩展处理事务的方法
2016/06/29 PHP
使用laravel的migrate创建数据表的方法
2019/09/30 PHP
一次失败的jQuery优化尝试小结
2011/02/06 Javascript
ie浏览器使用js导出网页到excel并打印
2014/03/11 Javascript
详解JavaScript逻辑And运算符
2015/12/04 Javascript
jQuery设置Cookie及删除Cookie实例分析
2016/04/15 Javascript
基于node实现websocket协议
2016/04/25 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
2016/06/16 Javascript
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
2017/07/12 jQuery
JS库之Three.js 简易入门教程(详解之一)
2017/09/13 Javascript
nodejs实现爬取网站图片功能
2017/12/14 NodeJs
JavaScript函数定义方法实例详解
2019/03/05 Javascript
详解Vue中的基本语法和常用指令
2019/07/23 Javascript
JavaScript利用键盘码控制div移动
2020/03/19 Javascript
[02:39]DOTA2国际邀请赛助威团西雅图第一天
2013/08/08 DOTA
[01:34]DAC2018主赛事第四日五佳镜头 Gh巨牙海民助Miracle-死里逃生
2018/04/07 DOTA
获取Django项目的全部url方法详解
2017/10/26 Python
python对常见数据类型的遍历解析
2019/08/27 Python
TensorFlow tf.nn.conv2d实现卷积的方式
2020/01/03 Python
python传到前端的数据,双引号被转义的问题
2020/04/03 Python
浅谈Python 参数与变量
2020/06/20 Python
Python 多进程原理及实现
2020/12/21 Python
匡威英国官网:Converse英国
2018/12/02 全球购物
资源环境与城市管理专业推荐信
2013/11/30 职场文书
社区学习雷锋活动总结
2014/04/25 职场文书
爱心捐款倡议书范文
2014/05/12 职场文书
离婚协议书怎么写2014
2014/09/30 职场文书
运动会加油稿20字
2014/11/15 职场文书
2016创先争优活动党员公开承诺书
2016/03/24 职场文书
2016年村党支部公开承诺书
2016/03/24 职场文书
2019财务管理制度最新范本!
2019/07/09 职场文书
2019年自助餐厅创业计划书模板
2019/08/22 职场文书
SQL Server中常用截取字符串函数介绍
2022/03/16 SQL Server