[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 下一頁 »

nafee 於 2012-08-18 00:36:56 說：

男丁大大~想請教一下你註冊畫面右下角那個 "Privacy Policy"的彈跳視窗是怎麼寫的出來的原版好像不是這樣顯示? 感謝!!

登入後再回覆
- 男丁格爾於 2012-08-20 16:34:46 說：
  
  那個我沒有動耶, 裝完預設就是這樣了~
  
  登入後再回覆
David 於 2012-08-19 11:48:08 說：

請問男丁老師

我想把註冊時的國家跟城市改成singapore，那個option value 是要改多少。
我想要的是default國家是singapore然後city是空白。

謝謝

登入後再回覆
- 男丁格爾於 2012-08-20 16:40:08 說：
  
  新加坡要設成 188
  
  登入後再回覆
David 於 2012-08-30 21:33:26 說：

再請問男丁老師

我想要在註冊時把country直接設定為singapore然後city是空白要改哪幾個檔案呢？要如何更改謝謝

登入後再回覆
- 男丁格爾於 2012-10-06 22:42:15 說：
  
  你只要把 taiwan 換成 singapore, 然後 206 換成 188
  但 city 為空白應該是過不了吧..
  
  登入後再回覆
吉米於 2012-09-03 21:54:53 說：

hi 男丁兄，
晚安！拜讀過您的大作後，十分欽佩您的jq功力，不知能否請問一個問題？
opencart可以做到宅配中讓客戶指定"到貨日期"和"指定配送時段"這兩個功能嗎？
謝謝阿

登入後再回覆
tycryr 於 2012-10-16 00:07:13 說：

男丁老師您好:
感謝你熱心分享.只是opencart 1.5.4.1中文版無法適用.希望你有空的時候能寫opencart 1.5.4.1中文版專用的簡化結帳及會員註冊表單結帳程式.另外建議保留(顯示)傳真機欄位.因為傳真機是一般公司行號常用的工具.
謝謝

登入後再回覆
- 男丁格爾於 2012-11-16 23:02:45 說：
  
  這..1.5.4.1 的我再試試,
  如果要保留傳真欄位的話, 你就看一下程式中有 fax 的部份的就不要加上去
  
  登入後再回覆
小艾於 2012-11-10 11:54:41 說：

那,1.5.4.1版本的要怎麼用呢?

登入後再回覆
- 男丁格爾於 2012-11-16 21:33:48 說：
  
  在 1.5.4.1 中有出現錯誤訊息嗎?可以的話, 把訊息給我看看~
  
  登入後再回覆
openshop 於 2012-11-12 13:19:07 說：

你好，請問這個功能可以使用在1.5.4.1嗎？
一直裝不起來，不知道是不是版本的緣故？

登入後再回覆
- 男丁格爾於 2012-11-16 21:22:17 說：
  
  暫時沒試過在 1.5.4.1 版中的效果, 不過如果你是用 IE 的話, 若有錯, 左下角有出現驚嘆號嗎?
  
  登入後再回覆
  - openshop 於 2012-11-20 17:37:45 說：
    
    我不是用ie，我在safari和firefox上測試都沒法隱藏這些欄位
    不知道是不是1.5.4.1的定義不一樣？
    我現在是先用css hide的方式隱藏
    希望你有空可以幫忙測試一下1.5.4.1
    謝謝你！
    
    登入後再回覆
    - 男丁格爾於 2012-11-20 18:08:00 說：
      
      如果能用 css 來隱藏的話, 那應該是用 css 會比較方便吧!!
      
      登入後再回覆
阿爾於 2012-11-22 19:24:11 說：

1.541裝上去完全沒效果呢T_T
好傷心啊T口T

另外1.541好像也沒有這個檔了
catalog/view/佈景/template/checkout/address.tpl

登入後再回覆
阿爾於 2012-11-22 21:40:27 說：

我剛剛自己在那四個檔案用刪除的結果出現了這個字樣XD
是說如果用vqmod寫不知道效果怎麼樣o_o (其實我完全不懂程式碼TAT)

Notice: Undefined index: lastname in D:\wwwweb\webjichu\jichua\Hwulu\wwwroot\shop\catalog\controller\account\register.php on line 355Notice: Undefined index: city in D:\wwwweb\webjichu\jichua\Hwulu\wwwroot\shop\catalog\controller\account\register.php on line 398Notice: Undefined index: country_id in D:\wwwweb\webjichu\jichua\Hwulu\wwwroot\shop\catalog\controller\account\register.php on line 404Notice: Undefined index: country_id in D:\wwwweb\webjichu\jichua\Hwulu\wwwroot\shop\catalog\controller\account\register.php on line 419Notice: Undefined index: zone_id in D:\wwwweb\webjichu\jichua\Hwulu\wwwroot\shop\catalog\controller\account\register.php on line 423嚜??xml version="1.0" encoding="UTF-8"?>

登入後再回覆
fruitcake 於 2012-11-26 00:13:23 說：

Opencart版本是1.5.4.1

用IE可以註冊成功

但是用Chrome就一直無法註冊完成

想請男丁格爾老師測試一下

登入後再回覆