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

/* Ajax Cart */ $('#cart > .heading a').bind('click', function() { $('#cart').addClass('active'); $.ajax({ url: 'index.php?route=checkout/cart/update', dataType: 'json', success: function(json) { if (json['output']) { $('#cart .content').html(json['output']); } } }); $('#cart').bind('mouseleave', function() { $(this).removeClass('active'); }); });

/* Ajax Cart */ $('#cart > .heading a').live('hover', function() { $('#cart').addClass('active'); $.ajax({ url: 'index.php?route=checkout/cart/update', dataType: 'json', success: function(json) { if (json['output']) { $('#cart .content').html(json['output']); } } });

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

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

hebe_love 於 2012-02-29 15:27:52 說：

男丁老師請問一下

在商品頁面 opencart有兩種排列方式直列式/棋盤式

他預設是直列式不過直列式不方便瀏覽

可以改成預設棋盤式嗎感恩~

登入後再回覆
- 男丁格爾於 2012-03-02 10:32:22 說：
  修改 catalog\view\theme\default\template\product\category.tpl 的第 197 行成為
  
  檢視原始碼 JavaScript
  1
  display('grid');
  請參考: http://abgne.tw/opencart/openc......y-grid.html
  登入後再回覆
  - hebe_love 於 2012-03-03 13:01:40 說：
    
    喔耶改成功了~~!!
    
    這樣看起來就很方便瀏覽多了
    
    太棒了!
    
    登入後再回覆
Aron 於 2012-03-20 09:31:26 說：

你好!

找不到這個檔案在1.5.2.1最新版本 "catalog/view/佈景/template/checkout/address.tpl"

請問替代的檔案在?

登入後再回覆
- 男丁格爾於 2012-03-21 12:34:43 說：
  
  如果忽然該檔案, 這樣能正常註冊並隱藏嗎?
  
  登入後再回覆
Weien 於 2012-03-21 01:03:03 說：

請問在結帳頁面 "增加一個新地址" 的欄位如何隱藏 ?

登入後再回覆
- 男丁格爾於 2012-03-21 11:16:50 說：
  一種是直接打開 catalog\view\theme\佈景\template\checkout\address.tpl
  然後大概是在第 16 行那邊, 把
  
  檢視原始碼 HTML
  1
  <p>
  改成
  
  檢視原始碼 HTML
  1
  <p style="display: none;">
  或者如果你跟著這範例有多加一支 plugins.js 的話
  可以在 js 中再多新增一句
  
  檢視原始碼 JavaScript
  1
  $('#payment-address-new').parent().hide();
  登入後再回覆
mmman2000 於 2012-03-30 02:26:22 說：

我愛你!!!!!!!!!!!!!!!!

登入後再回覆
shudy 於 2012-04-04 02:46:19 說：

請問男丁格爾老師，顯示國家別，會連帶的顯示下拉選單也就是區域，我嘗試去phpmyadmin改Zone id欄位，想要變成中文，如台北、台中、台南、、可是改完儲存，前台卻不受影響??請問這是什麼原因呢?
感謝您抽空看我的問題!

登入後再回覆
- 男丁格爾於 2012-04-16 18:17:12 說：
  
  可以清掉瀏覽器暫存後再試試, 或者直接到後台 System->localisation->Zones 中找到 Country 為 Taiwan(或者是第 163 頁) 隨便更新一筆後存檔再試試。
  
  登入後再回覆
shudy 於 2012-04-13 20:03:09 說：

為何問的問題被刪除??

登入後再回覆
- 男丁格爾於 2012-04-16 18:18:12 說：
  
  基本上不會刪任何人的問題, 因為您是第一次留言, 所以要等審核後才會出現。
  
  登入後再回覆
Wenkai 於 2012-05-03 11:54:58 說：

Hello~ 我發現這樣註冊後, 以後登入實地址換固定顯示台北市? 請問有遇到這樣的情形嗎? 我用 opencart 1.5.2.1. 謝謝

登入後再回覆
- 男丁格爾於 2012-05-07 14:03:50 說：
  
  你註冊時並不是選台北市嗎?等我有空時, 我會針對最新版的測看看XD
  
  登入後再回覆
fast 於 2012-05-04 14:49:57 說：

請問文中打開 catalog/view/佈景/template/checkout/address.tpl

$(function(){
$('[name=address_id] option').html(function(){
return $(this).html().replace(' taiwan', ").replace(', taiwan', ").replace(', Taiwan', ");
});
});

這段script 的用途是？我加了這段反而看不到我的地址

我只加
就看的到

登入後再回覆
- 男丁格爾於 2012-05-07 14:02:29 說：
  
  這段應該只是把 taiwan 及 Taiwan 的字串給移除掉而已~
  
  登入後再回覆

老師 :我來訪問了
在 javaascript/common.js 裡面把

/* Ajax Cart */
	$('#cart &gt; .heading a').bind('click', function() {
		$('#cart').addClass('active');
 
		$.ajax({
			url: 'index.php?route=checkout/cart/update',
			dataType: 'json',
			success: function(json) {
				if (json['output']) {
					$('#cart .content').html(json['output']);
				}
			}
		});			
 
		$('#cart').bind('mouseleave', function() {
			$(this).removeClass('active');
		});
	});

改成下方

/* Ajax Cart */
	$('#cart &gt; .heading a').live('hover', function() {
		$('#cart').addClass('active');
 
		$.ajax({
			url: 'index.php?route=checkout/cart/update',
			dataType: 'json',
			success: function(json) {
				if (json['output']) {
					$('#cart .content').html(json['output']);
				}
			}
		});

這樣亂改好像沒問題^^

男丁格爾於 2012-05-07 13:59:57 說：

我再整理一下:)

登入後再回覆

allen 於 2012-05-06 02:58:13 說：

大家看看吧^^
6合一,一步驟結帳,好像是免費,網址是http://www.opencart-one-page-checkout.com/

登入後再回覆

發表迴響取消回覆

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

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

發表迴響 取消回覆

發表迴響取消回覆