[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-11-02 17:18:16 說：

大人,我找不到你的信箱,請你給我email,我傳2張截圖給你看看.程式像妳這麼厲害的真的很少,哈!

登入後再回覆
- 男丁格爾於 2011-11-04 17:28:11 說：
  
  mail 是 abgne.tw 加 gmail
  
  登入後再回覆
allen551210 於 2011-11-02 17:24:03 說：

順便請教2個簡單的問題,這個meta標籤是用來幹嘛的我只知道它與瀏覽器的相容性有關,看不太懂.
另外,當我把網頁加入我的最愛,有些網址左邊會有小縮圖,這要怎麼弄。

登入後再回覆
- 男丁格爾於 2011-11-04 17:26:18 說：
  可以加入像這樣的語法在網頁中
  
  檢視原始碼 HTML
  1
  <link rel="shortcut icon" type="image/x-icon" href="http://xxxxxx.xxxx/favicon.ico" />
  登入後再回覆
allen551210 於 2011-11-02 17:25:14 說：

http-equiv="X-UA-Compatible" content="IE=EmulateIE8這個

登入後再回覆
- 男丁格爾於 2011-11-04 17:25:27 說：
  
  這是讓 ie9 瀏覽你網頁時用 ie8 的方式來解析
  
  登入後再回覆
uqmeng 於 2011-11-10 15:13:45 說：

請問男丁格爾，我使用的是opencart的1.4.9.6版本，如何實現點擊“添加到購物車”後，彈出一個浮動層提示成功提交到購物車！opencart官網有1.5版本的這個功能，但是1.4.9版本的沒有哦，http://www.opencart.com/index.php?route=extension/extension/info&extension_id=3196

登入後再回覆
- 男丁格爾於 2011-11-13 02:10:05 說：
  
  這要找時間試一下, 基本上就是當 ajax 回傳成功時就顯示成功訊息。
  你要的浮動提示視窗就要在此動作加入
  
  登入後再回覆
Sean 於 2011-11-13 01:01:52 說：

您好，照您上述的試了，會員註冊沒有問題，
但直接結帳時註冊有問題，會跳出要輸入地區或省份!
您的Demo網站似乎也有此問題，請問應如何修改code呢？謝謝。

登入後再回覆
- 男丁格爾於 2011-11-13 02:03:44 說：
  
  我已經修改了, 你再試看看XD
  
  登入後再回覆
小鋒於 2011-12-17 17:09:44 說：

大大不好意思，請問您一下
我用的版本是1.4.9.5的
我是把第一個原始碼直接存成一個js檔案....這個方法
完成之後，不知道為什麼在選國家的那塊區域的欄位會跟上下區域不對齊

登入後再回覆
- 男丁格爾於 2011-12-19 00:02:50 說：
  
  你的主題是預設的嗎?
  
  登入後再回覆
  - 小鋒於 2011-12-19 11:34:42 說：
    
    我用預設的主題和另外下載的主題都會有一樣的問題耶！
    我有把圖片放在網上，麻煩您看一下
    謝謝您囉！
    http://www.hotimg.com/direct/kT7vpvA.JPG
    
    登入後再回覆
    - 男丁格爾於 2011-12-19 19:36:42 說：
      
      晚點我再測試一下 1.4.x 版的。
      
      登入後再回覆
      - 小鋒於 2011-12-20 10:32:19 說：
        
        好的謝謝您麻煩您了
Black 於 2012-02-02 18:11:38 說：

想請問一下，如果想要把國家的部分保留，該怎麼樣設定呢??謝謝!!

登入後再回覆
- 男丁格爾於 2012-02-03 14:05:48 說：
  
  可是國家保留時, 那麼縣市要怎麼辦?
  
  登入後再回覆
  - Black 於 2012-02-04 17:06:01 說：
    
    是否可以保留國家就好，縣市可以不用顯示，謝謝!!
    
    登入後再回覆
    - 男丁格爾於 2012-02-04 17:16:45 說：
      
      因為並沒有改後端程式, 這只能在前端隱藏而已
      如果你的要顯示國家, 就把 js 中有關 $countryId 的整行刪除就可以了。
      
      登入後再回覆
      - Black 於 2012-02-04 19:25:21 說：
        
        了解~~我試試~~謝謝你喔!!感恩!!
Uncle Ben 於 2012-02-06 04:08:34 說：

你好！我是在香港的，我想找把欄位關掉的方法很久了。。。。　終於找到你這裡來，實在太讚了！多謝你無私的方享！

其實我甚至想把整個地址位置（包括付款地址及送貨地址）都不要、或隱藏，請問該如何處理呢？要修改那些部份？

先謝謝你的意見！

登入後再回覆
- 男丁格爾於 2012-02-08 10:59:41 說：
  可以加入這兩句看看(沒特別試過)
  
  檢視原始碼 JavaScript
  1 2
  $('[name=address_1]').val('taiwan').prevUntil('.large-field').andSelf().hide(); $('[name=address_2]').prevUntil('.large-field').andSelf().hide();
  登入後再回覆
阿元於 2012-02-13 16:21:33 說：

hi 男丁大大
在會員註冊或結帳我是用gmail 發信的

但是按了按鈕都停在原頁等好久才會發信跟跳到下一頁

有沒有辦法不要等待直接導向下一頁

或用一個時間進度條讓使用者知道系統正在發信

才不會猛按確認按鈕而重複下訂單

登入後再回覆
- 男丁格爾於 2012-02-16 14:23:48 說：
  
  這我再試看看有沒有辦法別等它的回應。
  
  登入後再回覆
thankyou 於 2012-02-14 19:53:09 說：

男丁格爾先生，請問一下要如何關閉會員註冊功能(只用訪客購買)&如何使網站停止交易但可瀏覽商品功能?
先謝謝你的回答....

登入後再回覆
- 男丁格爾於 2012-02-16 14:31:19 說：
  
  這兩個功能我會找時間來試試, 不然最快的方式是把 register.php 先拿掉, 網頁上連結也拿掉XD
  
  登入後再回覆