商品資訊進階設定epaper.gotop.com.tw/pdfsample/aee032100.pdf ·...

24
CHAPTER 17 221 17.1 概述 17.2 使用時機與功能選單位置 17.3 HTML 格式輸入「商品說明」的程序 17.4 商品移動 17.5 商品複製 17.6 商品資料樣板 17.7 商品圖寬高設定 17.8 進貨策略應用 商品資訊進階設定

Upload: others

Post on 23-Sep-2020

10 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: 商品資訊進階設定epaper.gotop.com.tw/PDFSample/AEE032100.pdf · 圖片顯示,等到將html內容轉貼到「商品說明」後,顧客在前台會看不到商品圖片。

CHAPTER17

221

17.1 概述

17.2 使用時機與功能選單位置

17.3 以 HTML格式輸入「商品說明」的程序

17.4 商品移動

17.5 商品複製

17.6 商品資料樣板

17.7 商品圖寬高設定

17.8 進貨策略應用

商品資訊進階設定

Page 2: 商品資訊進階設定epaper.gotop.com.tw/PDFSample/AEE032100.pdf · 圖片顯示,等到將html內容轉貼到「商品說明」後,顧客在前台會看不到商品圖片。

網路商店新店開幕

222

PART 1PART 2

PART 3PART 4

PART 5PART 6

APPENDIX

17.1 概述

在前面章節介紹了「商品上架」的程序及操作步驟,不過內容屬於一般性的基本應用,

還有一些較進階的設定或處理方式必須要補充說明,因此另立章節來描述。本單元將介紹如

何以 Dreamweaver 網頁設計軟體來製作「產品說明」內容的步驟,以及將該網頁置入「產

品說明」的方法。另外,還將介紹幾項關於商品上架的進一步操作功能,包含商品的移動與

複製等,可以讓管理者更方便地管理商品資訊。

透過上述「商品資訊進階設定」的說明,讀者將會學習到巧妙運用 HTML(HyperText Markup Language;超文字標記語言),可以讓網路商店的產品介紹更豐富多樣,也更有看

頭。同時,在演練進階的商品上架處理過程中,也能習得一些必須注意的細節,如商品圖檔

的設定以及進貨策略的應用等。

17.2 使用時機與功能選單位置

1. 商品資訊進階設定的使用時機:

• 想要美化及豐富商品目錄內容時。

• 需要調整商品分類位置或複製商品資料時。

2. 商品資訊進階設定的功能選單位置:

• 【系統管理 → 商品目錄 → 新增商品分類/新增商品】

網路商店的廖老闆想要替店內的商品目錄(請參照表 17-1)設計出更豐富的內容時,他

該如何設定與製作,才能順利將商品說明的內容美化?另外,如果有些商品的類別需要變更

調整,有沒有商品移動的功能可以使用?

表 17-1:廖老闆的商品目錄表

主分類 次分類 編號 商品名稱 單價 商品照片 圖檔名

運動

休閒

登山

用品

C01登山用禦寒外

套:紫色NT$15,000 coat01.gif

產品描述

★★ 時裝版型設計,具有歐洲高貴時尚風格,穿起來胸與肩非常挺

拔!

Page 3: 商品資訊進階設定epaper.gotop.com.tw/PDFSample/AEE032100.pdf · 圖片顯示,等到將html內容轉貼到「商品說明」後,顧客在前台會看不到商品圖片。

223

第 17 章 商品資訊進階設定

主分類 次分類 編號 商品名稱 單價 商品照片 圖檔名

運動

休閒

登山

用品

產品描述

★★ FASHION米蘭時尚帽緣設計,內部有可拆式黑色毛領禦寒外套

★★ 本外套有 S/M/L/XL四種尺寸:

S: 衣長 63/肩寬 43/胸寬 48/衣下襬束口,袖長:肩膀量起

66/袖管寬束口(cm)

M: 衣長 65/肩寬 46/胸寬 51/衣下襬束口,袖長:肩膀量起

67/袖管寬束口(cm)

L: 衣長 67/肩寬 49/胸寬 54/衣下襬束口,袖長:肩膀量起

68/袖管寬束口(cm)

XL: 衣長 69/肩寬 51/胸寬 57/衣下襬束口.袖長:肩膀量起

69/袖管寬束口(cm)

★★ 材質:時尚高科技防水透氣布素材含厚禦寒鋪棉(禦寒材質)

★★ 顏色:時尚紫色

★★ 適合 160~185左右身高穿著

17.3 以 HTML格式輸入「商品說明」的程序

「商品說明」除了輸入純文字內容外(圖 17-1),還可以加入 HTML 的網頁格式,以增

加美觀及可看性,本節將介紹利用 Dreamweaver 來設計產品描述網頁,以及將 HTML 格式

加到 osCommerce網路商店「商品說明」的方法。製作程序如下:

商品說明資

訊輸入處

圖 17-1:新增商品-商品說明

Page 4: 商品資訊進階設定epaper.gotop.com.tw/PDFSample/AEE032100.pdf · 圖片顯示,等到將html內容轉貼到「商品說明」後,顧客在前台會看不到商品圖片。

網路商店新店開幕

224

PART 1PART 2

PART 3PART 4

PART 5PART 6

APPENDIX

程序一、將產品圖檔放入網站主目錄內

osCommerce 的商品圖檔放在 C:\AppServ\www\catalog\images 的資料夾下,詳細的說

明在「第 16 章商品上架」的 16.3 商品上架的設定步驟,請讀者自行參閱並依照規劃完成圖

檔的放置。

程序二、設定 Dreamweaver與網站主目錄的連結

STEP 01

從桌面的【開始 → 所有程式 → Macromedia → Macromedia Dreamweaver MX 2004】啟

動 Dreamweaver。

1

2

34

圖 17-2:點選啟動 Dreamweaver的順序

STEP 02

啟動 Dreamweaver 後點選【網站 → 管理網站…】。

12

圖 17-3:管理網站

STEP 03

點選【新增 → 網站】準備設定網站相關資料。

圖 17-4:新增網站

12

Page 5: 商品資訊進階設定epaper.gotop.com.tw/PDFSample/AEE032100.pdf · 圖片顯示,等到將html內容轉貼到「商品說明」後,顧客在前台會看不到商品圖片。

225

第 17 章 商品資訊進階設定

STEP 04

輸入網站命名為 MySite(讀者可自

行命名,使用中文名稱亦可),並按【下

一頁】按鈕。

STEP 05

因為 osCommerce 系統使用的伺服器

技術是 PHP 語言及 MySQL 資料庫,所

以點選「是,我要使用伺服器技術」及

「PHP MySQL」,並按【下一頁】按鈕。

STEP 06

設 定 網 頁 檔 案 存 放 的 目 錄 位 置

(osCommerce 網站預設的主目錄:C:\AppServ\www\catalog\),點選「在本機

編輯和測試」,並按【下一頁】按鈕。

1

2

輸入 MySite

圖 17-5:為網站命名

2

圖 17-6:選擇伺服器技術

1

3

2

圖 17-7:設定網頁存放目錄

1

3輸入 C:\AppServ\www\catalog\

Page 6: 商品資訊進階設定epaper.gotop.com.tw/PDFSample/AEE032100.pdf · 圖片顯示,等到將html內容轉貼到「商品說明」後,顧客在前台會看不到商品圖片。

網路商店新店開幕

226

PART 1PART 2

PART 3PART 4

PART 5PART 6

APPENDIX

STEP 07

輸入網址(此處可以使用 localhost或 IP 位址來進行測試),按下【測試

URL】按鈕,出現「測試成功」後,回

到主畫面並按【下一頁】按鈕。

STEP 08

選擇是否要使用遠端伺服器。因為

我們使用的是「本地主機」的安裝方式,

所以點選「否」並按【下一頁】按鈕。

STEP 09

顯示網站定義摘要。檢視網站定義

摘要的內容,如資料正確請按「完成」

按鈕。

STEP 10

完成 MySite 網站的設定。進入本步

驟時 Dreamweaver 會自動掃描網站主目

錄的所有檔案,掃描完成請按「完成」

按鈕。

2

圖 17-8:測試 URL

1

4

3

圖 17-9:選擇是否要使用遠端伺服器

點選此處

圖 17-10:顯示網站定義摘要

點選此處

圖 17-11:掃描檔案

點選此處

維持 localhost或輸入 IP位址

Page 7: 商品資訊進階設定epaper.gotop.com.tw/PDFSample/AEE032100.pdf · 圖片顯示,等到將html內容轉貼到「商品說明」後,顧客在前台會看不到商品圖片。

227

第 17 章 商品資訊進階設定

STEP 11

完成 Dreamweaver 與 MySite 網站主

目錄的連結設定。完成本步驟後就可以

開始設計網頁。

程序三、開始設計「商品說明」網頁

STEP 01

開起新網頁。點選【檔案 → 開新檔

案】(圖 17-13a),出現「新增文件」畫

面後按下「偏好設定…」按鈕(圖 17-13b),開啟「偏好設定」將預設打勾的

使用 CSS 取代 HTML 標籤 取消(圖 17-13c)。

圖 17-13c:取消使用 CSS取代 HTML標籤

1

2

圖 17-13b:偏好設定

點選此處

圖 17-12:掃描檔案

網站主

目錄

圖 17-13a:開新檔案

12

Page 8: 商品資訊進階設定epaper.gotop.com.tw/PDFSample/AEE032100.pdf · 圖片顯示,等到將html內容轉貼到「商品說明」後,顧客在前台會看不到商品圖片。

網路商店新店開幕

228

PART 1PART 2

PART 3PART 4

PART 5PART 6

APPENDIX

CSS是 Cascading Style Sheets的縮寫,中文譯為「串聯樣式表」。CSS不是一種程式語言,而是用於網頁排版的標記性語言,它可以擴充 HTML語言的功能,讓網頁更有獨特的風格。由於 CSS有特殊的語法及放置區域,如果將具有 CSS格式的網頁內容直接轉貼到 osCommerce「商品說明」的網頁中,會出現一些非預期的狀況,所以在此先取消「使用 CSS 取代 HTML 標籤」的設定。

操作說明

STEP 02

新增文件。點選【類別:基本頁面 → 基本頁面:HTML】。

STEP 03

開始編輯新網頁,再加入標題文字

「osCommerce 商品細部說明」。

STEP 04

插入 4 列 × 4 欄的表格。

圖 17-15:繪製表格的過程

圖 17-14a:新增 HTML文件

1 2

3

圖 17-14b:新增 HTML文件 -加入文字

2. 加入標題文字

1. 輸入文字

輸入表格

大小資料

1

2

3

Page 9: 商品資訊進階設定epaper.gotop.com.tw/PDFSample/AEE032100.pdf · 圖片顯示,等到將html內容轉貼到「商品說明」後,顧客在前台會看不到商品圖片。

229

第 17 章 商品資訊進階設定

� 插入的新表格

STEP 05

儲存檔案,點選【檔案 → 儲存】,輸入檔名為 product-1.html,並按【儲存】按鈕。

STEP 06

輸入商品細部說明文字,改變表格及文字顏色。

圖 17-18:輸入文字並改變顏色

文字顏色

表格背景顏色

圖 17-16:繪製完成的表格

圖 17-17:儲存 HTML檔案

1

2

3 4

Page 10: 商品資訊進階設定epaper.gotop.com.tw/PDFSample/AEE032100.pdf · 圖片顯示,等到將html內容轉貼到「商品說明」後,顧客在前台會看不到商品圖片。

網路商店新店開幕

230

PART 1PART 2

PART 3PART 4

PART 5PART 6

APPENDIX

STEP 07

插入商品圖片。當「插入點」位

置在商品照片下方的「儲存格」時,

點選【插入 → 影像】再選取影像原始

檔(參照圖 17-20)。

� 選取影像原始檔案

� 更改原始檔的位置

圖 17-19:插入商品圖片

插入點

圖 17-20:選取影像檔案

1

2

圖 17-21:更改圖片原始檔位置

※ 圖片位置在: C:/AppServ/www/catalog/images/sport/climb/coat01.gif

更改為 http://localhost/catalog/images/sport/climb/coat01.gif

圖 17-22:更改圖片原始檔位置後的畫面

Page 11: 商品資訊進階設定epaper.gotop.com.tw/PDFSample/AEE032100.pdf · 圖片顯示,等到將html內容轉貼到「商品說明」後,顧客在前台會看不到商品圖片。

231

第 17 章 商品資訊進階設定

原本「選取影像原始檔」可以直接到「搜尋位置」下方的資料夾內挑選圖片檔案來使用,

但是 osCommerce網站的「商品上架」屬於後台管理的功能,與「前台操作」顯示商品資訊的路徑位置不同。如果採用直接挑圖的方式來插入商品圖片,在設計時可以看到

圖片顯示,等到將 HTML內容轉貼到「商品說明」後,顧客在前台會看不到商品圖片。上述問題出在 HTML格式內圖片位置無法找到,解決之道就是「更改原始檔位置」。在「原始檔」處直接輸入該商品圖片的存放路徑(請參照圖 17-21),本範例使用的路徑是http://localhost/catalog/images/sport/climb/coat01.gif,其中 localhost 可以改成你網站的IP Address。

操作說明

STEP 08 合併儲存格與輸入產品描述內容。

在第 3 列第 2 欄處輸入「產品描述」,並將第 3 列第 2 欄至第 3 列第 4 欄的 3 個儲存格

合併(參照圖 17-23)。完成後依此方式繼續合併「第 4 列第 2 欄至第 4 列第 4 欄」與「第 2列第 1 欄至第 4 列第 1 欄」,再輸入產品描述內容(圖 17-24)。

1. 選取這 3個儲存格

2. 點選 [選取合併的儲存格 ]

圖 17-24:已完成的商品說明網頁

圖 17-23:合併儲存格

點選切換

至程式碼

Page 12: 商品資訊進階設定epaper.gotop.com.tw/PDFSample/AEE032100.pdf · 圖片顯示,等到將html內容轉貼到「商品說明」後,顧客在前台會看不到商品圖片。

網路商店新店開幕

232

PART 1PART 2

PART 3PART 4

PART 5PART 6

APPENDIX

� 將顯示畫面切換至「程式碼」

點選「程式碼」,Dreamweaver 會出現商品說明網頁的程式碼內容,再將第 10~43 列的

程式(<body> 至 </body> 之間)選取複製,準備貼到「商品說明」內。

<body>

圖 17-25:商品說明網頁程式碼

程序四、將 HTML格式貼到「商品說明」內

STEP 01

由「後台管理」進入「商品目錄」,找到要美化網頁內容的商品後(圖 17-26),點選

【編輯】按鈕,進入編輯畫面(圖 17-27)。

點選此處

圖 17-26:商品目錄

STEP 02

將剛才複製的第 10~43 列程式碼貼到「商品說明」的位置上(圖 17-27),再點選【預

覽】按鈕,檢視結果(圖 17-28),顯示內容正確後再點選【更新】按鈕完成網頁變更。

Page 13: 商品資訊進階設定epaper.gotop.com.tw/PDFSample/AEE032100.pdf · 圖片顯示,等到將html內容轉貼到「商品說明」後,顧客在前台會看不到商品圖片。

233

第 17 章 商品資訊進階設定

貼上 HTML內容

圖 17-27:商品目錄

圖 17-28:商品目錄顯示新內容

17.4 商品移動

假如新增商品之後由於商品分類的調整,必須將商品從原來的商品分類目錄搬移到新的

商品分類時,就可以使用商品移動的功能來處理。操作步驟如下:

Page 14: 商品資訊進階設定epaper.gotop.com.tw/PDFSample/AEE032100.pdf · 圖片顯示,等到將html內容轉貼到「商品說明」後,顧客在前台會看不到商品圖片。

網路商店新店開幕

234

PART 1PART 2

PART 3PART 4

PART 5PART 6

APPENDIX

STEP 01 選定處理商品

在後台點選「商品目錄」功能選單後,切換到該商品原本所在的商品分類目錄,從商品

列表中點選要處理商品「動作」欄位的 i 符號( ),選定要移動的商品(圖 17-29)。

圖 17-29:選定移動商品

STEP 02 設定移動目的地

接著點選在右欄的「移動」按鈕,右欄會出現選擇目的地商品分類的下拉選單,從下拉

選單中選擇該商品要移動的目的地後,按下「移動」按鈕(圖 17-30)。

圖 17-30:設定移動目的地

STEP 03 移動完成

接著畫面會切換到目的地商品分類目錄,同時該商品也被搬移到這個商品分類目錄(圖

17-31)。

Page 15: 商品資訊進階設定epaper.gotop.com.tw/PDFSample/AEE032100.pdf · 圖片顯示,等到將html內容轉貼到「商品說明」後,顧客在前台會看不到商品圖片。

235

第 17 章 商品資訊進階設定

圖 17-31:移動完成

完成移動後可以從前台的商品分類選單檢視,確認商品是在新的商品分類之中。

17.5 商品複製

osCommerce 提供的商品複製有兩種,一種是實際將商品資料複製成兩份;另外一種則

是讓同一份商品在兩個不同的商品分類中都出現。第二種商品複製方法又稱做增加商品連

結,是指同一種商品設定與多組商品分類目錄的連結,因此該商品會在多個商品分類中出

現。商品複製的操作步驟如下:

為什麼會需要讓商品在多組商品分類中出現?商品分類的主要目的是讓顧客能夠找到所

要購買的商品,因此商品分類命名必須符合顧客對商品分類的習慣,才能方便顧客儘快

找到所要商品完成商品的訂購。但有時候會遇到不同顧客對商品的分類不一致的情況,

比如說「蕃茄」這項商品是屬於蔬菜還是水果?每位顧客習慣分法可能有所不同,想煮

蕃茄湯的顧客會認為蕃茄是蔬菜;而想做綜合果汁的顧客可能覺得蕃茄是水果。這樣一

來賣蕃茄的商店該怎麼分類才是最佳策略呢?答案是蔬菜與水果這兩個商品分類都擺放

蕃茄。

在實體商店為了讓顧客很快買到蕃茄,可能必須在蔬菜區與水果區都擺放蕃茄,但在虛

擬的網路商店則只要增加蕃茄商品與蔬菜分類跟水果分類的連結就可以,這也是為什麼

有需要讓商品在多組商品分類中出現的原因。

操作說明

STEP 01 選定處理商品

從商品列表中點選要處理商品「動作」欄位的 i 符號( ),選定要複製的商品。

Page 16: 商品資訊進階設定epaper.gotop.com.tw/PDFSample/AEE032100.pdf · 圖片顯示,等到將html內容轉貼到「商品說明」後,顧客在前台會看不到商品圖片。

網路商店新店開幕

236

PART 1PART 2

PART 3PART 4

PART 5PART 6

APPENDIX

STEP 02 設定複製參數

接著點選在右欄的「複製到」按鈕,右欄會出現複製參數設定欄位。「目錄」下拉選單

是用來選擇複製商品擺放的目的地商品目錄。「複製方式」欄位則是要決定複製的方法,假

如要增加相同商品與多組商品分類目錄的連結,就勾選「商品連結」;假如是要實際將商品

資料複製成兩份,就勾選「商品複製」。設定完成後按下「複製」按鈕(圖 17-32)。實際複

製商品時可以把複製商品跟原始商品擺放在相同商品分類中,但做商品連結時則必須將新的

連結擺放在不同的商品分類之中。

圖 17-32:設定複製參數

STEP 03 複製完成

完成該商品的複製或連結後,畫面會切換到選定的目的地商品分類目錄,同時也會選定

新產生的商品資料(圖 17-33),做實際商品複製時,新增加的複製商品預設會是下架的狀

態,在狀態欄位會顯示紅燈,以此便能分辨原始的商品與複製商品。

圖 17-33:複製完成

Page 17: 商品資訊進階設定epaper.gotop.com.tw/PDFSample/AEE032100.pdf · 圖片顯示,等到將html內容轉貼到「商品說明」後,顧客在前台會看不到商品圖片。

237

第 17 章 商品資訊進階設定

17.6 商品資料樣板

在商品上架的過程中,有些同類型商品有類似的資料內容,若能有一個該類型商品的資

料樣板,新增這個類型的商品時便可以用這個資料樣板為基礎,去更新或增加不同部分的資

料,這樣一來便可以減輕同類型商品上架的工作負擔。應用前述的商品複製功能便可以達到

這個目標,操作步驟如下:

STEP 01 建立商品資料樣板

在後台點選商品目錄功能選單後,切換到要建立商品資料樣板的商品分類目錄,按下商

品列表下方的「新增商品」按鈕,建立該類型商品的資料樣板,比如在「商品說明」欄位輸

入共同的內容,產品的規格、尺寸、顏色或必要的說明等。又或者在「型號」欄位,輸入該

類型商品型號的開頭英文字母。而「品名」欄位可以輸入 _XX 類型商品樣板 的名字做為樣

版的識別,樣板名字最前面的底線(_)是讓這個樣版在商品列表時能夠排在最前面,方便

建立同類型商品時使用這個樣版。「產品狀態」欄位則設定為缺貨,因為這是內部使用的樣

版,不希望在前台出現(圖 17-34)。

圖 17-34:建立商品資料樣板

Page 18: 商品資訊進階設定epaper.gotop.com.tw/PDFSample/AEE032100.pdf · 圖片顯示,等到將html內容轉貼到「商品說明」後,顧客在前台會看不到商品圖片。

網路商店新店開幕

238

PART 1PART 2

PART 3PART 4

PART 5PART 6

APPENDIX

完成樣板的資料之後按下「預覽」按鈕,預覽確認資料沒問題後接著按下「插入」按鈕

完成該商品樣板,在商品列表中可以看到新增的商品資料樣板(圖 17-35)。

圖 17-35:商品列表中的新增商品資料樣板

STEP 02 複製商品資料樣板

新增商品時先切換到所屬的商品分類目錄中,接著點選商品資料樣板的「動作」欄位 i符號( ),選定要使用的商品資料樣板,然後點選在右欄的「複製到」按鈕,勾選「商品

複製」按下「複製」按鈕(圖 17-36)。

圖 17-36:複製商品資料樣板

在商品列表會多出一個相同的商品資料樣板,而且新增加的商品會被選定,「動作」欄

位會是三角形符號( )。

STEP 03 修改新增商品資料

選定以商品資料樣板複製新增的商品後,按下右欄的「編輯」按鈕進到商品編輯畫面,

接著就可以利用商品樣板的基礎資料來修改,記得商品若要馬上上架就要把「產品狀態」欄

Page 19: 商品資訊進階設定epaper.gotop.com.tw/PDFSample/AEE032100.pdf · 圖片顯示,等到將html內容轉貼到「商品說明」後,顧客在前台會看不到商品圖片。

239

第 17 章 商品資訊進階設定

位設定為現貨(圖 17-37)。

圖 17-37:修改新增商品資料

修改好商品的資料之後按下「預覽」按鈕,預覽確認資料沒問題後接著按下「插入」按

鈕完成該商品的資料設定。

17.7 商品圖寬高設定

商品上架時設定的商品圖,有些圖在檢視時會出現被壓扁或拉長的情形,發生這種變形

的原因是顯示圖形時的寬高比例與原圖不同。舉例來說:某商品原圖的寬為 200 畫素,高為

400 畫素,因此寬高比例為 1:2。若是在網頁顯示時的寬為 100 畫素,高為 50 畫素,顯示

的寬高比例為 2:1。如此一來顯示的寬高比例與原圖的就完全不同,原本細高的商品圖就

變形成寬矮的樣子(圖 17-38)。

圖 17-38:商品圖寬高比例

商品圖是網路購物時顧客參考的重要依據,變形的商品圖不僅影響顧客的購買意願,更

可能引起顧客對商品的誤解。因此網路商店的經營者要特別留意,前台商品圖的呈現是否與

原商品有落差。

Page 20: 商品資訊進階設定epaper.gotop.com.tw/PDFSample/AEE032100.pdf · 圖片顯示,等到將html內容轉貼到「商品說明」後,顧客在前台會看不到商品圖片。

網路商店新店開幕

240

PART 1PART 2

PART 3PART 4

PART 5PART 6

APPENDIX

osCommerce 的後台系統設定中,有一組與圖形呈現有關的參數,在後台點選「系統設

定」功能選單後,點選次選項「圖片」後在主體區會出現該組設定參數,其中的「小圖片寬

度設定」、「小圖片高度設定」兩個參數,就是控制商品圖在前台商品列表或商品資訊頁面,

以小圖呈現時的寬度與高度(圖 17-39)。

圖 17-39:商品小圖寬高設定參數

假若可以在商品圖上傳前預先處理,控制每個商品的圖片都以相同的寬高比例裁減的

話,可以預先將「小圖片寬度設定」及「小圖片高度設定」這兩個參數,設定成與上傳商品

圖相同寬高比例但縮小尺寸的畫素值。比如上傳商品圖都裁減為寬 200 畫素,高 400 畫素。

就可以把「小圖片寬度設定」參數設為 50,「小圖片高度設定」參數設為 100,如此就可以

維持小圖與原圖一致的寬高比例 1:2。

但有時候由於商品外觀特性不同,無法讓所有商品圖都使用相同的寬高比例,這種情況

下在設定時可以選擇只設定「小圖片寬度設定」,並且把「小圖片高度設定」參數值清空不

設定任何數值,這樣一來 osCommerce 在顯示小圖時,會把寬度縮減到「小圖片寬度設定」

的參數值,同時由於「小圖片高度設定」裡沒有任何設定值,瀏覽器會自動按照原圖的寬高

比例去調整小圖的高度。如此一來雖然商品小圖的高度會有所不同,但每張商品小圖都會維

持原圖的寬高比例不會變形。而且在前台分類目錄的商品列表若有顯示商品圖時,也因為是

固定的小圖寬度,不會影響列表資料的版面。

17.8 進貨策略應用

除了一般依照銷貨情況來進貨的策略之外,還有兩種常見的進貨策略應用,一種是以大

量的進貨來壓低商品的進貨價格,達到降低成本的目的;另一種則是不預先進貨,等接到顧

客訂單之後才進貨,藉此降低庫存的壓力,這種方式也稱之為零庫存接單策略。在使用這兩

種策略時要顧慮到自身的條件與環境,也必須先了解策略背後的影響。

Page 21: 商品資訊進階設定epaper.gotop.com.tw/PDFSample/AEE032100.pdf · 圖片顯示,等到將html內容轉貼到「商品說明」後,顧客在前台會看不到商品圖片。

241

第 17 章 商品資訊進階設定

大量進貨

大量進貨的確可以降低進貨的價格,但要考慮供應商提供的條件、商品的保存特性以及

實際的銷貨情況。

� 供應商條件

通常供應商都要有一定數量的進貨才會有價格的優惠,而這個優惠的進貨數量門檻,可

能需要一筆很大的資金。所以要採大量進貨策略,首先要考量資金是否足夠。很多創業

的資金評估會忽略掉首次進貨的成本,假如你在創業計畫中提到以大量進貨來增加商品

的價格優勢,就應該說明首次進貨的數量與需要的金額,深入分析後再決定是否適合使

用這樣的策略。

� 商品保存特性

你要進貨商品的保存期限以及保存方式為何?假如容易壞的或保存期限過短的商品,就

不適合一次進太多的量,若是銷售的速度不夠快,到時候賣不掉的過期商品就會是一大

損失。尤其要注意保存方式較特殊的商品,比如需要冷藏的商品,大量進貨將會增加庫

存的保存成本,必須投資冷藏設備以及負擔保存期間的電力費用支出。因此銷售的商品

本身若不適合長期庫存,也就不適合使用大量進貨壓低價格的策略。

� 銷貨情況

許多大賣場經常使用大量進貨壓低價格的策略,因為他們全國各分店的總銷售量非常

大,每天到賣場消費的人潮夠多,所以可以很快的把進貨商品積壓的成本變現。反觀一

般商店的銷貨情況,倘若銷售量與進貨的數量相差太遠,就不適合大量進貨。尤其在創

業初期,一個新公司能夠有多少的銷售量?太過樂觀的銷貨估計只會讓自己陷於庫存成

本的壓力之中。

假如初期無法知道上述各點的實際情況,建議暫時不要大量進貨,可以先以一般價格進

一些貨來試賣,也能夠藉此了解前述各點的情況,假如各點考量都沒問題,再大量進貨

也不遲。

零庫存接單

零庫存接單則又是另一種策略,因為沒有預先進貨的庫存,所以要注意到訂單履行品質

以及商品供應特性。

� 訂單履行品質

接了顧客的訂單等於對顧客許了一個承諾,你履行這個承諾的品質將影響顧客對你的觀

感,也影響顧客後續是否願意繼續與你交易,更嚴重的還可能會造成負面口碑的影響。

Page 22: 商品資訊進階設定epaper.gotop.com.tw/PDFSample/AEE032100.pdf · 圖片顯示,等到將html內容轉貼到「商品說明」後,顧客在前台會看不到商品圖片。

網路商店新店開幕

242

PART 1PART 2

PART 3PART 4

PART 5PART 6

APPENDIX

而交貨速度則是訂單履行品質的重要因素,尤其是現代社會事事講究時效,顧客可能已

經預先以信用卡或 ATM 轉帳付款了,若遲遲收不到貨,會造成顧客對商店的負面評價。

沒有預先庫存便無法即時出貨,所以要做零庫存接單應該要預先估算供應商出貨所需要

的時間,最好也讓你的顧客知道下訂單後所需要的備貨時間。假如發現這樣的出貨速度

顧客無法接受,便無法以零庫存的方式接單。

� 商品供應特性

前面提過商品保存特性,這邊則是要注意商品的供應特性,比如說屬於限量商品,可能

等你接到訂單時,供應商已經沒有貨可以供應了。或者是價格變動大的商品,應該考慮

自己銷售狀況以及衡量將來商品漲價的空間,這類型的商品也很難做到零庫存接單。另

一種情況是供應商不接小量的訂單,所以你若要接單後才進貨,就只能找供應商的下游

經銷商進貨,這樣當然你的進貨價格就會比較高,也有可能因此喪失價格的優勢。

事實上零庫存接單只是電子商務技術可以達到的應用,並不代表所有使用電子商務的

公司都可以做到零庫存,所以還是要考量自身的條件決定是否要做零庫存接單。一個很有名

的案例就是亞瑪遜網路書店(Amazon.com),當初成立時因為自己的供貨倉庫太小,大部份

商品是採零庫存接單,結果無法消化聖誕節的大量訂單而造成顧客的抱怨與流失。於是亞瑪

遜的執行長 Jeff Bezos 決定在美國建立六座大型的自動化倉庫,終於解決了亞瑪遜出貨速度

的問題,也提昇了網路書店的整體服務品質,這也是虛擬的網路書店擊敗實體書店的重要關

鍵。

大量進貨與零庫存是兩種截然不同的進貨策略,同一個商店有可能部份熱門商品使用大

量進貨,而不熱門的商品採用零庫存接單,但不會同一種商品說要大量進貨又說要零庫存接

單,因此要仔細評估上述各點,依照自己的特性採行合適的進貨策略。

Page 23: 商品資訊進階設定epaper.gotop.com.tw/PDFSample/AEE032100.pdf · 圖片顯示,等到將html內容轉貼到「商品說明」後,顧客在前台會看不到商品圖片。

課後評量

243

|問答題|

1. 什麼是 HTML 及 CSS ?

2. 為什麼在「商品說明」加入 HTML 網頁時不要使用 CSS ?

3. 「商品移動」的使用時機為何?

4. 為什麼需要讓商品在多組商品分類中出現?

5. 網路商店進貨有哪兩種策略可應用?各項策略需要注意何種條件?

Page 24: 商品資訊進階設定epaper.gotop.com.tw/PDFSample/AEE032100.pdf · 圖片顯示,等到將html內容轉貼到「商品說明」後,顧客在前台會看不到商品圖片。

NOTE