節譯Ubercart Online Store

本文節譯自Oreilly出版的Using Drupal第十章Online Store(339~378頁)，December 2008 First edition，作者：Angela Byron、Addison Berry、 Nathan Haug、Jeff Eaton、James Walker、Jeff Robbins。 用safari瀏覽器可至http://safari.oreilly.com免費線上閱讀本文原文。
凡是有<阿羯經驗> <阿羯實作> <阿羯...>表示非原作者看法，是阿羯加進去的，閱讀時需小心，不一定完全正確。且短時間內以Drupal新手之經驗節譯原文，難免有漏誤，尚請指正。
阿羯經驗：Ubercart共有60多個模組，若想一次徹底了解，可能反而做不成，因而節譯以架個站為目標，理論部份移在最後面，並且盡可能簡譯。循以下(一)(二)(三)(四)，應可完成Ubercart Online Store網站(如示範站------http://ubercart.百加一講壇.tw/)。

(一)安裝Ubercart(339~350頁)：

阿羯經驗：假設你的PC上已安裝過Drupal並有Apache、PHP、MySQL。若沒有、請參看依"水滴架站全機能攻略"步驟成功架站(上)。

至http://usingdrupal.com/source_code下載Using Drupal的原始碼 -- using_drupal_source-2009-08-22_0.zip，解壓縮為資料夾using_drupal_source-2009-08-22，並將其中的drupal資料夾移至xampp/htdocs下，將資料夾名稱改為udchapter10。
到http://drupal.org/project/ubercart下載ubercart 6/x-2.2、cck 6.x-2.5、filefield 6.x-3.2、google analytics 6.x-2.2、imageapi 6.x-1.6、imagecache 6.x-2.0-beta10、imagefield 6.x-3.2、lightbox2 6.x-1.9、token 6.x-1.12。解壓縮後，至htdocs/udchapter10/sites/all/modules/contrib內，將原來的ubercart 、cck 、filefield 、google analytics 、imageapi、imagecache 、imagefield 、lightbox、token 換掉。
設一個資料庫，在瀏覽器IE(firefox或其他也可以)內鍵入http://localhost/udchapter10，即可開始安裝Using Drupal原始碼的Ubercart，步驟大約和依"水滴架站全機能攻略"步驟成功架站(上)相似。需注意的是，在第一個畫面"Select an installation profile"選"Chapter10: Store"(見圖一)。

(二)設店(Setting Up the Store 351~354頁)

假設要替Sweet Tees這個公司建個網路商店。

第一步(Initial Setup Tasks)：

1. 用admin user登入
2. Click <admin/build/modules>，啟用
   • Ubercart - core package
     • --- Store
3. Click <admin/store/settings/store>
4. Click "Name and contact information"，出現"Contact settings"畫面(admin/store/settings/store/edit)，用表10-1的值，填完後Click <Save Configuration>，再回到"Contact settings"畫面，其結果如圖二。

表10-1：以下的欄位為Setting --> Value

Store name --> Sweet Tees、 Storeowner-->Stephen Sweet、 E-mail address-->store@example.com、 Phone number->> 800-555-1234、Fax number-->110-555-4321、Street address 1-->123 Example St、Street address 2--> 、City--> Example City、 Country-->United States、Zone-->California、Postal code-->90210。

阿羯經驗：ubercart 6/x-2.2版是Click <admin//Store administration/Configuration/Store settings/ >，再Click< contact settings>。 出現"Store settings"畫面(admin//Store administration/Configuration/Store settings/store/edit/contact)。

(三)輸入商品(Creating Products 355~366頁)：

重點理論：Product、Product Class、及Attribute。見理論一。
第一步(Initial Setup Tasks)：

Click <admin/build/modules>，啟用：

• CCK package
  • ---Content
  • ---FileField
  • ---ImageField
• Core package
  • ---Path
• ImageCache package
  • --- ImageAPI
  • ---ImageAPI GD2
  • ---ImageCache
  • ---ImageCache UI
• Other package
  • ---Token
• Ubercart --core package
  • ---Product
• Ubercart--core(optional) package
  • ---Attribute
  • ---Catalog

現在Click <Admin/store administration> ，會發現Store Administration畫面多了Products及Attributes兩個選項，見圖四。

設定Product Classes(Configuring Product Classes) ：
在設店第一步完成後，Ubercart已加入了Product這個content type，並且有image field讓人可加入圖片，要讓Sweet Tees可以網上銷售T-shirts及Sticker兩種商品。需建立兩個Product Class，完成後如圖五。 建立T-shirts及Sticker兩個Product Class方法如下：

1. Click <admin/store/products/classes> [阿羯經驗：ubercart 6/x-2.2版是<admin/store/products/ manage classes>]
2. 出現"Manage classes"畫面，建立T-shirts Product Class：如表10-2填入後Click<Submit>。
   • 表10-2：以下的欄位為Setting --> Value
     • Class ID--> tshirt、Class name--> T-shirt、Description--> Our award-winning T-shirt
3. 再建立stickers Product Class：出現"Manage classes"畫面，如表10-3填入後Click<Submit>。
   • 表10-3：以下的欄位為Setting --> Value
     • Class ID--> sticker、Class name--> Sticker、Description--> A sticker with a witty phrase

設定Product Attributes(Configuring Product Attributes) ：
舉例來說，T-shirt有大小(size)，需使用Ubercart的product attribute功能來設定，完成後如圖六，建立T-shirts及Stick attribute步驟如下：

1. Click <admin/store/attribut> 進入Attributes畫面 ，Click<Add an attribute>
2. 加入Size這個attribute如表10-4
   • 表10-4：以下的欄位為Field --> Value
     • Name-->Size、 Help text--> Pick a T-shirt size、 Make this attribute required--> Checked、 Display type--> Select box
3. Click <Submit>會到Attributes畫面，Click Size右的<option>。
4. 來到Options for Size 畫面，Click <Add an option>
5. 依表10-5輸入Size attribute的不同options
   • 表10-5：以下的欄位為Name --> Order，輸入完一個option，Click <Submit>
     • S-->0、 M-->1、 L-->2、 XL-->3
6. Click <admin/store/attribut>，回到Attributes畫面， 再輸入Color Attribute， 如表10-6。
   • 表10-6：以下的欄位為Field --> Value
     • Name-->Color、 Help text--> Select a color、 Make this attribute required--> Checked、 Display type--> Select box
7. 回到overview畫面，Click <options>，輸入表10-7。[阿羯經驗：回到Attributes畫面，Click "Color"最右的options，進入"Options for Color"畫面，Click <Add an option>
   • 表10-7：以下的欄位為Name --> Order，輸入完一個option，Click <Submit>
     • White-->-1、 Dark Blue-->0、 Light Blue-->0、 Plaid-->0
8. 現在將Product Class和Attribute聯起來。先做T-shirt Product Class。Click<admin/store/products/classes>[阿羯經驗：<admin/store/products/ manage classes>]，Click "T-shirt"右的<edit>。
9. Click <Attributes> ，文字中有"add attributes to this class"[阿羯經驗：是"add attributes form"，後同]，Click這個<attributes to this class>
10. 在Attribute select list，選擇Size及Color後[阿羯經驗：用Ctrl鍵複選]，Click<Add Attributes>
11. Click <Option> (admin/store/products/classed/tshirt/options)
12. 將所有四種color及四種sizes，White及M為Default，見圖七。Click<Submit>。
13. 再將Sticker Product Class和Attribute聯起來。Sticker沒有size，只有白(White)、淺藍(Light Blue)兩色，Click<admin/store/products/classes>[阿羯經驗：<admin/store/products/ manage classes>]，Click "Sticker"右的<edit>。
14. Click <Attributes> ，文字中有"add attributes to this class"[阿羯經驗：是"add attributes form"，後同]，Click這個<attributes to this class>，在Attribute select list，選擇Color後[阿羯經驗：用Ctrl鍵複選]，Click<Add Attributes>
15. Click <Option> (admin/store/products/classed/tshirt/options) ，選White及Light blue。Default color選White，完成後Click<Submit>。

設定Product Settings(Configure Product Setting)：

1. Click <admin/store/settings/products>[阿羯經驗：<admin/store admin/configuration/Product settings/>] ，再Click <Product setting> 。
2. 出現"Product settings"畫面後，勾選<Dispplay an optional quantity field in the Add to Cart form> ，Click <Save configuration>。
3. 再回到"Product settings"畫面後，Click<Product fields>。勾選<Weight>，Click <Save configuration>。

設定Catalog(Configure Catalog)：
啟動Catalog模組讓我們可以用分類方式瀏覽產品(products)，catalog是taxonomy系統。見圖八。(若不清楚，用http://localhost/udchapter10/admin/store來確定已有catalog)。接著設定：

1. Click<admin/content/taxonomy>。
2. Click在Catalog右的<add terms>，用Advanced options裡的"Parents"及"Weight"加入以下term，並安排成以下的結構。
   • Stickers
   • T-shirts
     • ---Men's
     • ---Women's
     • ---Kids'
3. Click <admin/store/Configuration/Catalog settings>。
4. Click"catalog"，出現catalog edit畫面。[阿羯經驗：Click <Catalog settings>，再Click Edit]。
5. 依表10-8修改後Click<Save configuration>。
   • 表10-8：Filed --> Value
     • Catalog products list內的Product nodes per page -->12，Catalog block settings內的Always expand categories in the catalog block --> checked(勾選) 。
6. Click <Grib tab> [阿羯經驗：<Product grid settings>] 。
7. 依表10-9修改後Click<Save configuration>。
   • 表10-9：Settings --> Value
     • Dispaly products in grid --> Checked(勾選) 、Display product model(SKU)[阿羯經驗：Displayed fields/Product SKU]-->Unchecked(不勾選)、 Display product add to cart[阿羯經驗：Displayed fields/Add to cart form]--> Unchecked(不勾選)。
8. 現在輸入一些商品！Click <create content/T-shirt> ，依表10-10輸入。並Click<Save>。圖片在原先下載的資料夾using_drupal_source-2009-08-22/assets內。完成後如圖九。
   • 表10-10：Field-->Value
     • Name-->Druplicon、Catalog-->Men's, Women's、SKU-->T-shirt001、Sell price-->14.99、Weight-->2Pounds、Description-->Drupal's logo
9. 再加入一些產品。
10. Click <admin/build/Blocks> ，將Catalog block放到左欄。Click<Save blocks>後左欄會出現剛加入的產品。
11. 設定權限。Click<admin/user/permission>，依表10-11設權限後Click<Save permission>。
    • 表10-11：Permission -->anonymous user authenticated user editor site administrator。
      • uc_catalog module
        • administer catalog--> site administrator；view catalog--> anonymous user + authenticated user
      • uc_product module
        • administer product classes--> site administrator；administer products s--> site administrator；create products-->editor；edit all products-->editor
      • uc_store module
        • administer store-->site administrator；view customers--> editor site + administrator；view store report--> editor site + administrator

(四)訂單處理(Processing Orders 366~376頁)：

重點理論：訂單流程(ordering process)。見理論二。
Click<admin/build/modules>，啟用以下模組：

• Ubercart - core package
  • ---Cart
  • ---Conditional Actions
  • ---Order
• Ubercart - core (optional) package
  • ---Payment
  • ---Report
  • ---Shipping
  • ---Shipping Quotes
  • ---Taxes
• Ubercart - Fulfillment package
  • ---Flatrate
• Ubercart - payment package
  • ---Credit card
  • ---Payment Method Pack
  • ---Test Gateway

注意：本文信用卡(credit card)採用測試版信用卡 (test gateway)，而非真正的信用卡模組，信用卡模組見http://www.ubercart.org/payment。
購物車(Shopping Cart)設定：

1. Click <admin/store/configuration/cart>[ 阿羯經驗：<admin/store/configuration/Cart settings >]，再Click<Cart settings >。
2. 將Default continue shopping link URL:後的path改為catalog。
3. Click<admin/build/block> 。
4. 將Sopping cart Block 移至左欄，Click <Save Block>。
   • 阿羯經驗：Shopping cart見圖十。

稅率(Taxes)設定：

Conditional Action模組可對稅率做各種設定，我們在此只做最簡單的設定。

1. Click <admin/store/configuration/Tax rates and settings >，再Click <Make a new tax rule> [ 阿羯經驗：<Add a tax rate>]
2. 將表10-12的值填入。
   • 表10-12：Field --> Value
     • Name-->Sales tax、Rate-->7.25%、Taxed product types-->T-shirt,Sticker
3. Click<Submit>

運費(Shipping)設定：

1. Click <admin/store/configuration/Shipping quote settings >，再Click<Quote methods>
2. Click<Flat rate>，再Click<Add a new flat rate shipping method>
3. 用表10-13值填入後Click<Submit>
   • 表10-13：Field-->Value
     • Shipping method title-->Default shipping、Line item label-->Shipping、Base price-->0.00、Default product shipping rate-->5.99

收費(Payment)設定：

1. Click <admin/store/configuration/Payment settings >，再Click<Payment methods>
2. 勾選"Check"及"Credit card"後Click<Save configuration>
3. 這時會有"Credit card encryption must be configured to accept caredit card payment"錯誤訊息
4. 假設網站在/home/username/www，設定/home/username/keys資料夾
5. 用chmod a+w /home/username/keys將資料夾暫時改成"可寫入"

• 阿羯經驗：chmod是unix/linux指會，windows直接用右鍵將/home/username/keys資料夾的"唯讀"去掉即可。

Click <Credit card setting> ，在Card number encryption key filepath改為/home/username/keys。

• 阿羯經驗：在Card number encryption key filepath改為../keys。

確定"Checkout workflow"中的"Attempt to process credit card payments at checkout"已 勾選。

Click <Check setting> ，輸入一些公司資訊。

Click<Save configuration>

用chmod a-w /home/username/keys將資料夾的"可寫入"去掉

下一個測試訂單(Placing a Test Order)：

現在做個測試訂單：

1. 瀏覽Catalog，Click<T-shirts>找一項產品，選好color及size後，Click<Add to cart>，在Cart Block就出現該產品、數量1、金額。
2. Click<Checkout>
3. 出現Ubercart checkout畫面，見圖十一， 有產品、數量1、金額資訊及登入資訊。

• 阿羯經驗：若沒登入，就沒有登入資訊，可以自行輸入。

輸入出貨資訊(delivery information)及帳單資訊(billing information)。

看"payment method"，Click<Credit card>，輸入信用卡資訊。見圖十二。

因為我們用的是Test gateway，請勿輸入真的信用卡號，依表10-14輸入：

• 表10-14：Field-->Value
  • Card Number-->4111111111111111(15個1)、Expiration Date-->July 2007、CVV-->123

Click<Review order>，出現圖十三的Review order畫面，Click<Submit order> 就完成了訂單。

完成後會有個銘謝惠顧畫面(thank you page)，畫面有觀看訂單的連結。

完成訂單流程(Fulfilling an Order)：

接下來是出貨、完成訂單、檢查報表。

1. Click<admin/store/orders>，會看到所下的訂單Status為Payment received，因為用Test gateway。左邊有四個小插圖，分別是<view order><edit order><delete order><package order>，Click<view order>。出現圖十四畫面。
2. Click<Packages>，再Click<Create packages>，出現如圖十五畫面。
3. 勾選"T-shirt"並Click<Create one package>。如果訂單裡有兩件產品，也可以一起打包出貨。
4. Click<Shipments>，再Click<Make a new shipment>，勾選顯示的Package，在Shipment type選"Ship Manually"，Click<Save Shipment>。[阿羯經驗：在Shippint method選"Ship Manually"，Click<Ship packages >]
5. 出現一個Ship packages畫面，Click<Save shipment> 。
6. 最後，開始修改訂單為"完成"。Click<View>。
7. 訂單畫面最下方"Order status"，拉下選單，選擇"Completed"。Click<Update>。
8. 現在查看一下報表。Click<admin/store/Reports>，Click< Sales reports> ，Sales reports畫面見圖十六。

權限設定(Access Control)：
Click<admin/User management/Permissions>，依表10-15設定權限後Click<Save permission>。幾點說明如下：

• uc_credit module下，"view cc details"可讓人看信用卡類型及刷卡金額。"view cc number"則是信用卡號，只能讓 site administrator看到。
• uc_order module下，"delete orders"及"delete any orders"不同，"delete any orders"甚至可以刪除已完成(Completed)訂單，因此只有site administrator擁有這個權限。

表10-15：Permission -->anonymous user authenticated user editor site administrator。

• ca module
  • administer conditional actions--> site administrator
• uc_credit module
  • administer credit cards-->site administrator，process credit cards--> editor、 site administrator，view cc details--> editor、 site administrator，view cc numbers--> site administrator
• uc-order module
  • administer order flow-->site administrator，create orders --> editor、 site administrator，delete any order-->site administrator，delete orders--> editor、 site administrator，edit orders--> editor、 site administrator，view all orders--> editor、 site administrator
• uc_payment module
  • delete payments--> site administrator，maqnual payments--> editor、 site administrator，view payments--> editor、 site administrator
• uc_quote module
  • configure quotes--> site administrator
• uc_report module
  • view reports--> editor、 site administrator
• uc_shipping module
  • fulfill orders--> editor、 site administrator
• uc_store module
  • view store reports--> editor、 site administrator
• uc_taxes module
  • configure taxes--> site administrator

 
理論一：Product、Product Class、及Attribute。(352~354頁)

Product是一個node，Ubertcart Product模組定義了"Product"node type，當Click <Create content/Product>時，出現Product內容畫面，許多需填寫的欄位，例如SKU、sale price，見圖三。 因為要有不同類產品，例如廚房用品(Kitchen utensil)、書籍(Books)...，所以需定Product Class， 廚房用品(Kitchen utensil)是一個Product Class，書籍(Books)是一個Product Class。Product Class一旦產生，它就像Product一樣，成了一個node。Ubercart只認得Product及Product Class node type。對於每一個Product Class， 又可用Attribute Module建attribute，例如，T-Shirt是一個Product Class，不同顏色(Color)、大小(Size)的T-Shirt，可同屬T-Shirt Product Class，再用attribte Color(White、Light Blue...)及Size(S、M、L、XL)來細分。

理論二：訂單流程(ordering process)。

在365頁的下單流程(ordering process)。如下：
客戶(Customer)：

產品放入購物車-->Click <Checkout>-->填地址、信用卡號..(計算稅及運費)-->檢視訂單。

商店訂單查驗(Payment gateway)：確認客戶資料、例如信用卡...(信用卡公司有Paypal、2Checkout、Authorize.net)
商店版主(Store owner)：

出貨及完成訂單流程-->分析銷售報表(搶手貨、銷售分析)

Ubercart有許多設定選項，選了一些必要的說明，步驟見訂單處理，這些選項是在<admin/store/configuration>下，有：

Cart setting，Order setting，Checkout setting，Payment setting，Shipping quote setting，Tax rates and settings。

圖一：安裝Using Drupal原始碼的Ubercart，在第一個畫面"Select an installation profile"選"Chapter10: Store"。
圖二：設店