電子商取引サイトの開発に注目-『純JSが書いたリフレッシュなしリアルタイム同期ショッピングカートシステム』

前言
 
電子商取引サイトを開発する上で考慮すべき最も基本的な4つのモジュールは、製品モジュール、ショッピングカートモジュール、注文モジュール、個人センターモジュールであり、個人センターモジュールを除いた3つのモジュールが必要である(少なくとも商品を閲覧してショッピングカートに加入して注文する).製品モジュールは私の第1編の博文E-コマースWebサイトの開発に注目-『製品表構造』ですでに言及して、今日書くのはショッピングカートのモジュールで、JSは対象+Jqueryに向かって、ほとんどの電子商取引のウェブサイトを支持して、いくつかこの行を準備してあるいはこの行に興味のある学生にいくつか啓発することを望んでいます.
 
文章は主に構想を説明し、重要な部分のコードを説明し、最後にソースコードを添付します.
参照
主に使用するプラグイン$.クッキーというプラグインは私の前の文章で電子商取引のウェブサイトの開発に関心を持つ-《簡単で使いやすいJQUERYプラグイン--ピクチャーの遅延ロードプラグイン(lazyload)》を紹介しました.
構想
 
ステップ1:カートオブジェクトの宣言
コード#コード#

Cart = {
    Product: new Array(),
    TotalPrice: 0,
    Limit: 40,
    Add: function (product) {
        //...
    },
    FindProductBySku: function (sku){
        //...
    },
    Account: function () {
        //...
    },
    SaveCookie: function () {
        //...
    },
    ClearCookie: function () {
        //...
    },
    Load: function () {
        //...
    }
}

ショッピングカートには製品集合Productなどの多くの属性と方法があります.総価格TotalPrice;個数制限Limit;ショッピングカートAddに商品を追加します.ショッピングカートにある商品があるかどうかを検索します.価格計算Account;製品情報をクッキーに保存するSaveCookie;カートをクリアしたClearCookie;カートのロード.他にもいくつかの方法がありますが、一つ一つ紹介しないで、興味のあるものはソースコードで見ることができます.
 
第二歩:ショッピングカートに加入する
カートに追加するには、メソッドAddによって操作されます.パラメータはproductオブジェクト、productオブジェクトにも独自のプロパティがあります.名前name、コードsku、価格price、追加された個数count、プロパティattributeがあります.追加するときは、まずproductオブジェクトを宣言し、productの各プロパティに値を割り当てます.コードは次のとおりです.

var product = {};
var para=’201210120006,  X,480,1,  ’;
                product.sku = para.split(',')[0];
                product.name = para.split(',')[1];
                product.price = para.split(',')[2];
                product.count = para.split(',')[3];
                product.attribute = para.split(',')[4];
                Cart.Add(product);

商品を追加する主な考え方は、カートに商品があるかどうかを判断し、ない場合は、カートを表示し、商品を追加することです.ある場合は、カートにその商品が存在するか否かを判断し(使用方法:FindProductBySku)、存在する場合は数量が増加し、存在しない場合はカートに追加する.
 
ステップ3:価格と個数の計算
総価格の計算は,製品集合を遍歴して加算したもので,総個数,すなわち製品集合の個数であり,比較的簡単である.
コード:

Account: function () {
        var allamount = 0.0;
        for (var i = 0; i < this.Product.length; i++) {
            var price = this.Product[i].price; //  
            var count = this.Product[i].count; //  
            var rowamount = parseFloat(price) * parseFloat(count); //    
            allamount += rowamount;
        }
        this.TotalPrice = parseFloat(allamount).toFixed(1);
        
    }

 
ステップ4:クッキーに保存
カートが全局的であることを保証するために、製品情報はクッキーに記録しなければならない.期限は3日で、原則として各製品に1本記録する.これはブラウザクッキーの大きさの制限を考慮し、クッキーの個数の制限も考慮しなければならないので、カートに加入する際にも一つ一つ数の制限を行う.各クッキーは製品のすべての属性を記録し、各属性は記号^で区切られ、記号で区切られるのはロード時に解析するためであり、^記号を使うのは製品の名前にもよく使われる句読点が現れる可能性があるからである.同時に、ショッピングカートの数をグローバルにリアルタイムで表示するために、ウェブサイトで通用する頭部にIDをcartcount要素として追加することで、商品を追加するたびに対応する表示を行うことができます.
コード:

SaveCookie: function () {
        for (var i = 0; i < this.Product.length; i++) {
            var productSku = this.Product[i].sku; //    
            var productName = this.Product[i].name; //    
            var productPrice = this.Product[i].price; //    
            var productCount = this.Product[i].count; //    
            var productAttribute = this.Product[i].attribute; //    
            var productInfo = productSku + "^" + productName + "^" + productPrice + "^" + productCount + "^" + productAttribute
            $.cookie("productInfo" + i, productInfo, { expires: 3, path: '/' });
        }
        $.cookie("cartCount", this.Product.length, { expires: 3, path: '/' });
        $.cookie("cartTotlePrice", this.TotalPrice, { expires: 3, path: '/' });
        $("#cartcount").html(this.Product.length);
}

その他:
もう1つのLOADメソッドは、カートページまたはカート操作ページ(商品リストページ)にアクセスするときに呼び出されます.コード:

Load: function () {
        var cartCount = $.cookie("cartCount") - 0;
        if (cartCount != 0) {
            for (var i = 0; i < cartCount; i++) {
                var productInfo = $.cookie("productInfo" + i);
                var product = {};
                var temp = "";
                var productItemPrice = "";

                product.sku = productInfo.split('^')[0]; //    
                product.name = productInfo.split('^')[1]; //    
                product.price = productInfo.split('^')[2]; //    
                product.count = productInfo.split('^')[3]; //    
                product.attribute = productInfo.split('^')[4]; //    
                this.Product.push(product);
            }
            Cart.Account();
        }
       
    }

基本的な方法はこれだけで、ここではショッピングカートの機能を実現するために2つのページを作って、興味のある学生は体験することができます.
ここをクリック:カートページ2商品リストページ
ここをクリックしてダウンロード
 
会社は募集する必要があります.以下は募集の職階の説明です.
職位説明:1、1年以上のソフトウェア開発経験があり、良好な符号化能力がある.2、BS/CSフレームワークの下でプログラム開発を熟知している;3、ASPを深く理解する.NETとC#、JavaScript、HTML、XML、CSS+divなどのweb開発技術を熟知しています.4、SQL言語に精通し、SQL Serverを熟練している.5、対象向けプログラムのプログラミングを深く理解する.6、管理情報システム、企業ERPシステム或いは経営類ウェブサイトを開発したことがあり、関連経験がある者を優先する.7、Jqueryに詳しい者優先;8、強い独学能力を持っていなければならない.9、学歴は問わず、男女は問わず、年齢は問わない.
待遇については、各人の都合により、详しく面谈する.
応募会社:江蘇広電グループの部下の職場:南京市玄武区珠江路280号連絡先:[email protected](履歴書をメールボックスに送ればいいので、平日1時間以内に返信してください)