EC-CUBEで最初にやっておきたい10のカスタマイズ・1「メール便だったら、お届け日時の指定欄を表示しない」

読了時間:約 7分23秒
EC-CUBEで最初にやっておきたい10のカスタマイズ・1「メール便だったら、お届け日時の指定欄を表示しない」

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

 

ちょっと長くなりそうなので、1日1個ずつ、10日に分けて記事にします。

今日は、「1.メール便だったら、お届け日時の指定欄を表示しない」です。

もくじ

 

買い物カゴをカスタマイズ

メール便はその安さからお客様には人気の配送方法ですが、ポスト投函のため配達日時を指定出来ません。

それなのに、「お届日時を選択してください」という欄が表示されていたら、お客様はとまどってしまいますよね。

 

そこで、買い物カゴの「配送方法の指定」でメール便が選択された時には、お届け日時の指定欄を表示しないようにカスタマイズしておきます。

 

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

 

まず、

data/Smaty/templates/default/shopping/payment.tpl

を開き、202行目あたり

<div class="pay_area02">
    <h3>お届け時間の指定</h3>
    <p class="select-msg">ご希望の方は、お届け時間を選択してください。</p>
    <p class="non-select-msg">まずはじめに、配送方法を選択ください。</p>

を見つけたら、下記のようにid名を付けます。

<div class="pay_area02" id="deliveryTime">
    <h3>お届け時間の指定</h3>
    <p class="select-msg">ご希望の方は、お届け時間を選択してください。</p>
    <p class="non-select-msg">まずはじめに、配送方法を選択ください。</p>

 

そして、同じファイル内の24行目あたり

$(function() {
    if ($('input[name=deliv_id]:checked').val()
        || $('#deliv_id').val()) {
        showForm(true);
    } else {
        showForm(false);
    }
    $('input[id^=deliv_]').click(function() {

のあとに、

    if($(this).is('#deliv_2')){
        $('#deliveryTime').hide();
    }else{
        $('#deliveryTime').show();
    }

を追加します。つまり、下記のようなソースになります。

    $(function() {
        if ($('input[name=deliv_id]:checked').val()
            || $('#deliv_id').val()) {
            showForm(true);
        } else {
            showForm(false);
        }
        $('input[id^=deliv_]').click(function() {
            if($(this).is('#deliv_2')){
                $('#deliveryTime').hide();
            }else{
                $('#deliveryTime').show();
            }
            showForm(true);
            var data = {};
            data.mode = 'select_deliv';
            data.deliv_id = $(this).val();

 

このソースでは、「配送方法の2番目のが選択されたら非表示」という仕組みになっているので、もしメール便が配送方法の3番目だったら、

    if($(this).is('#deliv_3')){
        $('#deliveryTime').hide();
    }else{
        $('#deliveryTime').show();
    }

としてください。

 

ちなみに、配送方法の順番は、EC-CUBE管理画面の「管理画面の基本情報>配送方法設定」で変更できます。

 

次回は「2.お客様情報入力から性別選択の必須をはずす」を解説します!

RSSフィードを購読する

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

シェアする

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

関連記事

コメント

お仕事のご依頼について

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

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

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

得意なこと

HTML5 / CSS3 / JavaScript

WordPress

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

各ブログのカスタマイズ

 

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

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

プロフィール

菊地翼

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

詳しくはこちら 

サイト内検索

Facebookページ

Twitter