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

 更新时间:2016年10月17日 10:53:37   作者:dengwz7788  
这篇文章主要介绍了JS+HTML5实现的前端购物车功能插件,结合完整实例形式分析了JS结合HTML5的storage特性存储数据实现购物车功能的相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下

本文实例讲述了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:'您敢信,你的购物车居然是空的!',
});

很简单的吧。。

运行效果图如下:

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

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结

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

相关文章

  • js快速与任意QQ号码建立临时对话

    js快速与任意QQ号码建立临时对话

    那时候在群里讨论的,吸纳很多人的方法与意见,修改而成的
    2008-10-10
  • JavaScript作用域链使用介绍

    JavaScript作用域链使用介绍

    作用域就是变量和函数的可访问范围,控制着变量和函数的可见性与生命周期,在JavaScript中变量的作用域有全局作用域和局部作用域
    2013-08-08
  • js序列化和反序列化的使用讲解

    js序列化和反序列化的使用讲解

    今天小编就为大家分享一篇关于js序列化和反序列化的使用讲解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • javascript+HTML5 canvas绘制时钟功能示例

    javascript+HTML5 canvas绘制时钟功能示例

    这篇文章主要介绍了javascript+HTML5 canvas绘制时钟功能,结合实例形式分析了javascript+HTML5 canvas数值运算、图形绘制与时间显示相关操作技巧,需要的朋友可以参考下
    2019-05-05
  • javascript上传图片前预览图片兼容大多数浏览器

    javascript上传图片前预览图片兼容大多数浏览器

    上传图片前预览图片这种效果应用比较广泛,实现的方也大同小异,下面为大家介绍下,在javascript中是如何实现的,感兴趣的朋友可以参考下
    2013-10-10
  • JS输出空格的简单实现方法

    JS输出空格的简单实现方法

    下面小编就为大家带来一篇JS输出空格的简单实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • JS实现小米轮播图

    JS实现小米轮播图

    这篇文章主要为大家详细介绍了JS实现小米轮播图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • 基于Bootstrap里面的Button dropdown打造自定义select

    基于Bootstrap里面的Button dropdown打造自定义select

    这篇文章主要介绍了基于Bootstrap里面的Button dropdown打造自定义select的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下
    2016-05-05
  • JavaScript使用百度ECharts插件绘制饼图操作示例

    JavaScript使用百度ECharts插件绘制饼图操作示例

    这篇文章主要介绍了JavaScript使用百度ECharts插件绘制饼图操作,结合实例形式分析了JavaScript使用百度ECharts插件绘制饼图的原理、步骤及相关操作注意事项,需要的朋友可以参考下
    2019-11-11
  • d3.js 地铁轨道交通项目实战

    d3.js 地铁轨道交通项目实战

    这篇文章主要介绍了d3.js 地铁轨道交通项目实战,本文通过实例代码项目截图给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-11-11

最新评论