電子商務網站架設技術 外部連結

1. 零售業批貨技巧與 網拍架站創業訓練班 電子商務網站架設技術外部連結 建國科大資管系 饒瑞佶 2014/4

2. Google Maps

3. Download Google maps module http://www.opencart.com/index.php?route=extension/extension/info&extension_id=5561

4. 安裝 • 解壓縮 • Catalog目錄內所有資料複製到c:\appserv\www\store\catalog • admin目錄內所有資料複製到c:\appserv\www\store\mycart

5. Install Google Maps extension

6. Add Maps 地圖點編號，設定顯示連結用 先加入一個地圖點 請參考my_maps1.htm

7. Add Module 地圖點編號，設定顯示連結用 設定出現位置

8. 首頁

9. YouTuBe

10. http://www.opencart.com/index.php?route=extension/extension/info&extension_id=335&path=5&filter_license=0&filter_download_id=28&page=3http://www.opencart.com/index.php?route=extension/extension/info&extension_id=335&path=5&filter_license=0&filter_download_id=28&page=3

11. 安裝 • 將解開後的catalog與admin目錄內的檔案覆蓋原本網站上內容 • 記得admin內的檔案要複製到mycart

12. 影片編號 影片出現位置 影片大小

14. Google Translate

15. http://www.opencart.com/index.php?route=extension/extension/info&extension_id=5368&path=5&filter_license=0&filter_download_id=28&page=3http://www.opencart.com/index.php?route=extension/extension/info&extension_id=5368&path=5&filter_license=0&filter_download_id=28&page=3

16. 安裝 • 將解開後的catalog與admin目錄內的檔案附蓋原本網站上內容 • 記得admin內的檔案要複製到mycart

18. 翻譯器出現位置

21. Visitor Counter

22. http://www.opencart.com/index.php?route=extension/extension/info&extension_id=882&path=5&filter_license=0&filter_download_id=28&page=6http://www.opencart.com/index.php?route=extension/extension/info&extension_id=882&path=5&filter_license=0&filter_download_id=28&page=6

24. 計數方式 計數器文字與底色 計數器出現位置

26. 加入SNS連結

27. http://www.opencart.com/index.php?route=extension/extension/info&extension_id=3343&path=5&filter_license=0&filter_download_id=28http://www.opencart.com/index.php?route=extension/extension/info&extension_id=3343&path=5&filter_license=0&filter_download_id=28

29. Installguide • 1) copy catalog folders in the root folder of your website • 2) go to catalog\view\theme\default\stylesheet\stylesheet.css and at the end of file add:

30. go to catalog\view\theme\default\stylesheet\stylesheet.css and at the end of file add div#twitter{ position:fixed; width:72px; height:72px; bottom:0px; right:2px; } div#Xing{ position:fixed; width:72px; height:72px; bottom:0px; right:2px; } div#Facebook{ position:fixed; width:72px; height:72px; bottom:0px; right:2px; } div#Youtube{ position:fixed; width:72px; height:72px; bottom:0px; right:2px; }

31. if you want to integrate it into the Home page only go to catalog\view\theme\default\template\common\home.tpl and after <?php echo $footer; ?> add </div> <div id="Ntezwerk"><div align="center"> <a target="_blank" href="https://www.xing.com/" title="visit us by Xing"><img alt="" src="catalog/view/theme/default/image/xing-icon72.png"/></a> <a target="_blank" href="http://twitter.com" title="Follow us on twitter"><img alt="" src="catalog/view/theme/default/image/twitter-icon72.png"/></a> <a target="_blank" href="http://www.facebook.com" title="visit us by Facebook"><img alt="" src="catalog/view/theme/default/image/facebook-icon72.png"/></a> <a target="_blank" href="http://www.youtube.com/" title="visit us by Youtube"><img alt="" src="catalog/view/theme/default/image/youtube-icon72.png"/></a> <g:plusone size="tall"></g:plusone> </div>

32. result

33. if you want to integrate it into the footer,so it shows on every pagego to catalog\view\theme\default\template\common\footer.tpl and after <div id="powered"><?php echo $powered; ?> add </div> <div id="Ntezwerk"><div align="center"> <a target="_blank" href="https://www.xing.com/" title="visit us by Xing"><img alt="" src="catalog/view/theme/default/image/xing-icon72.png"/></a> <a target="_blank" href="http://twitter.com/" title="Follow us on twitter"><img alt="" src="catalog/view/theme/default/image/twitter-icon72.png"/></a> <a target="_blank" href="http://www.facebook.com/" title="visit us by Facebook"><img alt="" src="catalog/view/theme/default/image/facebook-icon72.png"/></a> <a target="_blank" href="http://www.youtube.com/" title="visit us by Youtube"><img alt="" src="catalog/view/theme/default/image/youtube-icon72.png"/></a> <g:plusone size="tall"></g:plusone> </div>

34. result

35. 延伸 • 表示可以依此方式任意增加自己需要的link • 例如建國科大

36. 利用FB做產品Comments

37. 利用FB做產品Comments http://developers.facebook.com/docs/plugins/ 選擇Comments

38. 填寫資料 網址 寬度 資料筆數 顏色

39. 取得code

40. 加入code C:\AppServ\www\store\catalog\view\theme\default\template\product\product.tpl 最上方還要加入JavaScript code before 網址或IP after

41. result