simpleCart的簡單使用及配置

simpleCart的功能就不用解釋，購物車，很6.官網上的說明太模糊了，還是GIHUb上的好一點：https://github.com/wojodesign/simplecart-js/

文章解決問題：在simpleCatrt的基礎上添加一個列名，並實現增刪改查。

文章的思路是：1.添加列名 2.給列名賦值 3.顯示列名 4.提交列名

 

1.了解其列表顯示的規則

這個地方的數據來中：simplecart.js這個文件里面

    cartColumns: [
        { attr: "name", label: "Name" }, { attr: "image", label: "image" }, //添加一個image屬性 { attr: "price", label: "Price", view: "currency" }, { view: "decrement", label: !1 }, { attr: "quantity", label: "Qty" }, { view: "increment", label: !1 }, { attr: "total", label: "SubTotal", view: "currency" }, { view: "remove", text: "Remove", label: !1 } ]

 

①.{ attr: "name" , label: "Name" } ，每一列代表一個字段,在這里配了在前台就是使用 class="item_name",才能在添加的使用將數據放入對象中

②.{ view: "increment" , label: false , text: "+" } 也有一些建在“視圖”,將創建一個專欄。例如,一個“+”的觀點:

③.這里面的數據代表前台能使用的字段名。比如

2.了解simpleCart的取值規則

                    <div class="col-md1 simpleCart_shelfItem"> //理解為，實例item化對象 
                        <a href="single.html" >
                            <img class="img-responsive item_image" src="images/pi5.png" alt="" />//添加item.image ，點擊item_add 字段會添加到單前對象中
                        </a>
                        <h3><a href="single.html" class="item_name">T-Shirt</a></h3> //添加 item.name
                        <div class="price">
                                <h5 class="item_price">$300</h5> //添加 item.price
                                <a href="#" class="item_add">Add To Cart</a> 
                                <div class="clearfix"> </div>
                        </div>                        
                    </div>

 

①.使用simplecart的時候最外層必須先實現 class="simpleCart_shelfItem"。用面向對象很好理解，先實力化一個模型，然后賦值給每個字段值。

②.item_{name} 相當於賦值的字段，而name的定義請看1的顯示規則。

 

3.前台顯示

            <div class="simpleCart_items">
                <!--數據加載前顯示的內容 開始-->
                <div style="text-align: center;">
                    購物車數據加載中...請稍待.
                </div>
                <!--數據加載前顯示的內容 結束-->
            </div>

z注意：但是最好在購物車的界面重新重新定義一下顯示列：simpleCart.cartColumns 因為在Js里面默認顯示如1一樣，英文顯示

在購物車html頁面重新實例化一下：

            <script type="text/javascript">
                simpleCart({
                    //Setting the Cart Columns for the sidebar cart display.
                    cartColumns: [
                        { attr: "image", label: "圖片展示", view: "image" },
                        //Name of the item
                        { attr: "name", label: "商品名稱" },
                        //Quantity displayed as an input
                        { attr: "quantity", label: "數量", view: "input" },
                        //Built in view for a remove link
                        { view: "remove", label: "操作", text: "移除", label: "操作" },
                        //Price of item
                        { attr: "price", label: "單價" },
                        //Subtotal of that row (quantity of that item * the price)
                        { attr: "total", label: "小計", view: "currency" }
                    ]
                });       
            </script>

3.數據傳送問題

數據的顯示和增加都解決了，然后數據怎么傳輸出去了？官方的那個方法可能基礎太差，我只需要簡單的post提交，所以自己重寫了

                var checkOut = function () {
                    var id = "";//Id編號
                    var price = "";//價格
                    var quantity = "";//數量
                    var url = "/checkout.aspx?optype=shop";
                    simpleCart.each(function (item) {
                        id += item.get("pid") + ",";
                        price += item.get("price") + ",";
                        quantity += item.get("quantity") + ",";
                    })
                    $.post(url, { id: id, price: price, quantity: quantity }, function (data) {
                        if (data == 0) {
                            alert("您下單成功");
                            simpleCart.empty();
                        }
                        else {
                            alert("下單失敗，請稍后再試");
                        }
                    })
                };

這樣只后台的數據就是：1,2,3,4,5,的形式，到后台解析下就好了：

            string[] id = baseOpen.requesStr("id").Split(new char[] { ',' }, StringSplitOptions.RemoveEmptyEntries);

 

5總結

技術擺在這里，能寫這么多，要更加努力。

simpleCart讓我理解的代碼模塊化，不要制造同樣的輪子，你要理解的是他的構造。為什么我寫了這么多東西，但是寫網站又要重新寫？因為沒有標准化。

1.bootstrap 這套框架好在，標准化了樣式，樣式做到了很好。我們只需要記住基本類名，就能在所有項目中調用。

2.simpleCart的思路我更加佩服，將類名動態化。在前台使用新的字段，我們在.js里面只需要加入字段。以空間換時間，這種代碼，換到哪里都能直接使用。