Home » OpenCart 技巧

[OpenCart]更新引用的 jQuery 版本

[ 日期： | 瀏覽：41,360 | 迴響：45 ]

jQuery 每次的改版除了帶來新的功能之外，有時候也是針對一些 Bugs 來做修正，所以若沒特別原因的話，建議是使用最新版本的 jQuery。但是 OpenCart 官方並不是時時都能配合 jQuery 的更新而同步更新程式。如果想要使用 jQuery 最新版本時，還是得靠自己才是比較實在。

最新版本的 jQuery 檔案可以從 jQuery 官方網站下載取得，然後把檔案放置到 catalog\view\javascript\jquery 資料夾中。

接著打開 catalog/view/theme/佈景/template/common/header.tpl，可以大概的搜尋一下 jquery/jquery- 的內容，就能看到所引用的檔案名稱了：

檢視原始碼 JavaScript
1

<script type="text/javascript" src="catalog/view/javascript/jquery/jquery-1.6.1.min.js"></script>

若路徑沒問題的話，只要把 jQuery 檔案名稱替換成跟跟下載放入的就可以囉。

不過若是 jQuery 卯起來更新的話，我們不就要一直一直的重覆下載及更新嗎？所以筆者會建議 jQuery 檔案的部份就不要使用自己主機上的檔案了，咱們可以使用 Google 或是 jQuery 官方的 CDN 服務：
Google：http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
jQuery：http://code.jquery.com/jquery-latest.min.js

以使用 Google CDN 為例，只要把引用的內容改成：

檢視原始碼 JavaScript
1

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

除了能保持引用最新版本的之外，如果大家都是引用 Google 的話，那麼就能利用瀏覽器 cache 的特性來加快載入！

不過因為 OpenCart 也有使用到 jQuery UI 的功能，所以建議更新時，順便連同 jQuery UI 也一起升級才比較妥當。

45 筆針對 [OpenCart]更新引用的 jQuery 版本 的迴響

1 2

  3. 男丁格爾老師～
    請問，如果是已經修改過的JQ，但版本是1.2的，該要怎麼更新才可以？
    雖然我去下載官方的最新版本，但怎麼改都不行耶= ="不但不能直接套用，把JS位址直接連結您提供的Google或jQuery，都會讓原本的頁面壞掉@@!
    因為覺得選單滑動時會卡卡的，有時滑鼠移上去沒辦法像老師所寫http://abgne.tw/jquery/apply-jquery/slide-q-and-a-list.html底下的範例二那樣的平順、靈敏以及簡潔，所以我想說用老師的方式改改看，但似乎版本不同就會壞...

    這個是問題↓
    https://docs.google.com/open?id=0B1dC5j19pJSkMTVhMzlkYmItNmJiOC00ZmIwLWE2NzItMDY3NTVhM2VmMDY3

    還請老師多幫忙～～

  4. 站長有個問題想請教您~
    最近在Google 網站管理工具有檢索錯誤
    就是跟您一樣的固定網址.html後面會多了/function.include
    變成.html/function.include
    這會是哪裡出了錯誤呢?

  5. 親愛的站長有個我一直找不到答案的問題想請教一下~
    我是用1.5.0.5版本，弄到現在，我一直找不到必須在那裡才能夠修改
    商店訊息的各項資料，像是關於我們、配送說明、隱私權聲明與政策條款，
    不曉的您知道該如何解決這個問題嗎？！
    感謝您播空解答！

  6. 您好，我遇到了麻煩問題:(
    我使用opencart1.4.9.5版本，我想要安裝輪播圖片Simple HomeSlide，
    可是我按照作法放上去了，他卻只出現圖片並沒有幻燈片:(
    該怎麼辦呢？可不可以詳細的教我該如何做才好!我好急噢:(麻煩你了，謝謝您。

  7. 老師，請教您關於opencart的訂單狀態的一個問題，opencart的訂單狀態用foreach讀取的數據庫，我想實現，兩個狀態之間計算時間間隔應該用jquery嗎？比如：
    訂單111 狀態：已提交訂單 時間：2011-10-20 11:30
    訂單111 狀態：已經發貨 時間：2011-10_20 13:00
    如何能實現在中間添加一行自動計算兩行時間差，顯示：1小時30分鐘後

    • 是要加在那個功能上呢?
      你這樣可以用 jQuery 把每一行 tr 取出, 接著再一一執行迴圈來處理你那兩時間計算並新增一個 td 來顯示你要的時間差.

      • 老師，我是想增加在opencart的訂單歷史記錄那裏！具體代碼怎麽寫？感覺這個還是挺使用的！顧客能感知訂單提交後每個處理過程的間隔時間！

          • 老師，是的，是想在一般使用者的歷史訂單中顯示，這個實現復雜嗎？

          • 這要先看看哩, 因為我在 1.5 版中看到的使用者的歷史訂單的狀態只有到年月日, 若要時間的話可能得改 php 程式
            若都要改 php 程式了, 那就直接在 php 那邊輸出就好了(不過 mvc 要改比較多支檔案)

          • opencart修改時間非常的簡單，我是這樣作的!直接修改語言包裏的\catalog\language\english\english.php
            把$_['date_format_short'] = 'd/m/Y';
            這句改成：
            $_['date_format_short'] = 'Y-m-d H:i';
            時間就都出來了

  8. 把以下這段 code 貼到 catalog\view\theme\default\template\account\order_info.tpl 的最下面
    注意一下
    1.因為內容有中文, 所以檔案最後要存成 utf-8 格式(或者把程式放在 js 檔中用引用的方式)
    2.因為我沒有用中文化, 所以程式中我是直接找Order History這樣的字串, 若你名稱不一樣時, 請自行修改

    檢視原始碼 JavaScript
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

    <script type="text/javascript">
	$(function(){
		var $orderHistoryH2 = $('h2:contains(Order History)');
		if($orderHistoryH2.length){
			var $table = $orderHistoryH2.next('.list'), 
				$tr = $table.find('tr');
 
			$tr.each(function(i){
				var $this = $(this), 
					$next = $this.next();
 
				if($next.length){
					$this.after('<tr><td colspan=3 class="left">'+calDatetime($next.find('td:eq(0)').html(), $this.find('td:eq(0)').html())+'</td></tr>');
				}
			});
 
		}
 
		function calDatetime(dateStr1, dateStr2){
			var _tmp1 = dateStr1.split(' '), 
				_tmp2 = _tmp1[0].split('-') 
				_tmp3 = _tmp1[1].split(':');
 
			var date1 = new Date(_tmp2[0], _tmp2[1]*1-1, _tmp2[2], _tmp3[0]*1-1, _tmp3[1]);
 
			_tmp1 = dateStr2.split(' '), 
				_tmp2 = _tmp1[0].split('-') 
				_tmp3 = _tmp1[1].split(':');
			var date2 = new Date(_tmp2[0], _tmp2[1]*1-1, _tmp2[2], _tmp3[0]*1-1, _tmp3[1]);
 
			var diff = date1.getTime() - date2.getTime(), 
				days = 0, hours = 0, minutes = 0, seconds = 0, 
				result = '';
 
			days = Math.floor(diff/1000/60/60/24);
			diff -= days*1000*60*60*24;
 
			hours = Math.floor(diff/1000/60/60);
			diff -= hours*1000*60*60;
 
			minutes = Math.floor(diff/1000/60);
			diff -= minutes*1000*60;
 
			result = days > 0 ? days + '天' : '';
			result += hours > 0 ? hours + '小時' : result != '' ? '0小時' : '';
			result += minutes > 0 ? minutes + '分鐘' :'';
 
		   return result + '後';
		}
	});
</script>

    • 程式沒特別防呆, 若處理時間為0分時, 應該只會出現個"後"字。
      但我想應該不會有這種情況發生才對~~

      • 冒昧的請教，在使用您寫的這段代碼中我想再增加一個計算指定狀態之間的時間間隔，比如訂單狀態Pending到狀態Complete間的時間間隔，結果加上的if語句，一直實現不了！所以只好又來打擾老師:)

  10. 1.flow1 及 flow2 是存放要加總時間用的階段, 請自行改成跟你表格中顯示的一樣才行(像是'訂單提交,等待受理'...)
    2.最後要顯示加總時間的狀態名稱也要改成跟你的一樣

    檢視原始碼 JavaScript
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

    <script type="text/javascript">
	$(function(){
		var $orderHistoryH2 = $('h2:contains(Order History)'); 
 
		// Pending, Shipped 為每一個階段顯示的文字, 若有其它階段請用單引號包起來並用逗號隔開
		var flow1 = ['Pending', 'Shipped'], 
			count1 = 0; 
 
		// 退貨1, 退貨2 為每一個階段顯示的文字, 若有其它階段請用單引號包起來並用逗號隔開
		var flow2 = ['退貨1', '退貨2'], 
			count2 = 0;
		if($orderHistoryH2.length){
			var $table = $orderHistoryH2.next('.list'), 
				$tr = $table.find('tr');
 
			$tr.each(function(i){
				var $this = $(this), 
					$td = $this.find('td'), 
					status = $td.eq(1).html(), 
					$next = $this.next();
 
				if($next.length){
					var $nextTd = $next.find('td'), 
						nextStatus = $nextTd.eq(1).html(), 
						diff = calDatetime($nextTd.eq(0).html(), $td.eq(0).html());
 
					if($.inArray(status, flow1) > -1) count1 += diff;
					else if($.inArray(status, flow2) > -1) count2 += diff;
 
					$this.after('<tr><td colspan=3 class="left">'+formatDatetime(diff)+'後</td></tr>');
				}
 
				// 最後要加總的狀態名稱
				if(status == 'Complete') $this.after('<tr><td colspan=3 class="left">訂單從提交到簽收共耗時'+formatDatetime(count1)+'</td></tr>');
				else if(status == '完成退貨') $this.after('<tr><td colspan=3 class="left">訂單從退貨申請到退貨完成共耗時'+formatDatetime(count2)+'</td></tr>');
			});
		}
 
		function calDatetime(dateStr1, dateStr2){
			var _tmp1 = dateStr1.split(' '), 
				_tmp2 = _tmp1[0].split('-') 
				_tmp3 = _tmp1[1].split(':');
 
			var date1 = new Date(_tmp2[0], _tmp2[1]*1-1, _tmp2[2], _tmp3[0]*1-1, _tmp3[1]);
 
			_tmp1 = dateStr2.split(' '), 
				_tmp2 = _tmp1[0].split('-') 
				_tmp3 = _tmp1[1].split(':');
			var date2 = new Date(_tmp2[0], _tmp2[1]*1-1, _tmp2[2], _tmp3[0]*1-1, _tmp3[1]);
 
		   return date1.getTime() - date2.getTime();
		}
 
		function formatDatetime(diff){
			var days = 0, hours = 0, minutes = 0, seconds = 0, 
				result = '';
 
			days = Math.floor(diff/1000/60/60/24);
			diff -= days*1000*60*60*24;
 
			hours = Math.floor(diff/1000/60/60);
			diff -= hours*1000*60*60;
 
			minutes = Math.floor(diff/1000/60);
			diff -= minutes*1000*60;
 
			result = days > 0 ? days + '天' : '';
			result += hours > 0 ? hours + '小時' : result != '' ? '0小時' : '';
			result += minutes > 0 ? minutes + '分鐘' :'';
 
		   return result;
		}
	});
</script>
1 2

發表迴響