實用程式彙報

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

適合程度： 初學者 一般程度 進階者 以上均宜
範例

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

貳、本程式之缺點：
在產品頁 (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)，比較習慣。
修改產品訂購頁 (buy.htm 檔案)：
<!--此為呼叫 order.htm 檔的訂購表單 HTML 語法-->
<form name=theForm action="order.htm">....</form>
<!--這是 name & value 值的設定-->
<input type=checkbox name=item1A value="1A-hat*15$">
item 是指後面 1A 的產品編號。
value 的值是要傳給 order.htm 檔用的，1A 是指產品編號 -hat 是指產品名稱 *15$ 是指產品價格。
其他欄位為 HTML 語法，我就不再詳述了。
您有幾個產品就設幾個 <input .... >。
注意：name 的 item 不能改，value 的 "-"、"*"、"$" 不能改。
修改產品訂單頁 (order.htm 檔案)：
<!--此為傳送訂購表單 HTML 語法-->
<form ... action="mailto:your@mail.com.tw" ... ENCTYPE="text/plain">....</form>
本程式採用 IE 內建 mailto 寄信程式 (Outlook Express 軟體)，當然您也可以改用 CGI 等程式。
注意：<form ....>....</form>，要放於 JavaScript 程式 decodeString(); 之間。
注意：記得將 your@mail.com.tw，改為自己的。
<!--此為呼叫decodeString程式碼用-->
<script language="JavaScript">
<!-- Begin
decodeString();
// End -->
</script>
 注意：這個位置很重要，它是顯示客戶所選的訂單內容檔案，不用修改。

陸、JS 程式修改說明：
請用任何網頁編輯器打開 JS 檔，依指示修改即可。
建議：我是使用電腦內建的記事本 (Notepad)，比較習慣。
欄位偵測 (ckjs.js) 檔案，原則不用修改。
本程式位於 buy.htm 檔案 <HEAD>...</HEAD> 內，如下：
<!--JS 欄位偵測程式碼-->
<SCRIPT SRC="ckjs.js"></SCRIPT>
<!--JS 欄位偵測程式碼-->
注意：除非您修改了 name 的編號 (1A) 及產品數量。
修改主程式 buy.js 檔案：
本程式位於 buy.htm 檔案 <HEAD>...</HEAD> 內，如下：
<!--本報導主要 JS 程式碼-->
<SCRIPT SRC="buy.js"></SCRIPT>
<!--本報導主要 JS 程式碼-->
其實您只要修改客戶訂單欄位就可以了，也可以改寫在 order.htm 檔案內。
請用任何網頁編輯器打開，查看檔案內的詳細備註 (//...) 說明。
注意：如果不懂 JavaScript 程式，建議先修改 HTML 及中文部份。
注意：凡有 //... 以下為程式運作設定，請不要修改文字處，請特別小心喔。

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

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

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

拾、結論與建議：
本站所有報導資料，歡迎網友加入鏈結或轉載內容，惟請保留文章完整，並註明此 引用來源 ，謝謝您的支持與配合。
本報每篇報導都花上 8 小時以上搜集、整理及撰稿，絕對值得初學者或想徹底學會 HTML 語法網友永久保存。
強烈建議您 學會 HTML 語法 ，她真的簡單易學，懂了她您就能駕馭她，讓您使用所見即所得軟體更得心應手。
本報導屬於完全免費性質， 索取教材資料 屬個人自由意願，而回饋給您的光碟片，則是我們的誠意而已。
一篇保證前所未見的 HTML 教學課程，絕對是您學習 HTML 的好教材，強烈建議您進入實際體驗一下。
本電子報報導資料，未來將繼續每隔 30 日發表一次，以嘉惠更多想學會 HTML 網友，歡迎 繼續訂閱 。
本報導內容或資料，因限人力、時間，非教學會員，不接受任何疑惑解答，敬請見諒。