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

allen 於 2012-05-07 18:37:18 說：

六合一單頁面結帳要錢錢,剛看了一下最少是80美金.

登入後再回覆
allen 於 2012-05-09 03:38:44 說：

當初會玩opencart,是因為男丁老師分享簡化表單的方法,實在很感謝老師的分享也沒收費.如果有人也想一起購買6合1單頁面結帳,請留言大家出錢一起買來用用看,它在不修改opencart核心程式的情形下,從後台控制結帳的選項,例如 : 名子電話email這三樣就好.但是有點貴要150美金,阿們.老外說新版本的1.5.2.1也都沒問題喔.

登入後再回覆
- 男丁格爾於 2012-05-09 20:06:07 說：
  
  很想好好研究 OpenCart, 不過沒什麼東西可以賣, 就沒什麼動力去整理它。等九月換主機後會再來重新進行 OpenCart 的計畫了。
  
  登入後再回覆
Mia 於 2012-05-16 16:59:14 說：

感謝老師的分享！我剛試在opencart 1.5.2版本~ 把它存成js 檔案，然後放置在 catalog/view/javascript 中，直接在 catalog/view/theme/佈景/template/common/footer.tpl 中引用~竟然成功了！好高興~:)

登入後再回覆
Mia 於 2012-05-16 17:05:28 說：

>"<老師~剛發現簡化表單成功~但網頁狀態出現警示圖+"網頁發生錯誤" 或 "完成"的文字~不知道是哪裡出錯了?! 🙁

登入後再回覆
- 男丁格爾於 2012-05-16 20:09:53 說：
  
  你連點兩下那個驚嘆號, 看它寫什麼訊息
  
  登入後再回覆
  - Mia 於 2012-05-17 09:01:22 說：
    
    男丁老師~以下是
    
    網頁錯誤詳細資料
    
    使用者代理程式: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
    時間戳記: Thu, 17 May 2012 01:18:43 UTC
    
    訊息: '$countryId' 未被定義
    行: 11
    字元: 2
    程式碼: 0
    URI: http://www.eshop-royalasia.com/catalog/view/javascript/plugins.js
    
    ~謝謝您!!>_<"
    
    登入後再回覆
    - 男丁格爾於 2012-05-17 09:03:26 說：
      
      你的程式漏了幾行了, 像是有 var 開頭的都沒放上去~
      
      登入後再回覆
      - Mia 於 2012-05-17 10:56:24 說：
        
        感謝老師~
        // 隱藏 Country 及 Region / Stat
        那整段我加回去就沒錯誤了~
        但是我不想隱藏 Country 及 Region / Stat
        請問要怎麼修改?>"<
        
        再次感謝!!
      - 男丁格爾於 2012-05-17 11:03:05 說：
        
        那你除了不加那段隱藏的之外, 最下面兩行程式也要拿掉
      - Mia 於 2012-05-17 11:24:33 說：
        
        成功了~謝謝男丁老師~
        另外// 隱藏 Country 及 Region / Stat
        那整段我加回去後發現
        修改會員地址那邊有顯示預設的台北市
        告知您一聲
        
        再次感謝!!
qwert838 於 2012-05-17 17:16:48 說：

今天升級1521 ～多了修改訂單的功能 ...可是少了男丁老師的簡化會員1521版 XD

1.會員名稱後台顯示姓名+台灣
2.結帳地址結帳顯示地址+台北市

期待老師更新吧～感恩

登入後再回覆
- 男丁格爾於 2012-05-21 09:22:42 說：
  
  這星期我會找時間重新安裝最新版後再來更新!!
  
  登入後再回覆
Mia 於 2012-05-18 12:32:23 說：

老師~請問一下
從結帳那邊加入會員的連結
如何修改連結到註冊頁面
而不是顯示在結帳頁面下面
因為結帳頁面的加入會員表單
隱藏欄位後都有出現問題= ="

登入後再回覆
- 男丁格爾於 2012-05-21 09:33:44 說：
  
  有出現什麼問題嗎?你安裝的 OC 版本是最新版的嗎?
  
  登入後再回覆
  - Mia 於 2012-05-21 14:23:05 說：
    
    老師你好~我安裝的是opencart 1.5.2版本
    填完資料要按繼續之後出現錯誤訊息視窗
    顯示以下檔案的語法有誤
    catalog\controller\checkout\register.php
    但在第幾行我忘了~因為我改回來了...
    
    登入後再回覆
    - 男丁格爾於 2012-05-21 14:31:00 說：
      
      下次若有錯, 請點下去看看是錯一行, 然後看一下原始碼那行是寫什麼
      
      登入後再回覆
surftab 於 2012-06-25 00:59:21 說：

老師你好,結帳註冊的部分在1.5.3.1似乎失效了
請教一下要如何修改?

登入後再回覆
- 男丁格爾於 2012-06-26 09:46:00 說：
  
  等星期五我安裝後再測試並看看怎樣改!!
  
  登入後再回覆
nick11 於 2012-07-15 20:00:34 說：

1.5.3.1 會員不能註冊
好像是zone_id 沒有帶入預設值
1.5.2 可以work

登入後再回覆
- 男丁格爾於 2012-07-23 11:33:15 說：
  那把程式中
  
  檢視原始碼 JavaScript
  1
  $zoneId.html('<select name="zone_id"><option value="3159">T\'ai-pei city</option></select>').prevUntil('.large-field').andSelf().hide();
  都改成
  
  檢視原始碼 JavaScript
  1
  $zoneId.html('<input type="hidden" name="zone_id" value="3159" />').prevUntil('.large-field').andSelf().hide();
  登入後再回覆
Mia 於 2012-07-25 14:11:10 說：

南丁大大~想請問一下：我想用原本隱藏的傳真電話欄位改為生日欄位，並使用jquery Datepicker，請問語法要怎麼改??謝謝!!

登入後再回覆
- 男丁格爾於 2012-08-06 09:20:10 說：
  
  這...只改註冊欄位也許還算簡單, 但在購物車中有用到的也都要一併修改耶, 這樣就有點"搞剛"了!
  
  登入後再回覆
crow 於 2012-07-27 04:17:01 說：

老師~~1.5.3.1結帳註冊失效的部分，要怎麼修改可以教導我一下嗎?

登入後再回覆
- 男丁格爾於 2012-08-06 10:12:51 說：
  
  用第 6 頁留言中我回覆的方式可以嗎?
  
  登入後再回覆
  - GS 於 2012-10-30 16:28:42 說：
    
    我代替crow回答吧...
    修改後就可以了
    
    登入後再回覆