EC-CUBEで最初にやっておきたい10のカスタマイズ・2「お客様情報入力から性別選択の必須をはずす」

読了時間:約 25分43秒

EC-CUBEで最初にやっておきたい10のカスタマイズ・2「お客様情報入力から性別選択の必須をはずす」

昨日に引き続き、EC-CUBEを使ってECサイトを構築するときに、ぜひともやっておきたいカスタマイズをご紹介します。

今日は、「2.お客様情報入力から性別選択の必須をはずす」です。

 

お買い物をしたいだけなのに、あれこれ答えなければならないのが嫌だというお客様だっているはずです。

どうしても必要な情報でないなら、必須にしない方がいいでしょう。

もくじ

 

新規会員登録ページをカスタマイズ

ショップオーナーの気持ちとしては、お客様の情報をできるだけ知りたいので「性別」や「職業」など知りたくなってしまいますが、自分がもしお客さんだったらどうでしょう?

少なくとも私は、自分の情報をむやみに知らせたくありません。

 

EC-CUBEでは、デフォルトで「性別」が必須入力となっているのですが、わざわざ必須にすべき情報ではないと思うので、私は任意入力に変更しました。

 

(EC-CUBEのバージョンは、2.12.5で動作確認済みです。)

 

まず、

data/class/helper/SC_Helper_Customer.php

を開き、387行目あたり

[php]
$objFormParam->addParam(‘性別’, ‘sex’, INT_LEN, ‘n’, array(‘EXIST_CHECK’, ‘NUM_CHECK’, ‘MAX_LENGTH_CHECK’));
[/php]

これを

[php]
$objFormParam->addParam(‘性別’, ‘sex’, INT_LEN, ‘n’, array(‘NUM_CHECK’, ‘MAX_LENGTH_CHECK’));
[/php]

に書き換えます。

 

これだけで必須チェックは解除されましたが、必要のない入力項目はいっそ表示しない方がいい!ということで、「性別」と「職業」の入力欄を、入力ページ上から削除します。

 

data/Smarty/templates/default/frontparts/form_personal_input.tpl

を開き、142行目あたりの

[html]
<tr>
<th>性別<span class="attention">※</span></th>
<td>
<!–{assign var=key1 value="`$prefix`sex"}–>
<!–{if $arrErr[$key1]}–>
<div class="attention"><!–{$arrErr[$key1]}–></div>
<!–{/if}–>
<span style="<!–{$arrErr[$key1]|sfGetErrorColor}–>">
<input type="radio" id="man" name="<!–{$key1}–>" value="1" <!–{if $arrForm[$key1] eq 1}–> checked="checked" <!–{/if}–> /><label for="man">男性</label>
<input type="radio" id="woman" name="<!–{$key1}–>" value="2" <!–{if $arrForm[$key1] eq 2}–> checked="checked" <!–{/if}–> /><label for="woman">女性</label>
</span>
</td>
</tr>
<tr>
<th>職業</th>
<td>
<!–{assign var=key1 value="`$prefix`job"}–>
<!–{if $arrErr[$key1]}–>
<div class="attention"><!–{$arrErr[$key1]}–></div>
<!–{/if}–>
<select name="<!–{$key1}–>">
<option value="" selected="selected">選択してください</option>
<!–{html_options options=$arrJob selected=$arrForm[$key1]}–>
</select>
</td>
</tr>
[/html]

を、下記のように

<!--{if false}--> 〜 <!--{/if}-->

で囲んでコメントアウトします。

[html highlight=”1,28″]
<!–{if false}–>
<tr>
<th>性別<span class="attention">※</span></th>
<td>
<!–{assign var=key1 value="`$prefix`sex"}–>
<!–{if $arrErr[$key1]}–>
<div class="attention"><!–{$arrErr[$key1]}–></div>
<!–{/if}–>
<span style="<!–{$arrErr[$key1]|sfGetErrorColor}–>">
<input type="radio" id="man" name="<!–{$key1}–>" value="1" <!–{if $arrForm[$key1] eq 1}–> checked="checked" <!–{/if}–> /><label for="man">男性</label>
<input type="radio" id="woman" name="<!–{$key1}–>" value="2" <!–{if $arrForm[$key1] eq 2}–> checked="checked" <!–{/if}–> /><label for="woman">女性</label>
</span>
</td>
</tr>
<tr>
<th>職業</th>
<td>
<!–{assign var=key1 value="`$prefix`job"}–>
<!–{if $arrErr[$key1]}–>
<div class="attention"><!–{$arrErr[$key1]}–></div>
<!–{/if}–>
<select name="<!–{$key1}–>">
<option value="" selected="selected">選択してください</option>
<!–{html_options options=$arrJob selected=$arrForm[$key1]}–>
</select>
</td>
</tr>
<!–{/if}–>
[/html]

 

同様に、確認ページ上からも、「性別」と「職業」の項目を削除します。

 

data/Smarty/templates/default/entry/comfirm.tpl

を開いて、86行目あたりの

[html]
<tr>
<th>性別</th>
<td>
<!–{if $arrForm.sex eq 1}–>
男性
<!–{else}–>
女性
<!–{/if}–>
</td>
</tr>
<tr>
<th>職業</th>
<td><!–{$arrJob[$arrForm.job]|default:"未登録"|h}–></td>
</tr>
[/html]

を、下記のようにコメントアウトします。

[html highlight=”1,16″]
<!–{if false}–>
<tr>
<th>性別</th>
<td>
<!–{if $arrForm.sex eq 1}–>
男性
<!–{else}–>
女性
<!–{/if}–>
</td>
</tr>
<tr>
<th>職業</th>
<td><!–{$arrJob[$arrForm.job]|default:"未登録"|h}–></td>
</tr>
<!–{/if}–>
[/html]

 

お客様情報入力ページもカスタマイズ

非会員のお客様が、会員登録をせずそのままお買い物を続けるときも、お客様情報入力欄で性別が必須入力になっています。

これも必須からはずし、非表示にしちゃいます。

 

data/class/pages/shopping/LC_Page_shopping.php

を開き、306行目あたりの

[php]
$objFormParam->addParam(‘性別’, ‘order_sex’, INT_LEN, ‘n’, array(‘EXIST_CHECK’, ‘MAX_LENGTH_CHECK’, ‘NUM_CHECK’));
[/php]

これを

[php]
$objFormParam->addParam(‘性別’, ‘order_sex’, INT_LEN, ‘n’, array(‘MAX_LENGTH_CHECK’, ‘NUM_CHECK’));
[/php]

に書き換えます。

 

そして、

data/Smarty/templates/default/shopping/nonmember_input.tpl

の136行目あたりの

[html]
<tr>
<th>性別<span class="attention">※</span></th>
<td>
<!–{assign var=key value="order_sex"}–>
<!–{if $arrErr[$key]}–>
<div class="attention"><!–{$arrErr[$key]}–></div>
<!–{/if}–>
<span style="<!–{$arrErr[$key]|sfGetErrorColor}–>">
<!–{html_radios name="$key" options=$arrSex selected=$arrForm[$key].value style="$err" label_ids=true}–>
</span>
</td>
</tr>
<tr>
<th>職業</th>
<td>
<!–{assign var=key value="order_job"}–>
<!–{if $arrErr[$key]}–>
<!–{assign var=err value="background-color: `$smarty.const.ERR_COLOR`"}–>
<!–{/if}–>
<select name="<!–{$key}–>" style="<!–{$arrErr[$key]|sfGetErrorColor}–>">
<option value="">選択して下さい</option>
<!–{html_options options=$arrJob selected=$arrForm[$key].value}–>
</select>
</td>
</tr>
[/html]

を下記のようにコメントアウトし、入力ページ上から性別と職業の項目を削除します。

[html highlight=”1,27″]
<!–{if false}–>
<tr>
<th>性別<span class="attention">※</span></th>
<td>
<!–{assign var=key value="order_sex"}–>
<!–{if $arrErr[$key]}–>
<div class="attention"><!–{$arrErr[$key]}–></div>
<!–{/if}–>
<span style="<!–{$arrErr[$key]|sfGetErrorColor}–>">
<!–{html_radios name="$key" options=$arrSex selected=$arrForm[$key].value style="$err" label_ids=true}–>
</span>
</td>
</tr>
<tr>
<th>職業</th>
<td>
<!–{assign var=key value="order_job"}–>
<!–{if $arrErr[$key]}–>
<!–{assign var=err value="background-color: `$smarty.const.ERR_COLOR`"}–>
<!–{/if}–>
<select name="<!–{$key}–>" style="<!–{$arrErr[$key]|sfGetErrorColor}–>">
<option value="">選択して下さい</option>
<!–{html_options options=$arrJob selected=$arrForm[$key].value}–>
</select>
</td>
</tr>
<!–{/if}–>
[/html]

 

これで、不要な入力項目は削除されました。

 

次回は「3.フォームの必須入力項目をわかりやすくする」を解説します!

RSSフィードを購読する

ITポケットでは、ビジネスや生活が向上するTipsを発信しています。
よろしければRSSフィードをご購読ください。

シェアする

このエントリーをはてなブックマークに追加

関連記事

コメント

お仕事のご依頼について

コーポレートサイト、ECサイト、CMS、ブログなど、あらゆるWebサイトの制作をお手伝いいたします。

企画からデザイン、その後の運営や保守まで対応することが可能です。

自らECサイト運営を行っていることもあり、顧客目線でのサイトづくりが得意です。

得意なこと

HTML5 / CSS3 / JavaScript

WordPress

ECサイト(EC-CUBE / Zen Cart / カラーミーショップ)

各ブログのカスタマイズ

 

クライアントのご要望にお答えし、予算やケースにあった選択で、臨機応変に対応いたします。

ご相談・ご質問や、お見積もりのご依頼など、お気軽にお問い合わせください。

プロフィール

菊地翼

菊地翼(きくちつばさ)
WEBクリエイター。株式会社ウイングフォレスト代表取締役。マカー歴18年。IT・ガジェット・ライフハックと甘いものが大好き!

詳しくはこちら 

サイト内検索