编辑“SimpleCart(js)/安装”

== SimpleCart(js)安装 ==
下载安装文件并将文件simpleCart.js 上传至网站的根目录，并且利用下面代码将它附加到任何需要使用到它的网页上
 <SCRIPT type=text/javascript src="simpleCart.js"></SCRIPT> 
此时默认支付系统是PayPal，所以如果你有[[PayPal]]账号的话，你需要设置你的账号邮件地址：
 <SCRIPT type=text/javascript>
   simpleCart.email = "you@yours.com";
 </SCRIPT>
== SimpleCart(js)使用 ==
=== 常用操作 ===
'''添加商品至购物车里的货架'''
 <nowiki><DIV class=simpleCart_shelfItem sizcache="1" sizset="9"> 
 <H2 class=item_name>Awesome T-Shirt</H2> 
 <SPAN class=item_price>$35.95</SPAN>
 <INPUT class=item_quantity value=1> 
 <A class=item_add href="javascript:;" jQuery1313806073171="6">Add to Cart</A> 
 </DIV> </nowiki>

或者使用下面代码：
  <A onclick="simpleCart.add( 'name=Awesome t-shirt' , 'price=35.95' , 'quantity=1' );" 
  href="javascript:;" jQuery1313806073171="8">Add To Cart</A> 
'''购物车链接和购物车摘要信息的设置：'''

如果你想在页面的任何地方显示关于购物车的信息，只需要新建一些标签，如div、span、a、h2等等；显示购物车里面商品的数目用simpleCart_quantity,显示货架的数目用simpleCart_total，添加结算以及清空购物车的链接可以用simpleCart_checkout和simpleCart_empty,具体代码如下：

 <nowiki><SPAN class=simpleCart_quantity></SPAN>
 <DIV class=simpleCart_total></DIV>
 <A class=simpleCart_checkout href="javascript:;" jQuery1313806073171="9">Checkout</A> 
 <A class=simpleCart_empty href="javascript:;" jQuery1313806073171="10">Empty</A></nowiki>

如果你想显示购物车的全部信息则可使用下面代码：
  <nowiki><DIV class=simpleCart_items></DIV></nowiki>
=== 其他功能的设置 ===
 <SCRIPT type=text/javascript>
   //在这里添加所有的配置选项信息
 </SCRIPT> 
'''结算方式设置:'''

设置你的邮箱地址，如果你使用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;
如果你想在订单上显示你所设置的税率，可以：

  <nowiki><DIV class=simpleCart_taxRate></DIV> 
  <DIV class=simpleCart_taxCost></DIV>
  </nowiki>

其中，任何含有simpleCart_taxRate这一类的元素将会以百分比的方式显示税率，而如果含有simpleCart_taxCost类的话，则显示税后的金额。

'''运送方式的设置：'''

向购物车添加运输费用的方式有多种

第一种，你可以为你的购物车设置一些基本的运费计算：
 simpleCart.shippingFlatRate = 10.00; 
 //为整个购物车添加基本的运输价格
 simpleCart.shippingQuantityRate = 3.00; 
 //为购物车里每一件商品添加运输价格   
 simpleCart.shippingTotalRate = 0.05; 
 //添加运费占全部金额的百分比
这三个设置可以混合使用，都将会对最后的金额产生影响。

第二种，SimpleCart(js)允许你为某个商品建立一个运费区域，在这区域里，你可以为其添加运费信息。如果你使用的是货架的话，你可以为商品添加一个隐藏的区域：
    <nowiki><DIV class=simpleCart_ShelfItem sizcache="1" sizset="17">
    <H2 class=item_name>T-shirt</H2>
    <SPAN class=item_price>$15.00</SPAN></nowiki>    
    <INPUT class=item_quantity value=1> 
    <!-- field for item shipping cost -->   
    <INPUT class=item_shipping value=5.00 type=hidden> 
    <A class=item_add href="javascript:;" jQuery1313812013546="14">add to cart</A> 
    </DIV> 
或者使用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相乘。然后将运费添加至购物车里的每一件商品即可。

但是请注意，第二种方法的设置会覆盖这一函数的设置。
=== 购物车格式设置 ===
'''显示购物车信息：'''
 <nowiki><SPAN class=simpleCart_quantity></SPAN>   
         <SPAN class=simpleCart_taxRate></SPAN>   
           //以百分比显示( ie 7% )  
         <SPAN class=simpleCart_taxCost span < sizcache="1" sizset="19">   
           //显示税后的金额
          <SPAN class=simpleCart_finalTotal></SPAN>   
           //税后并且添加运费的金额
  </nowiki>
'''显示购物车里的商品信息：'''
   <nowiki><DIV class=simpleCart_items></DIV></nowiki> 
   //在页面显示购物车的全部信息  
如果你想设置购物车信息显示的格式的话，可以在配置脚本里，<SCRIPT type=text/javascript>//在这里添加所有的配置选项信息</SCRIPT> 添加下面代码：
  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" ]; 
    //商品的图片显示为缩略图

'''修改购物车的样式表：'''

 <nowiki><DIV class=simpleCart_items sizcache="1" sizset="22"><DIV class=cartHeaders><DIV class=itemName>Name</DIV>
 <DIV class=itemSize>Size</DIV> <DIV class=itemPrice>Price</DIV><DIV class=itemQuantity>Quantity</DIV> 
 <DIV class=itemTotal>Total</DIV></DIV><DIV class=itemContainer sizcache="1" sizset="22"> 
 <DIV class=itemName>Zebra</DIV><DIV class=itemSize>Small</DIV><DIV class=itemPrice>$199000.00</DIV> 
 <DIV class=itemQuantity>11</DIV><DIV class=itemremove sizcache="1" sizset="22"> 
 <A onclick="simpleCart.items ['c5'].remove();" href="javascript:;" jQuery1313812013546="19">Remove</A></DIV> 
 <DIV class=itemTotal>$2189000.00</DIV></DIV></DIV>
 </nowiki>
 //这是购物车各部分的层结构，用户可以根据class的值找到相应的脚本文件，进行修改，从而改变购物车的外观显示。
== 参考来源 ==
http://simplecartjs.com/documentation.html#

[[category:SimpleCart(js)]]