您在這裡

節譯Ubercart Online Store

jesselue's 的頭像
jesselue 在 2010-03-15 (週一) 08:53 發表

節譯Ubercart Online Store:2010年03月11日星期四

適用於:Drupal初學者,想更改Drupal theme外觀 的人,對CSS有興趣的人,對PHP有興趣的人,以前用Dreamweaver的人,以前用其他Blog CMS的人。本文用Drupal6.14,想在Drupal中使用Flash,詳見本文的環境

本文節譯自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"。
    圖二:設店

    圖三:Product內容畫面
    圖四:Store Administration畫面
    圖五:要讓Sweet Tees可以網上銷售T-shirts及Sticker兩種商品。需建立兩個Product Class。
    圖六:T-shirt有大小(size),需使用Ubercart的product attribute功能來設定。
    圖七:T-shirt及其Options連結
    圖八:Catalog
    圖九:一件產品
    圖十:Shopping Cart Block
    圖十一:Ubercart checkout畫面
    圖十二:信用卡資訊
    圖十三:Review order畫面
    圖十四:view order畫面
    圖十五:Packages
    圖十六:Sales reports畫面
    本文的環境是:

    1. Drupal 6.4、MySQL 5.1.30、PHP 5.2.8。
    2. apache server設在Windows XP上,以http://localhost/udchapter10為例。
    3. 所有的檔案在c:/xampp/內,以下的路徑均相對於c:/xampp/。
    4. 各檔案均用vim editor打開,行數以vim內的行數為準。
    5. 主機是遠振資訊cPanel環境。

     

    附加檔案大小
    Image icon picture-1.JPG61.29 KB
    Image icon picture-2.JPG38.63 KB
    Image icon picture-3.JPG39.6 KB
    Image icon picture-4.JPG35.57 KB
    Image icon picture-5.JPG42.47 KB
    Image icon picture-6.JPG34.22 KB
    Image icon picture-7.JPG65.31 KB
    Image icon picture-8.JPG33.22 KB
    Image icon picture-9.JPG27.82 KB
    Image icon picture-10.JPG5.35 KB
    Image icon picture-11.JPG46.25 KB
    Image icon picture-12.JPG56.84 KB
    Image icon picture-13.JPG51.36 KB
    Image icon picture-14.JPG57.99 KB
    Image icon picture-15.JPG45.09 KB
    Image icon picture-16.JPG69.55 KB

    雖說試了Ubercart,但距離想要的仍有一大段距離,想做的如下:

    網站提供user一些point(如drupaltaiwan.org的userpoint),例如用userpoint module來做。
    user可用得到的point到站上消費,也就是說,不用credit card而是用user point消費。

    有模組可以和Ubercart相連而達成嗎?or
    Ubercart可和user point模組相連嗎?

    本文及http://ubercart.百加一講壇.tw/是我已做到的,以上是我的疑問,謝謝。

    谢谢,请问如何才能够隐藏 "Add to Cart " 按钮 当我有attribute option的时候, 有些商品属性可以在网上卖, 有些我想让他到一个链接或者别的 就是不想让add to cart button 显示,这个怎样才能实现呢?谢谢