零售業批貨技巧與 網拍架站創業訓練班 使用OpenCart (II) 建國科大資管系 饒瑞佶 2014/4.

Presentation on theme: "零售業批貨技巧與 網拍架站創業訓練班 使用OpenCart (II) 建國科大資管系 饒瑞佶 2014/4."— Presentation transcript:

1 零售業批貨技巧與 網拍架站創業訓練班 使用OpenCart (II) 建國科大資管系 饒瑞佶 2014/4

2 OpenCart前後台 前台 後台 http://127.0.0.1/store/
如果有固定IP或是DNS，請取代

3 後台管理 http://localhost/store/admin/ 帳密是在安裝時就設定的 有點危險，因為似乎大家都知道
對應資料庫內的user資料表

4 修改OpenCart內的檔案 修改設定檔案等最好不要用Windows內建的記事本 因為很多檔案都是用UTF-8編碼
建議使用UltraEdit或是Notepad++(本課程用)

5 修改admin後台路徑 Step1、用Notepad++開啟admin內的config.php

6 修改admin後台路徑 Step2、修改config.php內有admin的位置 假設改成mycart

7 修改admin後台路徑 Step3、修改原來目錄名稱為mycart

8 新後台

9 後台管理 請使用安裝時設定的帳號密碼登入

10 OpenCart中文化

11 中文套件

12 中文套件安裝 Step 1. 下載檔案並解壓縮，產生 2 個目錄 : catalog admin Step 2. 將上述 2 個目錄上傳到您的 OpenCart 網站目錄並覆蓋

13 Step 3.到 OpenCart 商店後台 [system] -> [localisation] -> [Language]

14 點擊 [Insert]

15 填寫這些內容 Language Name: Chinese Code: zh-TW Locale: zh,zh-tw,zh-tw.UTF-8,chinese Image: tw.png Directory: zh-TW Filename: zh-TW Status: Enabled Sort Order: 0

16

17 Step 4.到 OpenCart 商店後台 [system] -> [settings]

18 選擇商店後按 [Edit] 再到 [Local] 頁籤

19 將 Language(前台) 和 Administration Language(後台) 兩個選項都改為 Chinese

20 完成！ 中文介面

21 更改管理者密碼與新增使用者

22 先登入後台 系統管理管理員設定

23

24 設定新的資料(包含密碼)

25 新增使用者

26 先設定群組(功能權限)

27 群組設定

28 直接將可以使用的功能設定在群組上

29 新增[一般使用者]群組

30 可以設定權限群組與停權

31 被鎖定的就不能用

32 OpenCart系統設定 更改設定後 請不要忘記按Save保存設定

33 系統管理設定

34 請先進入後台 商店基本資料設定 系統管理(System)商店設置(Settings)

35 before

36 after

37 前台

38 Logo修改

39 SEO(Search Engine Optimization)

40 網站文字說明修改

41 網站的一些聲明都在這改 出現在首頁下方

42 可以用HTML語法加入YouTuBe

43 結果

44 OpenCart的設計結構

45 更多OpenCart檔案架構 \admin (已經改成mycart) 後台 \catalog  前台 \download 下載類商品存放位置(由程式控制,非直接複製檔案至此) \image  圖片檔 \install  安裝檔(安全起見，安裝完已刪除) \system 系統程式(PHP主程式) \.htaccess  網址改寫控制檔(SEO urls) \config.php 系統設定檔 \php.ini  php相關設定

46 MVC+L模式 Model – 數據與資料庫等處理 View – UI介面 Controller – 程式碼 Language – 語系處理

47 前台 M: \catalog\model\ V: \catalog\view\ C: \catalog\controller\ L: \catalog\language\ 後台 M: \admin\model\ V: \admin\view\ C: \admin\controller\ L: \admin\language\ 要修改時就需要這個對應表 例如我要改前台的顯示，那就要找\catalog\view\

48 前台UI對應圖

49 前台UI對應圖

50 前台UI對應圖

51 前台UI對應圖

52 前台程式對應圖

53 前台程式對應圖

54 前台程式對應圖

55 前台程式對應圖

56 中文化不完全的改善

57 中文化不完全

58 mycart\language\zh-TW\common
header.php 直接加入沒有的中英文對應就可以

59 新加兩個 $_['text_attribute'] = '商品屬性';
$_['text_attribute_group'] = '商品屬性類別';

60 result

61 小練習 text_design  版面 text_layout  規劃 text_banner  廣告管理

62 擴充模組基本模組Modules

63 已經安裝的 還沒有安裝的！

64 編排模組出現在版面位置

65 預設會員中心要出現在帳戶右邊

66 要讓會員中心出現在首頁左邊

67

68 怎麼做？

69 試試更多的..

70 廣告管理

71 三種廣告類型 Slideshow Carousel Banner

72 廣告與擴充模組有關係 廣告是透過擴充模組設定來決定顯示在那裡！

73 廣告與擴充模組有關係 設定廣告內容(系統管理內) 擴充模組中設定顯示方式 商品區廣告 首頁下方廣告區 首頁中間

74 新加入一個廣告

75 加入兩張圖

76 完成後記得按save 多個時會自動輪播

77 新增完成一個廣告

78 切換到擴充模組基本模組

79 選擇banner編輯

80 將剛新增的Android banner設定顯示方式

81 設定出現在首頁的左邊

82 result

83 小練習，請試試改成這樣！

84 設定版面上出現的區塊 所有版面都是區塊的組合
Layouts 設定版面上出現的區塊 所有版面都是區塊的組合

85 版面區塊 header left Content-top right content bottom

86 Layouts

87 以首頁為例

88 catalog\view\theme\default\template
以首頁為例 版面檔案存放的位置 前面路徑是 catalog\view\theme\default\template

89 你可以自己做一個版面來替換 使用Notepad++開啟

90 如果拿掉這些

91 Before delete

92 After delete

93 資料庫備份

94 備份的其實是 SQL指令

95 首頁加入浮動視窗

96 需要修改的檔案 catalog\view\theme\default\template\common\home.tpl

97 需要加入一段js與<div>

98 <DIV> 可以在DIV內加上自己需要的圖示與連結
<div id="floatlayer" style="position: absolute; top: 150px; background-color:#CCCCFF" > <h3>This is a heading</h3> <p>This is a paragraph.</p> </div>

99 加入js(javascript)

100 js <script language="javascript"> <!-- lastScrollY=0;
function rollimg(){ var varY = document.body.scrollTop; if (varY <= 0) { varY = document.documentElement.scrollTop; } percent=.1*(varY-lastScrollY); if(percent >0 ) percent=Math.ceil(percent); else percent=Math.floor(percent); var top = parseInt(document.getElementById("floatlayer").style.top); document.getElementById("floatlayer").style.top = (top += percent) + "px"; lastScrollY += percent; document.getElementById("floatlayer").style.left=(document.body.clientWidth/2+357)+"px"; window.setInterval("rollimg()",1); //--> </script>

101 result

102 如何加入圖片與超連結等 需要HTML語法 圖片位置 Image目錄底下 其他頁面的處理相同 但需要知道OpenCart的目錄結構