[OpenCart]簡化會員註冊表單(適用 1.4.x 及 1.5.1.x)

前幾天梅干才剛分享 OpenCart 會員註冊表單簡化的方式，沒想到在月底就釋出 1.5.0 版了。本來以為原本的簡化程式也是可以相容的，但因為模板也不同了，且原本選擇國別的下拉選單是有 id 為 country_id 的，但現在新版中也沒有了，因此就稍微花一點時間把原本的程式修改了一下：

檢視原始碼 JavaScript

$(function(){
	// 隱藏 Fax
	$('[name=fax]').parents('tr').hide();
 
	// 隱藏 Company
	$('[name=company]').parents('tr').hide();
 
	// 隱藏 Last Name
	$('[name=lastname]').val('taiwan').parents('tr').hide();
 
	// 隱藏 City
	$('[name=city]').val('taiwan').parents('tr').hide();
 
	// 隱藏 Address 2
	$('[name=address_2]').parents('tr').hide();
 
	// 隱藏 Country 及 Region / State
	if($('.content td').length>0) $('.content td:eq(0)').html($('.content td:eq(0)').html().replace('T\'ai-pei city', '').replace('taiwan ', '').replace('taiwan', '').replace('Taiwan', ''));
	var $countryId = $('[name=country_id]').wrap('<div class="ahide"></div>').parent();
	var $zoneId = $('[name=zone_id]').wrap('<div class="ahide"></div>').parent();
	$countryId.html('<select name="country_id"><option value="206">Taiwan</option></select>').prevUntil('.large-field').andSelf().hide();
	$zoneId.html('<select name="zone_id"><option value="3159">T\'ai-pei city</option></select>').prevUntil('.large-field').andSelf().hide();
 
	// 針對一般註冊的
	$countryId.parent().parent().filter('tr').hide();
	$zoneId.parent().parent().filter('tr').hide();
});

原本的註冊表單欄位是區分的蠻細的，且是比較不符合台灣這邊的使用。其中紅色區塊的部份就是接下來要隱藏的部份

當套上程式後就~噹噹：

若您是使用 1.4.x 版的話，要套上的模板為

檢視原始碼 Text

catalog/view/theme/佈景/template/account/create.tpl
catalog/view/theme/佈景/template/account/edit.tpl
catalog/view/theme/佈景/template/account/addresses.tpl
catalog/view/theme/佈景/template/account/address.tpl

1.5.1.x 則是在

檢視原始碼 Text

catalog/view/theme/佈景/template/account/register.tpl
catalog/view/theme/佈景/template/account/edit.tpl
catalog/view/theme/佈景/template/account/address_list.tpl
catalog/view/theme/佈景/template/account/address_form.tpl

除了把程式一一加到這幾個模板中之外，也可以直接存成一個 js 檔案，然後放置在 catalog/view/javascript 中，直接在 catalog/view/theme/佈景/template/common/footer.tpl 中引用

2011/06/16: 感謝網友 jeff 提出關於結帳時的註冊問題，以下是針對該問題來修正。

OpenCart 1.5 的結帳註冊功能是透過 ajax 的方式來載入頁面，且像是欄位的內容是直接寫在 div 中，所以利用單純的一個外部 js 檔案來隱藏這些欄位，所以接下來大部份的 script 都是要寫在模板中。說實話，如果真的都要修改模板的話，那不如直接把那幾個欄位換成隱藏欄位就好。不過為了避免不懂程式的人改掛了，所以接下來筆者一樣是會利用 jQuery 來隱藏欄位內容。

打開 catalog/view/theme/佈景/template/checkout/register.tpl，並在最下面加入：

檢視原始碼 JavaScript

<script>
$(function(){
	var $left = $('[name=lastname]').parents('.left'),
		$right = $left.next('.right'),
		_leftHtml = $left.html(),
		_rightHtml = $right.html();
 
	$left.html(_leftHtml.replace(' <?php echo $entry_lastname; ?>', '').replace('<?php echo $entry_fax; ?>', ''));
	$right.html(_rightHtml.replace('<?php echo $entry_company; ?>', '').replace('<?php echo $entry_address_2; ?>', '').replace(' <?php echo $entry_city; ?>', '').replace(' <?php echo $entry_country; ?>', '').replace(' <?php echo $entry_zone; ?>', ''));
 
	$('[name=lastname]').val('taiwan').prevUntil('.large-field').andSelf().hide();
	$('[name=fax]').prevUntil('.large-field').andSelf().hide();
	$('[name=company]').prevUntil('h2').andSelf().hide().nextUntil('.required').hide();
	$('[name=city]').val('taiwan').prevUntil('.large-field').andSelf().hide();
	$('[name=address_2]').prevUntil('.large-field').andSelf().hide();
	var $countryId = $('[name=country_id]').wrap('<div class="ahide"></div>').parent();
	var $zoneId = $('[name=zone_id]').wrap('<div class="ahide"></div>').parent();
	$countryId.html('<select name="country_id"><option value="206">Taiwan</option></select>').prevUntil('.large-field').andSelf().hide();
	$zoneId.html('<select name="zone_id"><option value="3159">T\'ai-pei city</option></select>').prevUntil('.large-field').andSelf().hide();
});
</script>

接著再打開 catalog/view/佈景/template/checkout/address.tpl，並在最下面加入：

檢視原始碼 JavaScript

<script>
$(function(){
	$('[name=address_id] option').html(function(){
		return $(this).html().replace(' taiwan', '').replace(', taiwan', '').replace(', Taiwan', '');
	});
});
</script>
<script type="text/javascript" src="catalog/view/javascript/plugins.js"></script>

接著再打開 catalog/view/theme/佈景/template/checkout/guest.tpl，並在最下面加入：

檢視原始碼 JavaScript

<script>
$(function(){
	var $left = $('[name=lastname]').parents('.left'),
		$right = $left.next('.right'),
		_leftHtml = $left.html(),
		_rightHtml = $right.html();
 
	$left.html(_leftHtml.replace(' <?php echo $entry_lastname; ?>', '').replace('<?php echo $entry_fax; ?>', ''));
	$right.html(_rightHtml.replace('<?php echo $entry_company; ?>', '').replace('<?php echo $entry_address_2; ?>', '').replace(' <?php echo $entry_city; ?>', '').replace(' <?php echo $entry_country; ?>', '').replace(' <?php echo $entry_zone; ?>', ''));
 
	$('[name=lastname]').val('taiwan').prevUntil('.large-field').andSelf().hide();
	$('[name=fax]').prevUntil('.large-field').andSelf().hide();
	$('[name=company]').prevUntil('h2').andSelf().hide().nextUntil('.required').hide();
	$('[name=city]').val('taiwan').prevUntil('.large-field').andSelf().hide();
	$('[name=address_2]').prevUntil('.large-field').andSelf().hide();
	var $countryId = $('[name=country_id]').wrap('<div class="ahide"></div>').parent();
	var $zoneId = $('[name=zone_id]').wrap('<div class="ahide"></div>').parent();
	$countryId.html('<select name="country_id"><option value="206">Taiwan</option></select>').prevUntil('.large-field').andSelf().hide();
	$zoneId.html('<select name="zone_id"><option value="3159">T\'ai-pei city</option></select>').prevUntil('.large-field').andSelf().hide();
});
</script>

最後打開 catalog/view/theme/佈景/template/checkout/guest_shipping.tpl，並在最下面加入：

檢視原始碼 JavaScript

1	<script type="text/javascript" src="catalog/view/javascript/plugins.js"></script>

存檔後就可以收工看效果了。

範例 1

2012/01/03 更新修正在一般直接註冊時沒有隱藏標籤的問題。

2011/12/04 更新修正在 IE8 中會導致錯誤的問題。

//On load page, init the timer which check if the there are anchor changes each 300 ms $().ready(function(){ setInterval("checkAnchor()", 300); }); var currentAnchor = null; //Function which chek if there are anchor changes, if there are, sends the ajax petition function checkAnchor(){ //Check if it has changes if(currentAnchor != document.location.hash){ currentAnchor = document.location.hash; //if there is not anchor, the loads the default section if(!currentAnchor) query = "CH=home"; else { //Creates the string callback. This converts the url URL/#main&id=2 in URL/?section=main&id=2 var splits = currentAnchor.substring(1).split('&'); //Get the section var CH = splits[0]; delete splits[0]; //Create the params string var params = splits.join('&'); var query = "CH=" + CH + params; } //Send the petition $("#loading").show(); $.get("index_into.php",query, function(data){ $("#wrapper").html(data); $("#loading").hide(); }); } }

159 筆針對 [OpenCart]簡化會員註冊表單(適用 1.4.x 及 1.5.1.x) 的迴響

1 2 3 4 5 6 7 8 下一頁 »

小高於 2011-06-07 10:07:08 說：

謝謝男大分享
可是如果是地區性差異的不就等於要在做一張網頁嗎?
跟直接刪掉有何不同呢?
<-新手的疑惑

登入後再回覆
- 男丁格爾於 2011-06-07 10:14:47 說：
  
  寫一個專用的程式是比較正確的, 但我只是用 script 把可能用不到的欄位"隱藏"起來, 讓一般人要註冊時看不見而已
  希望在不修改 oc 核心程式的情況下來達到效果
  
  登入後再回覆

請教~男丁大大

如何下面的script 修正成輸出網址可以是這樣 ?section=main&id=2 而非他預設的 URL/#main&id=2

//On load page, init the timer which check if the there are anchor changes each 300 ms
$().ready(function(){
	setInterval("checkAnchor()", 300);
});
var currentAnchor = null;
//Function which chek if there are anchor changes, if there are, sends the ajax petition
function checkAnchor(){
	//Check if it has changes
	if(currentAnchor != document.location.hash){
		currentAnchor = document.location.hash;
		//if there is not anchor, the loads the default section
		if(!currentAnchor)
			query = "CH=home";
		else
		{
			//Creates the  string callback. This converts the url URL/#main&amp;id=2 in URL/?section=main&amp;id=2
			var splits = currentAnchor.substring(1).split('&amp;');
			//Get the section
			var CH = splits[0];
			delete splits[0];
			//Create the params string
			var params = splits.join('&amp;');
			var query = "CH=" + CH + params;
		}
		//Send the petition
		$("#loading").show();
		$.get("index_into.php",query, function(data){
			$("#wrapper").html(data);
			$("#loading").hide();
		});
	}
}

男丁格爾於 2011-06-13 12:27:35 說：

這我沒試過耶, 你有試過改成 URL/#main&id=2 是ok的嗎

登入後再回覆

小高於 2011-06-10 15:29:04 說：

謝謝大大指導!

登入後再回覆
lewis 於 2011-06-11 16:55:02 說：

不知有無中文化得版本！！＠－＠

登入後再回覆
- 男丁格爾於 2011-06-13 12:26:38 說：
  
  可能要過一陣子吧, 現在只有看到簡體的語言包。
  
  登入後再回覆
jeff 於 2011-06-15 16:49:07 說：

在1.5版本裡面好像會有點問題
當從check out
那邊選擇註冊(可選擇註冊或是不註冊直接購物)
checkout/register.php
這支裡面不是用table 格式
所以就失效了XD
謝謝分享這支好東西^^

登入後再回覆
- 男丁格爾於 2011-06-15 17:06:52 說：
  
  唉呀呀..這問題我會修正它.
  不過它這頁面是靠 ajax 來載頁面, 看來不能單純靠 footer 中的 script 來做動作了。
  
  登入後再回覆
Sidney Kuo 於 2011-06-16 02:10:49 說：

男丁大, 請問你 OPENCAR 程式的模版要去哪找阿.. 找老半天都沒有O_Q

登入後再回覆
- 男丁格爾於 2011-06-16 09:56:53 說：
  
  在 oc 的根目錄中就有一個資料夾 catalog, 接著 view/tmeme 中就是放佈景模板囉。預設是用 default。
  
  登入後再回覆
jeff 於 2011-06-16 14:46:21 說：

我是有測試將該頁面的改成跟account/register.php一樣表格格式
是有成功的隱藏
不過最後表單會送不出去
驗證部分也會過不去+_+

登入後再回覆
- 男丁格爾於 2011-06-16 14:50:43 說：
  
  你是說結帳註冊填完無法送出嗎..?你是在自己電腦上測試的嗎..?
  本機結帳註冊好像要點第二次才會到下一個步驟..你可以試著重整頁面..應該會看到其實已經登入了
  或者先試試我的demo網站..購買及註冊看看....萬年不會出貨的
  
  登入後再回覆
jeff 於 2011-06-16 16:51:42 說：

DEMO 網站沒問題耶:D
請問你也是把他改成表格格式嗎!!
如果是的話那我應該就是本機問題沒錯了XD

登入後再回覆
- 男丁格爾於 2011-06-16 16:55:36 說：
  
  因為註冊時好像會寄信, 本機可能沒有設定寄信的 smtp 等等..
  模板我是都用預設的, 沒有改過
  
  登入後再回覆
richie.lin 於 2011-06-17 01:19:01 說：

謝謝男丁大的分享，真的非常好用!
請問如何讓 Lastname 的欄位上留空，不要自動補上"Taiwan"呢?

登入後再回覆
- 男丁格爾於 2011-06-17 08:31:40 說：
  
  因為 lastname 是必填的欄位, 所以除非你是要註冊者自己去填入
  否則隱藏後又留空時會無法註冊成功的
  
  登入後再回覆
Nick 於 2011-07-27 15:00:39 說：

報告板主以上測試無異常非常感謝您

登入後再回覆
- 男丁格爾於 2011-07-27 15:33:03 說：
  
  若有其他問題或是功能需求，可以提出來討論看看。
  
  登入後再回覆