[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 中會導致錯誤的問題。

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

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

allen551210 於 2011-10-28 01:44:35 說：

註冊帳號,加入會員,一切都OK. 那些英文是購買者在結帳的過程中(支付地址的表單跟付款地址的表單)會看到滴!後台無所謂的,都我一個人在看,目前根本不重要!有時間就教我改一下,感激不盡!

登入後再回覆
- 男丁格爾於 2011-11-01 08:49:23 說：
  
  可以截個圖給我看看嗎XD
  
  登入後再回覆
allen551210 於 2011-10-28 15:03:25 說：

我是在化妝品工廠上班,網頁非我專長,只是在新竹巨匠交了8萬上過網頁套課,為了不想讓學費跟自己上課的時間白費,所以做網站來玩,我沒學過美工,只會基本的去背.購物車幾乎沒生意!雖然很多地方我都不懂,不過自己亂猜亂做一通,還蠻有成就感的!

登入後再回覆
- 男丁格爾於 2011-11-01 08:49:48 說：
  
  祝你能成為下一個牛爾..
  
  登入後再回覆
milk 於 2011-10-28 19:02:58 說：

請問男丁大人：
由於必須要使用依照地區 zone_id 計算運費，後台使用了區域群組。
想要將其他都隱藏，但 zone 顯示。
嚐試刪去$(window).load(function()整段，則整個zone 下拉清單會顯示一片空白；必須要切換別的國家，再切換回台灣，才會正常載入zone list。
但如果回復乾淨安裝，該zone list卻會自動正常載入。
JQuery 不太熟悉，不知道哪邊影響了..
辛苦您了 ...

登入後再回覆
- 男丁格爾於 2011-11-01 08:51:42 說：
  應該只要把 $(window).load(...中的
  
  檢視原始碼 JavaScript
  1
  $zoneId.html('<select name="zone_id"><option value="3159">T\'ai-pei city</option></select>');
  拿掉就可以了
  登入後再回覆
milk 於 2011-10-28 19:06:12 說：

補充: 版本是 1.5x
再次感謝。

登入後再回覆
太陽於 2011-10-28 20:47:08 說：

我使用的主題他的表單沒辦法隱藏
這是一部分的代碼

<input type="text" name="fax" value="" size="30" />

請問這樣子的主題要如何修改嗎？
謝謝!

登入後再回覆
太陽於 2011-10-28 20:55:32 說：

因為代碼沒辦法全貼上，補上
這是代碼網址：https://docs.google.com/document/d/1dfoF_q1aANlx_kj_b0pUXAqGVRveuAieCgibIgM08pg/edit

登入後再回覆
- 男丁格爾於 2011-11-01 08:56:58 說：
  預設都是用表格來排版, 所以輸入欄位的外層都是 tr, 但你用的主題是用 div 的外層, 所以要把像是
  
  檢視原始碼 JavaScript
  1
  $('[name=fax]').parents('tr').hide();
  改成
  
  檢視原始碼 JavaScript
  1
  $('[name=fax]').parent('div').hide();
  試試看.
  登入後再回覆
starbury33 於 2011-10-31 21:38:16 說：

不好意思，我是Opencart新手，請問一下，無法結帳應是哪邊檔案出問題?
目前六步驟:1：結帳選項，2：帳單地址修改，3：配送地址，到這邊按繼續就卡在那邊無法繼續最後三步驟(4：配送方式，5：付款方式，6：確認訂單)。謝謝

登入後再回覆
- 男丁格爾於 2011-11-01 09:01:14 說：
  
  你簡化會員註冊表單的部份是用現在文章中最新的程式嗎..?
  如果是的話, 請參考更新引用的 jQuery 版本
  
  登入後再回覆
太陽於 2011-11-01 09:59:34 說：

改成div我有試過會變成整個註冊頁面會變空空的

登入後再回覆
- 男丁格爾於 2011-11-01 10:01:33 說：
  抱歉~應該是這樣
  
  檢視原始碼 JavaScript
  1
  $('[name=fax]').parent('div').hide();
  登入後再回覆
太陽於 2011-11-01 23:17:17 說：

修改了之後就可以正常隱藏了，謝謝。

登入後再回覆
太陽於 2011-11-02 14:05:56 說：

checkout/register.tpl
checkout/address.tpl
checkout/guest.tpl
checkout/guest_shipping.tpl
這些頁面是不是可以直接引用
$('[name=fax]').parent('div').hide();
就有隱藏效果呢?

登入後再回覆
- 男丁格爾於 2011-11-04 17:27:58 說：
  
  你這些語法一定要寫在當網頁載完才能執行
  
  登入後再回覆