好消息公告:【最新購物網站架站教學】購物網站購物車五大天王:osCommerce、Twe-Commerce、Zen Cart、xt:Commerce、ecshop 實況錄影架站教學課程已經完成製作,保有【osCommerce最完整購物網站架站教學】DVD課程郵寄到府函授課程外,另增加購物車四大天王:Twe-Commerce、Zen Cart、xt:Commerce、ecshop 實況架站線上錄片架站教學
(份量增加很多價格還是不變!)限期30天。
最新課程表:http://por.tw/sale/cmmerse-4-all/index.php


特訓密技基地總教頭
ster168ster@gmail.com
English Sentence Loading...
英語句子加載中...
  • 1 
瀏覽模式: 普通 | 清單

複製 zen cart 購物網站範本的方法

複製 zen cart 購物網站範本的方法

首先說明的是,這裡只是說明複製網站範本的理論,用於學習用途,複製並使用未經授權的範本是非法的。
第一次寫這類說明,沒有經驗,歡迎大家指正、補充。

這裡以zen cart或是osc的範本為例,其他的範本也是同樣的方法。

1. 首先在你的範本目錄下,建立一個新的範本,例如:\includes\templates\mytemplate\
複製\includes\templates\template_default下的所有目錄和檔案到新的目錄中

2. 用文字編輯器修改\includes\templates\mytemplate\template_info.php,修改其中的名稱、版本、作者等內容。

3. 在後台開啟新的範本,然後再工具-外觀控制中,點擊重設

4. 取得網站範本的圖片
用整站下載軟體實現,例如Teleport Pro,下載全站的所有圖形檔案,要保留原站的檔案結構。
圖片通常都在/images目錄下,將下載到的/images下的圖形檔案都複製到zen cart的/images目錄下。

5. 取得網站範本的按鈕
也可以用Teleport Pro下載所有按鈕,通常是英文的,osc的按鈕圖片在/includes/languages/english/images/buttons目錄下。
將下載的按鈕儲存到zen cart的按鈕目錄/includes/templates/mytemplate/buttons/english/ 和 /includes/templates/mytemplate/buttons/tchinese/ 中,在tchinese目錄中的按鈕,可以自己用圖像處理軟體轉換成中文。

osc範本中,可供下載的按鈕有:

CODE:

 </font><a href=\"http://www.domainname.com/osc/includes/languages/english/images/buttons/button_address_book.gif\"><font size=\"3\">http://www.domainname.com/osc/includes/languages/english/images/buttons/button_address_book.gif</font></a>
 <a href=\"http://www.domainname.com/osc/includes/languages/english/images/buttons/button_add_address.gif\"><font size=\"3\">http://www.domainname.com/osc/includes/languages/english/images/buttons/button_add_address.gif</font></a>
 <a href=\"http://www.domainname.com/osc/includes/languages/english/images/buttons/button_back.gif\"><font size=\"3\">http://www.domainname.com/osc/includes/languages/english/images/buttons/button_back.gif</font></a>
 <a href=\"http://www.domainname.com/osc/includes/languages/english/images/buttons/button_buy_now.gif\"><font size=\"3\">http://www.domainname.com/osc/includes/languages/english/images/buttons/button_buy_now.gif</font></a>
 <a href=\"http://www.domainname.com/osc/includes/languages/english/images/buttons/button_change_address.gif\"><font size=\"3\">http://www.domainname.com/osc/includes/languages/english/images/buttons/button_change_address.gif</font></a>
 <a href=\"http://www.domainname.com/osc/includes/languages/english/images/buttons/button_checkout.gif\"><font size=\"3\">http://www.domainname.com/osc/includes/languages/english/images/buttons/button_checkout.gif</font></a>
 <a href=\"http://www.domainname.com/osc/includes/languages/english/images/buttons/button_confirm_order.gif\"><font size=\"3\">http://www.domainname.com/osc/includes/languages/english/images/buttons/button_confirm_order.gif</font></a>
 <a href=\"http://www.domainname.com/osc/includes/languages/english/images/buttons/button_continue.gif\"><font size=\"3\">http://www.domainname.com/osc/includes/languages/english/images/buttons/button_continue.gif</font></a>
 <a href=\"http://www.domainname.com/osc/includes/languages/english/images/buttons/button_continue_shopping.gif\"><font size=\"3\">http://www.domainname.com/osc/includes/languages/english/images/buttons/button_continue_shopping.gif</font></a>
 <a href=\"http://www.domainname.com/osc/includes/languages/english/images/buttons/button_delete.gif\"><font size=\"3\">http://www.domainname.com/osc/includes/languages/english/images/buttons/button_delete.gif</font></a>
 <a href=\"http://www.domainname.com/osc/includes/languages/english/images/buttons/button_edit_account.gif\"><font size=\"3\">http://www.domainname.com/osc/includes/languages/english/images/buttons/button_edit_account.gif</font></a>
 <a href=\"http://www.domainname.com/osc/includes/languages/english/images/buttons/button_in_cart.gif\"><font size=\"3\">http://www.domainname.com/osc/includes/languages/english/images/buttons/button_in_cart.gif</font></a>
 <a href=\"http://www.domainname.com/osc/includes/languages/english/images/buttons/button_login.gif\"><font size=\"3\">http://www.domainname.com/osc/includes/languages/english/images/buttons/button_login.gif</font></a>
 <a href=\"http://www.domainname.com/osc/includes/languages/english/images/buttons/button_notifications.gif\"><font size=\"3\">http://www.domainname.com/osc/includes/languages/english/images/buttons/button_notifications.gif</font></a>
 <a href=\"http://www.domainname.com/osc/includes/languages/english/images/buttons/button_quick_find.gif\"><font size=\"3\">http://www.domainname.com/osc/includes/languages/english/images/buttons/button_quick_find.gif</font></a>
 <a href=\"http://www.domainname.com/osc/includes/languages/english/images/buttons/button_remove_notifications.gif\"><font size=\"3\">http://www.domainname.com/osc/includes/languages/english/images/buttons/button_remove_notifications.gif</font></a>
 <a href=\"http://www.domainname.com/osc/includes/languages/english/images/buttons/button_reviews.gif\"><font size=\"3\">http://www.domainname.com/osc/includes/languages/english/images/buttons/button_reviews.gif</font></a>
 <a href=\"http://www.domainname.com/osc/includes/languages/english/images/buttons/button_search.gif\"><font size=\"3\">http://www.domainname.com/osc/includes/languages/english/images/buttons/button_search.gif</font></a>
 <a href=\"http://www.domainname.com/osc/includes/languages/english/images/buttons/button_shipping_options.gif\"><font size=\"3\">http://www.domainname.com/osc/includes/languages/english/images/buttons/button_shipping_options.gif</font></a>
 <a href=\"http://www.domainname.com/osc/includes/languages/english/images/buttons/button_tell_a_friend.gif\"><font size=\"3\">http://www.domainname.com/osc/includes/languages/english/images/buttons/button_tell_a_friend.gif</font></a>
 <a href=\"http://www.domainname.com/osc/includes/languages/english/images/buttons/button_update.gif\"><font size=\"3\">http://www.domainname.com/osc/includes/languages/english/images/buttons/button_update.gif</font></a>
 <a href=\"http://www.domainname.com/osc/includes/languages/english/images/buttons/button_update_cart.gif\"><font size=\"3\">http://www.domainname.com/osc/includes/languages/english/images/buttons/button_update_cart.gif</font></a>
 <a href=\"http://www.domainname.com/osc/includes/languages/english/images/buttons/button_write_review.gif\"><font size=\"3\">http://www.domainname.com/osc/includes/languages/english/images/buttons/button_write_review.gif</font></a>
 <a href=\"http://www.domainname.com/osc/includes/languages/english/images/buttons/small_delete.gif\"><font size=\"3\">http://www.domainname.com/osc/includes/languages/english/images/buttons/small_delete.gif</font></a>
 <a href=\"http://www.domainname.com/osc/includes/languages/english/images/buttons/small_edit.gif\"><font size=\"3\">http://www.domainname.com/osc/includes/languages/english/images/buttons/small_edit.gif</font></a>
 <a href=\"http://www.domainname.com/osc/includes/languages/english/images/buttons/small_view.gif\"><font size=\"3\">http://www.domainname.com/osc/includes/languages/english/images/buttons/small_view.gif</font></a>
 <font size=\"3\">

類似的,zen cart範本的按鈕有

CODE:

 </font><a href=\"http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_add_address.gif\"><font size=\"3\">http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_add_address.gif</font></a>
 <a href=\"http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_back.gif\"><font size=\"3\">http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_back.gif</font></a>
 <a href=\"http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_buy_now.gif\"><font size=\"3\">http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_buy_now.gif</font></a>
 <a href=\"http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_change_address.gif\"><font size=\"3\">http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_change_address.gif</font></a>
 <a href=\"http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_checkout.gif\"><font size=\"3\">http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_checkout.gif</font></a>
 <a href=\"http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_confirm_order.gif\"><font size=\"3\">http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_confirm_order.gif</font></a>
 <a href=\"http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_continue.gif\"><font size=\"3\">http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_continue.gif</font></a>
 <a href=\"http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_continue_shopping.gif\"><font size=\"3\">http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_continue_shopping.gif</font></a>
 <a href=\"http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_delete.gif\"><font size=\"3\">http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_delete.gif</font></a>
 <a href=\"http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_download.gif\"><font size=\"3\">http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_download.gif</font></a>
 <a href=\"http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_in_cart.gif\"><font size=\"3\">http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_in_cart.gif</font></a>
 <a href=\"http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_login.gif\"><font size=\"3\">http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_login.gif</font></a>
 <a href=\"http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_next.gif\"><font size=\"3\">http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_next.gif</font></a>
 <a href=\"http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_ppcheckout.gif\"><font size=\"3\">http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_ppcheckout.gif</font></a>
 <a href=\"http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_prev.gif\"><font size=\"3\">http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_prev.gif</font></a>
 <a href=\"http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_redeem.gif\"><font size=\"3\">http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_redeem.gif</font></a>
 <a href=\"http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_return_to_product_list.gif\"><font size=\"3\">http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_return_to_product_list.gif</font></a>
 <a href=\"http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_reviews.gif\"><font size=\"3\">http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_reviews.gif</font></a>
 <a href=\"http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_search.gif\"><font size=\"3\">http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_search.gif</font></a>
 <a href=\"http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_send.gif\"><font size=\"3\">http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_send.gif</font></a>
 <a href=\"http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_shipping_estimator.gif\"><font size=\"3\">http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_shipping_estimator.gif</font></a>
 <a href=\"http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_sold_out.gif\"><font size=\"3\">http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_sold_out.gif</font></a>
 <a href=\"http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_sold_out_sm.gif\"><font size=\"3\">http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_sold_out_sm.gif</font></a>
 <a href=\"http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_submit.gif\"><font size=\"3\">http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_submit.gif</font></a>
 <a href=\"http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_TellAFriend.gif\"><font size=\"3\">http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_TellAFriend.gif</font></a>
 <a href=\"http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_tell_a_friend.gif\"><font size=\"3\">http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_tell_a_friend.gif</font></a>
 <a href=\"http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_unsubscribe.gif\"><font size=\"3\">http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_unsubscribe.gif</font></a>
 <a href=\"http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_update.gif\"><font size=\"3\">http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_update.gif</font></a>
 <a href=\"http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_update_cart.gif\"><font size=\"3\">http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_update_cart.gif</font></a>
 <a href=\"http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_write_review.gif\"><font size=\"3\">http://www.domainname.com/zencart/includes/languages/english/images/buttons/button_write_review.gif</font></a>
 <a href=\"http://www.domainname.com/zencart/includes/languages/english/images/buttons/small_delete.gif\"><font size=\"3\">http://www.domainname.com/zencart/includes/languages/english/images/buttons/small_delete.gif</font></a>
 <a href=\"http://www.domainname.com/zencart/includes/languages/english/images/buttons/small_edit.gif\"><font size=\"3\">http://www.domainname.com/zencart/includes/languages/english/images/buttons/small_edit.gif</font></a>
 <a href=\"http://www.domainname.com/zencart/includes/languages/english/images/buttons/small_view.gif\"><font size=\"3\">http://www.domainname.com/zencart/includes/languages/english/images/buttons/small_view.gif</font></a>
 <font size=\"3\">

上面的清單中,自己取代www.domainname.com/osc 或是 www.domainname.com/zencart 為你需要複製的網站位址。

6. 取得網站範本的CSS檔案。osc的stylesheet.css檔案在根目錄下。stylesheet.css檔案的具體路徑在檢視頁面原始碼時能看到。
開啟獲得的stylesheet.css檔案,剪貼到/includes/templates/mytemplate/css/stylesheet.css檔案中,追加在原來的css檔案後,不要覆蓋原有的內容。

7. 開啟需要複製的zen cart或是osc網站,檢視原始碼。(有些網站不容許你檢視原始碼,要一些技巧,這裡就不詳細討論這個問題了)

8. 在原始碼中複製
到 之間的內容作為\includes\templates\mytemplate\common\tpl_header.php,移除該檔案內原來的內容。

到 之間的內容作為\includes\templates\mytemplate\common\tpl_footer.php,移除該檔案內原來的內容。

(有些範本把邊框部分的顯示也放到header.php中,那麼你需要找出屬於邊框的部分並移除)

9. 現在,整個網站的外觀已經基本出來了。需要取代上面的這兩個檔案內的連結,這裡是範本轉換的關鍵。根據下面的模式取代,第一行是需要取代的類似連結,第二行是正確的代碼:

CODE:

 </font><a href=\"http://www.domainname.com/osc/index.php\"><font size=\"3\">http://www.domainname.com/osc/index.php</font></a><font size=\"3\"> </font></p> <p>
 <a href=\"http://www.domainname.com/osc/account.php\"><font size=\"3\">http://www.domainname.com/osc/account.php</font></a><font size=\"3\"> </font></p> <p>
 <a href=\"http://www.domainname.com/osc/shopping_cart.php\"><font size=\"3\">http://www.domainname.com/osc/shopping_cart.php</font></a><font size=\"3\"> </font></p> <p>
 <a href=\"http://www.domainname.com/osc/checkout_shipping.php\"><font size=\"3\">http://www.domainname.com/osc/checkout_shipping.php</font></a><font size=\"3\"> </font></p> <p>
 <a href=\"http://www.domainname.com/osc/shipping.php\"><font size=\"3\">http://www.domainname.com/osc/shipping.php</font></a><font size=\"3\"> </font></p> <p>
 <a href=\"http://www.domainname.com/osc/advanced_search.php\"><font size=\"3\">http://www.domainname.com/osc/advanced_search.php</font></a><font size=\"3\"> </font></p> <p>
 <a href=\"http://www.domainname.com/osc/products_new.php\"><font size=\"3\">http://www.domainname.com/osc/products_new.php</font></a><font size=\"3\"> </font></p> <p>
 <a href=\"http://www.domainname.com/osc/specials.php\"><font size=\"3\">http://www.domainname.com/osc/specials.php</font></a><font size=\"3\"> </font></p> <p>
 <a href=\"http://www.domainname.com/osc/featured_products.php\"><font size=\"3\">http://www.domainname.com/osc/featured_products.php</font></a><font size=\"3\"> </font></p> <p>
 <a href=\"http://www.domainname.com/osc/products_all.php\"><font size=\"3\">http://www.domainname.com/osc/products_all.php</font></a><font size=\"3\"> </font></p> <p>
 <a href=\"http://www.domainname.com/osc/upcoming_products.php\"><font size=\"3\">http://www.domainname.com/osc/upcoming_products.php</font></a><font size=\"3\"> </font></p> <p>
 <a href=\"http://www.domainname.com/osc/contact_us.php\"><font size=\"3\">http://www.domainname.com/osc/contact_us.php</font></a><font size=\"3\"> </font></p> <p><font size=\"3\">

還有一些必須的代碼內含,

使用者登入、登出的代碼:

CODE:
 </font></p> <p><font size=\"3\">    |     </font></p> <p><font size=\"3\">} else {
 if (STORE_STATUS == '0') {
 ?> </font></p> <p>
 <font size=\"3\">

貨幣選取方框的代碼:

CODE:
 </font></p> <p><font size=\"3\">if (isset($currencies) && is_object($currencies)) { </font></p> <p><font size=\"3\">reset($currencies->currencies);
 $currencies_array = array();
 while (list($key, $value) = each($currencies->currencies)) {
 $currencies_array[] = array('id' => $key, 'text' => $value['title']);
 } </font></p> <p><font size=\"3\">$hidden_get_variables = '';
 reset($_GET);
 while (list($key, $value) = each($_GET)) {
 if ( ($key != 'currency') && ($key != zen_session_name()) && ($key != 'x') && ($key != 'y') ) {
 $hidden_get_variables .= zen_draw_hidden_field($key, $value);
 }
 }
 }
 $content = zen_draw_form('currencies', zen_href_link(basename(ereg_replace('.php','', $PHP_SELF)), '', $request_type, false), 'get');
 $content .= zen_draw_pull_down_menu('currency', $currencies_array, $_SESSION['currency'], 'onchange="this.form.submit();" style="width: 100%"') . $hidden_get_variables . zen_hide_session_id();
 $content .= ''; </font></p> <p><font size=\"3\">echo $content;
 ?>
 

語系選取的代碼:

CODE:

 if (!isset($lng) || (isset($lng) && !is_object($lng))) {
 $lng = new language;
 }
 $lng_cnt = 0;
 while (list($key, $value) = each($lng->catalog_languages)) {
 $content .= '' . zen_image(DIR_WS_LANGUAGES . $value['directory'] . '/images/' . $value['image'], $value['name']) . '     ';
 $lng_cnt ++;
 if ($lng_cnt >= MAX_LANGUAGE_FLAGS_COLUMNS) {
 $lng_cnt = 0;
 $content .= '
 ';
 }
 }
 echo $content;
 ?>
 

經由以上的取代,tpl_header.php和tpl_footer.php中所有的外部連結都應該取代為你自己的連結了。
若果還有類似
http://www.domainname.com/osc/index.php?cPath=37_28 的連結,這是單個商品的連結,可以移除,或改成你自己的商品連結。

10. 下一步,將tpl_header.php和tpl_footer.php這兩個檔案中的文字,取代為PHP代碼,以支援多語系。若果你只用單一語系,直接修改為你需要的文字即可。例如,

CODE:

 類似 「建立帳號」 改為
 類似 「商品分類」 改為
 類似 「登出」 改為
 類似 「我的帳號」 改為
 類似 「登入」 改為 </font></p> <p><font size=\"3\">類似 「購物車中的貨品」 改為
 類似 「結帳」 改為 </font></p> <p><font size=\"3\">類似「搜尋」改為
 類似「進階搜尋」改為 </font></p> <p><font size=\"3\">類似 「特價商品」 改為
 類似 「新進商品」 改為
 類似 「推薦商品」 改為
 類似 「所有商品」 改為 </font></p> <p><font size=\"3\">類似 「聯繫我們」 改為
 類似 「貨幣」 改為
 類似 「語系」 改為
 

還有一些可能用到的代碼:

引用:


Parse Time: - Number of Queries: queryCount(); ?> - Query Time: queryTime(); ?>

經由以上的十步動作,基本形成了網站的外觀。

全新做一個自己的Zen cart購物網站模板步驟為何?應參考那些檔案?

Zen Cart的模板設計比較複雜,需要一定的時間來熟悉。一旦你瞭解了它的結構,就會慢慢習慣了。

首先要閱讀常見問答部分的:如何添加、製作新模板。

Zen Cart的設計沒有什麼特別,與以前設計HTML頁面是一樣的。只是整個頁面分成了好幾個部分,並加入了PHP代碼。

通常,頁面分為頁眉(header),頁腳(footer),邊框(sideboxes)。所以設計頁面的時候,要記住Zen Cart是如何組織這些頁面的。

頁面是通過CSS樣式表來控制的。樣式表控制表格單元的背景圖案、字體的顏色和樣式等等。所以,假如你需要修改邊框標題欄的字體,那麼查看樣式表文件。

Zen Cart在頁面添加圖像有兩種方式。可以使用圖像目錄的相對路徑,或者在模板中用php變量定義圖像。如果你使用https服務器,並且採用相對圖像路徑,那麼https的圖像目錄下也要有同樣的圖像,否則https服務器很可能會給出警告提示。

Zen Cart可以設置成任意的html/flash的界面,只是比通常的html頁面的設計費時。你可以從修改預設的模板開始,先修改CSS文件和三欄格式的界面。

開始先採用不同的顏色,很快就可以設計出完全不同的風格。

最後,在設計模板前要先計劃好你網頁的內容,事半功倍。

下面是zen cart頁面各部分相對應模板文件的一個列表:

attachments/200805/0146286085.jpg

  • 1 
購物網站架設教學【網路補習班】教學基地:致力於收集各類購物網站教育資料及技術資訊,便於本人和廣大網友及店家查詢檢索,無論公司或個人認為本站存在侵權內容均可與本站聯繫,任何此類反饋資訊一經查明屬實後,將立即移除!