
梅干前前後後用過不少的購物車平台,雖然每一套各有各有優缺,同時功能也很都很強大,但唯一讓梅干感到最困擾的是,一來是梅干所銷售的品項並不多,與沒有複雜的分類結構,和加價購的組合,二來是這些購物車都是外國人寫的,因此有些在操作上,或是表單上,都與台灣的習慣有很大的不同,再加上翻譯與一些小問題到不少,若要整合到WordPress中,更是一大工程,因此這也讓梅干想自行開發一個簡單的購物車念頭很久了,直到最近找到一隻超神奇的外掛套件,他就只有一隻程式,控制所有的購物流程。
但礙於它是paypal付款,和沒存庫、訂單機制,這也開啟了梅干自行開發購物車的動力,在發的過程中,也不斷的吵好友男丁,終於在最近完成了一個最初版的,本土購物車系統,雖然目前的功能相當簡易,但基本該有的都有,像是庫存、訂單管理、金流串接、滿額免運,因此有購物車需求的朋友,也歡迎下載使用,以下是安裝的步驟,與購物的流程。
mShop
參數設定
Step1
下載完畢後,使用文字編輯器,開啟lib/conf.php。

Step2
接著分別修改購物車名稱、圖示、運費,和綠界的金鑰。

Step3
都弄好後,再將資料夾,整包上傳到wp-content/themes/下。

啟用佈景
Step4
上傳完畢後,再到WordPress後台中的佈景主題,將mShop給啟用。

環境設定
Step5
啟用完畢後,再到頁面中,新增一個新頁面,並將固定網域命名為「cart」,同時在內容的區塊中,輸入[checkout_cart]短碼。

Step6
接著再新增另一個新頁面,只需將標題命名為「order」。

Step7
到這邊就已全部設定完畢,購物車已啟用了,是不是超甘單呀!

產品上架
Step8
這時候就開始來上架商品吧!上架商品的方式很簡單,就跟平常新增文章一樣。

Step9
特色圖片則會出現在列表的縮圖中。

Step10
左邊的產品圖,則是由文章下方自訂欄位的圖片1~圖片4作控制,而下方的說明文,則是由文章中的內容,同時可用h3標籤來作區塊的區隔,右邊區塊則是文章摘要,而這邊需注意到的是,右邊的購物車按鈕的短碼為[add_to_cart]。

選單設定
Step11
商品與分類建立完畢後,接著再到佈景主題下的選單,來新增產品選單,方便使用者作切換。

Step12
建立完畢後,在版頭的下方,就會看到剛所建立好的選單啦!

購物流程
Step13
都弄好後,立馬來買買看。

Step14
將產品加入購物車後,可從下拉選單,更改數量。

Step15
數量更改後,再按下方的「更新」鈕,就會自動重新計算。

Step16
而這邊梅干是設定10000免運,因此當購物金額超過1000時,運費就會變成0元啦!

Step17
下方輸入購買人的資訊後,再按結帳方式,目前梅干只串了ATM與信用卡的部分。

綠界金流串接
Step18
按了之後,就會直接導到綠界的結帳畫面啦!

Step19
這樣就結帳完成了。

訂單管理
Step20
回到WordPress後台,訂單資訊則會儲存在留言區,同時可詳細的看到所有的購物清單與訂單編號,方便自行到綠界中進行對帳。

Step21
同時庫存量也會自動扣除,而這就是整個購物流程,因此有需要的朋友,也自行下載使用,如有何問題,也歡迎到[mshop]頁面中回應。

Q&A
Q:需要安裝Woocommerce?
A:不需要的。
Q:需搭配佈景才能使用?
A:不用,如需套用在現行的佈景,只需將lib中的檔案全部複製到佈景中,並在functions.php加入以下語法即可。
[php]
<?php
add_filter(‘the_excerpt’, ‘do_shortcode’);
add_theme_support( ‘post-thumbnails’ );
?>
<?php require_once(TEMPLATEPATH . ‘/lib/mshop/wp-mshop-cart.php’); ?>
[/php]