簡單好用的JavaScript購物車程式─智邦公益電子報─台灣最大公益電子報發行中心

第三階段【網頁製作系列報導】電子報【各種程式選用】

實用程式彙報

第二篇
簡單好用的JavaScript購物車程式

壹、介紹理由：
⊙您為找不到好用、便宜的線上購物車系統苦惱嗎？
⊙您看過線上購物車，可以做到如此簡單、實用嗎？
⊙為利大多數人測試，本程式採用IE內建mailto寄信程式(Outlook Express 軟體)。
⊙本程式修改極為容易，用任何網頁編輯器打開HTML及JS檔，依指示修改即可。
⊙這隻完整線上購物車程式，要免費送給您，相信嗎？
⊙本站六大主題教材，自即日起也全部免費送給您，請把握難得機會，輕鬆完整取得。
⊙不用懷疑，全部係金ㄟ，歡迎立即測試及索取，滿意後就帶回家吧。
⊙本程式取自國外 http://javascript.internet.com 網站。
⊙雖然好用，但本程式還是有以下這些缺點(有些可以改良，但要發些時間研究)。

貳、本程式之缺點：
⊙在產品頁(buy.htm檔案)按下[確定送出]後，很可惜訂購內容(產品名稱)不能使用中文。
⊙在訂單頁(order.htm檔案)，無法修改數量必需退回前一頁重選。
⊙在訂單頁(order.htm檔案)，無法刪除產品項目或數量。
⊙本程式無法設訂訂購數量欄位，提供數量填選。
⊙如果您的產品很多，產品頁(buy.htm檔案)是無法分頁或單項分別設定。
⊙本程式無法設訂運費、郵資多寡及是否含稅等特殊條件。
⊙原程式未付CGI等寄信程式，您只能收到訂購英文信。
⊙以上這些原本就有的缺點，有興趣自己研究看看吧！

參、使用mailto寄信表單缺點：
⊙客戶端的IE瀏覽器，必需指定開啟信箱。
⊙訂戶雖已送出訂單，但確不知道是否順利完成訂購。
⊙這種情況下，訂戶無意間也可能連續送出多次相同訂單信件。
⊙傳統的Mailto寄信，很容易暴露自己的信箱。
⊙因此信箱也就容易被人攻擊，造成不必要困難。
⊙使用IE內建mailto寄信表單，您收到的信會是如下結果(出現英文參數值)：
item1num=1A //項目1A
item1dsc=hat //產品hat(帽子)
item1cst=$15元 //產品單價
item2num=2A //項目2A
item2dsc=coat //產品coat(上衣)
item2cst=$80元 //產品單價
item3num=3A //項目3A
item3dsc=bodyclothes //產品bodyclothes(內衣)
item3cst=$45元 //產品單價
grandtotal=$140元 //合計總價
真實姓名=李文能
電子信箱=your@mail.com.tw

肆、程式主要功能：
⊙為保持原作者創作精神，我只修改外觀及完成中文化部份。
⊙本購物車屬於簡單型，採購程序完整，算是很實用的購物車。
⊙本購物車採JavaScript程式，只要修改部份資料即可使用。
⊙本購物車可免除客戶自己填項目等資料。
⊙本購物車可自行運算(累計)合計金額。
⊙本購物車適合產品數量不多及數量固定之網站。
⊙其他相關運作參數變更，請參照本報導的指引去修改就行。

伍、HTML網頁修改說明：
請用任何網頁編輯器打開HTML檔，依指示修改即可。
建議：我是使用電腦內建的記事本(Notepad)，比較習慣。
01.修改產品訂購頁(buy.htm檔案)：

<form name=theForm action="order.htm">....</form>

<input type=checkbox name=item1A value="1A-hat*15$">
item是指後面1A的產品編號。
value的值是要傳給order.htm檔用的，1A是指產品編號-hat是指產品名稱*15$是指產品價格。
其他欄位為HTML語法，我就不再詳述了。
您有幾個產品就設幾個<input .... >。
注意：name的item不能改，value的"-"、"*"、"$"不能改。
02.修改產品訂單頁(order.htm檔案)：

<form ... action="mailto:your@mail.com.tw" ... ENCTYPE="text/plain">....</form>
本程式採用IE內建mailto寄信程式(Outlook Express 軟體)，當然您也可以改用CGI等程式。
注意：<form ....>....</form>，要放於JavaScript程式decodeString();之間。
注意：記得將your@mail.com.tw，改為自己的。

<script language="JavaScript">

</script>
注意：這個位置很重要，它是顯示客戶所選的訂單內容檔案，不用修改。

陸、JS程式修改說明：
請用任何網頁編輯器打開JS檔，依指示修改即可。
建議：我是使用電腦內建的記事本(Notepad)，比較習慣。
01.欄位偵測(ckjs.js)檔案，原則不用修改。
本程式位於buy.htm檔案<HEAD>...</HEAD>內，如下：

<SCRIPT SRC="ckjs.js"></SCRIPT>

注意：除非您修改了name的編號(1A)及產品數量。
02.修改主程式buy.js檔案：
本程式位於buy.htm檔案<HEAD>...</HEAD>內，如下：

<SCRIPT SRC="buy.js"></SCRIPT>

其實您只要修改客戶訂單欄位就可以了，也可以改寫在order.htm檔案內。
請用任何網頁編輯器打開，查看檔案內的詳細備註(//...)說明。
注意：如果不懂JavaScript程式，建議先修改HTML及中文部份。
注意：凡有//...以下為程式運作設定，請不要修改文字處，請特別小心喔。

柒、安裝步驟
01.請先下載buy.zip檔案(7KB)，解壓縮後依本篇(say.txt)說明檔去修改或套用。
建議：您也可以一次輕鬆完整免費取得本站六大主題教材(含更多購物車範例)，一起帶回家吧。
02.裡面共計5檔案，buy.htm、ckjs.js、order.htm、buy.js及say.txt。
03.首先打開訂購頁(buy.htm)檔案，並依裡面註解或//...去修改。
注意：修改時特別小心 name & value 值的設定便可。
04.除非您修改了name的編號(1A)及產品數量，否則欄位偵測程式(ckjs.js)不用修改。
05.打開訂單頁(order.htm)檔案，並依裡面註解或//...去修改。
注意：將寄信表單的action="mailto:your@mail.com.tw"，改為自己的。
06.打開主程式(buy.js)檔案，並依裡面註解(//...)去修改。
07.妥善儲存後開始測試及收信。

捌、其他運用(可付加功能)：
⊙可以於產品訂購頁(buy.htm)，自己加入產品圖案。
⊙訂購人詳細資料也可以寫在產品訂購頁(order.htm)內。
⊙訂購頁(buy.htm)可使用CGI等程式接收中文內容訂單。
⊙可使用CGI等程式將訂單回傳給客戶(教材內已免費提供)。
⊙可使用CGI等程式出現感謝或傳送確認畫面(教材內已免費提供)。
⊙可使用CGI等程式建立後端客戶資料庫。
⊙可使用JavaScript程式做前後表單的欄位偵測(本範例只做前表單的欄位偵測)。

玖、注意事項：
⊙想學習或自行套用本程式者，基本上對HTML語法及JavaScript程式語言要有一定認知。
⊙本測試我使用IE內建mailto寄信表單及假的信箱，我是收不到的，請放心吧！
⊙修改時記得將寄信表單的action="mailto:your@mail.com.tw"，改為自己的。
⊙如果不懂JavaScript程式，建議不要修改我未提及之地方。
⊙我只能告訴您如何套用本購物車程式，並無法進一步教您深入修改或創作。
⊙本程式取自國外免費購物車，雖經中文化，但原始著作權仍歸原著作者所有。

拾、結論與建議：
⊕慶祝網頁研習室成立滿10周年，本站六大主題教材自即日起，全部免費送給[有心學好]網頁製作網友。
⊕本報每篇報導都花上8小時以上搜集、整理及撰稿，絕對值得初學者或想徹底學會HTML語法網友永久保存。
⊕本電子報第三階段導資料，將繼續每隔30日發表一次，以嘉惠更多想學會HTML網友，歡迎訂閱！
⊕本報導資料取自網頁研習室教學會員檔案資料，內附更多範例介紹，歡迎進一步研習。
⊕強烈建議您學會HTML語法，她真的簡單易學，懂了她您就能駕馭她，不要再用所見即所得軟體了。
⊕本報導內容或資料，因限人力，非本報教學會員，不接受任何疑惑解答，敬請見諒。

第三階段93.09.01.發行第003期前期：好用的轉寄好友JavaScript程式