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

$('[name=country_id]').parents('tr').hide().html('<select name="country_id"><option value="206">Taiwan</option></select>'); <pre> 改成 <pre lang="JavaScript"> $('[name=country_id]').parents('tr').hide().html('<select name="country_id"><option value="96">Hong Kong</option></select>');

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

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

linroy 於 2011-07-27 17:32:18 說：

您好男丁格爾兄

我在服務的公司想要用google,yahoo 的登入加入會員方式,由於看到您的網站有使用.
請問可否提供範例給我呢,或參考那裡的教學

謝謝

Roy

登入後再回覆
- 男丁格爾於 2011-07-28 11:21:12 說：
  
  我是利用 openID 的方式。針對不同程式都會有好心人提供 open source 的套件，建議可以 google 一下。
  
  登入後再回覆
Zohan 於 2011-08-15 14:46:44 說：

您好!
請問在結帳的時候
有分為帳單地址與配送地址
我的需求來說其實可以將2個地址合而為一
也可以省略使用者的一個步驟
不知道有什麼方式可以做到呢?
感謝男丁格爾!

登入後再回覆
- 男丁格爾於 2011-08-15 20:27:57 說：
  
  應該是 OK, 但要看你的版本是那一版。主要是自動把使用者的配送地址自動勾選成帳單地址等等。
  
  登入後再回覆
mayee 於 2011-08-30 01:20:20 說：

請問男丁格爾~~
如果想調用信義區而不要調用 13 應該怎樣改 ?
[code]信義區[/code]

@address.tpl
[code]
<option value="" selected="selected">,

<option value="">,
[/code]

這部分:
[code][/code]

調用出來的都是 13 (後台設定的編號)，無法調用出相對的縣市名稱。

有辦法用onChange或ajax .. 等方法去得到縣市的值而不是option value裏頭的數字嗎 ?

謝謝 😀

登入後再回覆
- 男丁格爾於 2011-09-02 20:56:52 說：
  
  onchange 時, 把 value 改用 text 代替也是可以的~
  或者載完清單後就先替換了
  
  登入後再回覆
阿維於 2011-09-21 16:47:35 說：

報告老師,針對 OpenCart 會員註冊表單的部分,我個人是這樣翻譯的 ^^;

First Name: (名字：)
Last Name: (姓氏：)
City: (鄉/鎮/市/區：)
Country: (國家：)
Region / State: (地區： (省、縣、市))

事實上這些詞彙都是從微軟語言入口網站上面所取得的,希望能讓大家做參考! ^^

登入後再回覆
- 男丁格爾於 2011-09-28 10:40:10 說：
  
  謝謝你的整理分享:P
  
  登入後再回覆
鄭志偉於 2011-09-22 09:08:00 說：

有一個問題請教
Opencart (1.5.0)"加入會員" 與 "登入會員" 所要填入的資料欄位
寬度都是一樣的
但是 "電子郵件" 和 "地址" 的資料字數都比較多
填完後沒辦法在一個畫面內確認 (部分被蓋住了)
請問是否可以修改欄位寬度
謝謝幫忙

登入後再回覆
- 男丁格爾於 2011-09-28 10:39:03 說：
  你可以試著加這段看看:
  
  檢視原始碼 JavaScript
  1
  $('[name=email], [name=address_1], [name=address_1]').width(你要的寬度數字);
  登入後再回覆
  - 小C 於 2012-11-12 00:51:26 說：
    
    老師~~~~不好意思~新手問題較多>"<
    請問這段要加在哪個檔案呀~~我也想加長欄位寬度...謝謝您!
    
    登入後再回覆
    - 男丁格爾於 2012-11-16 21:33:04 說：
      
      每一段程式前面都有粗黑體字說明加在那個檔案,
      那若想要改欄位寬度的話, 除非是用 css 來設定, 不然用 js 是比較快, 像是要改地址的話
      
      檢視原始碼 JavaScript
      1
      $('[name=address_1]').css('width', 200);
      
      登入後再回覆
allen551210 於 2011-10-05 02:26:10 說：

請問老師,我用的是1.4.XX版的購物車,如果不想在check/payment及check/confirm頁面的帳單寄送地址出現taiwan,T'ai-pei city這些跳過沒註冊的資料,要修改control裡面的哪幾支程式?

登入後再回覆
- 男丁格爾於 2011-10-11 16:09:48 說：
  
  你有加入 js 中隱藏 Country 及 Region / State 的程式嗎?
  
  登入後再回覆

老師,
請問

Taiwan

如果要把他改成香港那option value=?

把其中的

不過縣市區域也要相對修改吧

allen551210 於 2011-10-13 16:04:04 說：

我用的是1491及1495板的opencart用您分享的方法,註冊或登入可以簡化表單是非常實用的,但是我發現在結帳及寄送郵件給客戶的地址部份都會出現taiwan,taipei city這些隱藏起來被取代的英文.有辦法佈要讓他們出現嗎

登入後再回覆
- 男丁格爾於 2011-10-15 10:31:19 說：
  
  可以試著修改 catalog\model\checkout\order.php
  大約是 193 及 235 行
  
  登入後再回覆
  - 小C 於 2012-11-12 00:45:21 說：
    
    請問老師~我用的是1541的opencart.已經簡化註冊表單了~謝謝您!
    但是taiwan,taipei city 不要讓他們出在結帳跟寄送郵件給客戶的地址 .
    請問我該怎麼改呢?? 謝謝!
    
    登入後再回覆
    - 男丁格爾於 2012-11-16 21:35:16 說：
      
      這個就要改到 php 了耶~只要一改版, 就又要改一次XD
      
      登入後再回覆
李文能於 2011-10-16 20:59:48 說：

感謝你提供簡化會員註冊表單給我們使用
經實際安裝 OpenCart中文版
版本:1.5.0.5 發現
當購物後去結帳時
如果按選項加入會員時
網頁程式會卡住跑不動
找了半天，可能是 register.tpl 出了問題
我的測試網站暫時已移除 register.tpl
其他幾個檔都很正常
http://www.webpage.url.tw/opencart/index.php?route=checkout/checkout
後來我在你的展示網站測試
同樣也發生跑不動情況
http://oc15demo.abgne.tw/index.php?route=checkout/checkout
我不懂 jQuery 程式
所以也不知道問題出在那裡
可否請你幫忙修復此錯誤
如果問題解決
方便直接回覆給我
再次感謝你

登入後再回覆
- 男丁格爾於 2011-10-17 09:15:41 說：
  
  你是用什麼瀏覽器呢?我用 Chrome 來把物品加入購物車, 然後 Checkout 加入會員, 是能整個完成一連串的註冊及確認訂單的動作的。
  
  登入後再回覆
allen551210 於 2011-10-18 19:26:44 說：

謝謝你的指導,已經搞定一半了,至少寄出去給客戶的郵件不會有那些Taipei city , taiwan的英文,哈哈!只剩結帳時,支付地址與結帳地址的部分,網頁上還是會列出Taipei city ,taiwan的英文。以下是我的網站網址,有空您試驗一下就知道,順便挑個化妝品給老婆或女朋友,我送妳免費的喔!算是酬謝^^ 訂單附言著名男丁格爾老師,我會免費贈送,不收費!
網址是 http://www.lescaut.com.tw

登入後再回覆
- 男丁格爾於 2011-10-24 08:48:23 說：
  
  先謝謝..不過應該是不需要:D
  至於結帳時的支付地址與結帳地址是指一般購買者會看到的嗎?還是後台管理者看到
  
  登入後再回覆

發表迴響取消回覆

抱歉，你必須要登入才能發表迴響喔！

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

發表迴響 取消回覆

發表迴響取消回覆