SimpleCart(js)/安装
SimpleCart(js)安装
下载安装文件并将文件simpleCart.js 上传至网站的根目录,并且利用下面代码将它附加到任何需要使用到它的网页上 此时默认支付系统是PayPal,所以如果你有PayPal账号的话,你需要设置你的账号邮件地址:SimpleCart(js)使用
常用操作
添加商品至购物车里的货架或者使用下面代码:
href="javascript:;" jQuery1313806073171="8">Add To Cart
购物车链接和购物车摘要信息的设置:
如果你想在页面的任何地方显示关于购物车的信息,只需要新建一些标签,如div、span、a、h2等等;显示购物车里面商品的数目用simpleCart_quantity,显示货架的数目用simpleCart_total,添加结算以及清空购物车的链接可以用simpleCart_checkout和simpleCart_empty,具体代码如下:
如果你想显示购物车的全部信息则可使用下面代码:
其他功能的设置
结算方式设置:
设置你的邮箱地址,如果你使用PayPal这种支付方式的话:
simpleCart.email = "brett@wojodesign.com";
如果你想确保购物车会结算到PayPal,则用下面代码设置:
simpleCart.checkoutTo = PayPal;
simpleCart.email = "brett@wojodesign.com";
如果你想使用GoogleCheckout这种支付方式,那么不再需要设置邮箱,只需要你的GoogleCheckout Merchant ID:
simpleCart.checkoutTo = GoogleCheckout;
simpleCart.merchantId = "111111111111111";
货币设置:
系统默认的货币是USD(US dollars),如果你想更改的话,可以:
simpleCart.currency = GBP;
GoogleCheckout目前只支持GBP(英镑)和USD的的结算,PayPal可以支持多种货币,用户可以在网上搜索了解。更改货币选项,不仅仅对支付方式有影响,还会改变到网页上显示的价格单位符号。
税率设置:
如果你想设置税率的话,可以使用代码:
simpleCart.taxRate = 0.07;
如果你想在订单上显示你所设置的税率,可以:
其中,任何含有simpleCart_taxRate这一类的元素将会以百分比的方式显示税率,而如果含有simpleCart_taxCost类的话,则显示税后的金额。
运送方式的设置:
向购物车添加运输费用的方式有多种
第一种,你可以为你的购物车设置一些基本的运费计算:
simpleCart.shippingFlatRate = 10.00;
//为整个购物车添加基本的运输价格
simpleCart.shippingQuantityRate = 3.00;
//为购物车里每一件商品添加运输价格
simpleCart.shippingTotalRate = 0.05;
//添加运费占全部金额的百分比
这三个设置可以混合使用,都将会对最后的金额产生影响。
第二种,SimpleCart(js)允许你为某个商品建立一个运费区域,在这区域里,你可以为其添加运费信息。如果你使用的是货架的话,你可以为商品添加一个隐藏的区域:
或者使用add函数向购物车添加:
onclick="simpleCart.add('name=T-shirt','price=15.00','quantity=1','shipping=5.00');"
第三种,如果你需要运费的一些高级计算功能的话,可以使用CartItems原型对象:
CartItem.prototype.shipping=function(){
// we are using a 'size' field to calculate the shipping,
// so we first make sure the item has a size
if(this.size){
if( this.size == 'small' ){
return this.quantity*5.00;
}
else if( this.size == 'large') {
return this.quantity*7.50;
}
else {
return this.quantity*10.00;
}
}
else {
// use a default of $2.00 per item if there is no 'size' field
return this.quantity*2.00;
}
}
这里的this指的是item商品,而且使用参数'size'和'quantity'的乘积作为运费。因为并不是每一件商品都有大小这个参数,而且参数值不唯一,所以会先判断,如果一个商品没有size这一属性的话,则使用默认的值与quantity相乘。然后将运费添加至购物车里的每一件商品即可。
但是请注意,第二种方法的设置会覆盖这一函数的设置。
购物车格式设置
显示购物车信息:
//以百分比显示( ie 7% )
//显示税后的金额
//税后并且添加运费的金额
显示购物车里的商品信息:
//在页面显示购物车的全部信息
如果你想设置购物车信息显示的格式的话,可以在配置脚本里, 添加下面代码:
simpleCart.cartHeaders = [ "Name" , "Price" , "Quantity" , "Total" ];
simpleCart.cartHeaders = [ "Name", "Price", "Quantity_input" , "Total" ];
//商品的数量quantity以文本框的形式显示,使购买者可以手动输入修改
simpleCart.cartHeaders = ["Name" , "Price" , "decrement" , "Quantity" , "increment" , "Total" ];
//在数量的左右添加'-'和'+'按钮,方便数量值的修改
simpleCart.cartHeaders = ["Name", "Price", "decrement" , "Quantity" , "increment" , "Remove", "Total" ];
//添加了一个删除remove按钮,用户可以点击删除商品
simpleCart.cartHeaders = ["Name", "Price", "decrement_noHeader" , "Quantity" ,
"increment_noHeader" , "Remove_noHeader", "Total" ];
// 为某一列隐藏这一头部信息
simpleCart.cartHeaders = ["Image" , "Name" , "Price" , "decrement" , "Quantity" , "increment" , "Total" ];
//如果商品有图片展示的话,可以添加'Image'这一项
simpleCart.cartHeaders = ["Thumb_image" , "Name" , "Price" , "decrement" , "Quantity" , "increment" , "Total" ];
//商品的图片显示为缩略图
修改购物车的样式表:
//这是购物车各部分的层结构,用户可以根据class的值找到相应的脚本文件,进行修改,从而改变购物车的外观显示。
参考来源
http://simplecartjs.com/documentation.html#