【応用可】お問い合わせに項目を追加【Eccube4】 - エンジニ屋.com(エンジニヤドットコム)

実現したいこと

問い合わせフォームに問い合わせに関する選択項目を追加
追加項目を管理者へ届くメールの内容にも追加

Eccubeバージョン

Eccube4.0.6

イメージ画像

カスタマイズ前
カスタマイズ後

twigに追加項目のコードを記述

先ずは、お問い合わせページに追加項目のソースコードを書いていきます。 Eccubeでは基本カスタマイズする場合は、元からあるファイルをカスタマイズ用にファイルを作成します。 src/Eccube/Resource/template/default/Contact/index.twigのファイルをコピーして新しくapp/template/default/Contact/index.twigを作成挿入したい箇所に下記ソースコードを挿入。本記事では名前の上に追加したいと思うので、34行目あたりに追加しています。

<dl>
   <dt>{{ form_label(form.inquiry_category,  'お問い合わせ項目', { 'label_attr': { 'class': 'ec-label' }}) }}</dt>
   <dd>
    {% for i in 0..3 %}
    <div style='line-height: 30px;'>
      {{  form_widget(form.inquiry_category[i]) }}
    </div>
   {% endfor %}
   </dd>
</dl>

form_widget()でinquiry_categoryの0～3を指定して、なるべくコードをすっきりさせるためにfor文を使用しています。

追加の項目をformに記述

それでは、指定しているinquiry_categoryのformを作成します。お問い合わせフォームはsrc/Eccube /Form/Type/Front/ContactType.phpのファイルから取得しているので、そちらをカスタマイズする為に、app/Customize/Form/Extension/ContactTypeExtension.phpを作成しソースコードの中身を下記のように書いていきます。

<?php
namespace Customize\Form\Extension;

use Eccube\Form\Type\Front\ContactType;
use Symfony\Component\Form\AbstractTypeExtension;
use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
use Symfony\Component\Form\FormBuilderInterface;

class ContactTypeExtension extends AbstractTypeExtension {

  public function getExtendedType()
    {
        return ContactType::class;
    }

  public function buildForm(FormBuilderInterface $builder, array $options)
    {
    $builder
     ->add('inquiry_category', ChoiceType::class,[
                'choices' => [
                  trans('admin.contact.inquiry_category1') => 1,
                  trans('admin.contact.inquiry_category2') => 2,
                  trans('admin.contact.inquiry_category3') => 3,
                  trans('admin.contact.inquiry_category4') => 4,
                ],
                'data' => 1,
                'expanded' => true,
                'label' => trans('admin.contact.inquiry_category'),
            ]);
  }
}

元のファイルのContactTypeをgetExtendedType()の戻り値に指定して拡張するイメージです。なので追加したいフォームのみの記載でOkです。

表示項目の文字列をyamlファイルに記述

'choices'の配列の中に表示したい項目を入れています。直接、文字列を書いても問題ないのですが、基本的に文字列は別ファイルで管理したほうが良いので、 app/Customize/Resource/locale/Eccube/message.ja.yamlを用意して、中身を下記のように書いてきます。

admin.contact.inquiry_category1: 商品に関するお問い合わせ
admin.contact.inquiry_category2: 購入に関するお問い合わせ
admin.contact.inquiry_category3: 配送に関するお問い合わせ
admin.contact.inquiry_category4: その他のお問い合わせ

これでtrans() 内の同じ文字列を呼び出すことができます。

メール送信前の確認ページを作成

次にお問い合わせページの確認用のファイルを用意 src/Eccube/Resource/template/default/Contact/confirm.twigファイルをコピーしてapp/template/default/Contact/confirm.twigを作成します。

<dl>
     <dt>{{ form_label(form.inquiry_category,'お問い合わせ項目', { 'label_attr': { 'class': 'ec-label' }}) }}</dt>
      <dd>
       {% set categoryNum = form.inquiry_category.vars.data %}
       {% if categoryNum == 1 %}
         {{ 'admin.contact.inquiry_category1'|trans }}
       {% elseif categoryNum == 2 %}
         {{ 'admin.contact.inquiry_category2'|trans }}
       {% elseif categoryNum == 3 %}
         {{ 'admin.contact.inquiry_category3'|trans }}
       {% elseif categoryNum == 4 %}
         {{ 'admin.contact.inquiry_category4'|trans }}
       {% endif %}
       {{ form_widget(form.inquiry_category, { type :'hidden'})  }}
      </dd>
 </dl>

書き方の方法は他にもありますが、上記の方法ではset でindexで入力されたデータをcategoryNumの変数に入れ、if文でデータのnumber と一致すれば文字列を呼び出してます。最後の行でhiddenで値を次に渡しています。

メール文面の記述

次にメール文も同じように選択した項目が表示されるようにソースコードを下記のように追記します。 src/Eccube/Resource/template/default/Mail/contact_mail.html.twig をコピーしてapp/template/default/Mail/contact_mail.html.twigを作成

<dl style="display: flex;border-bottom: 1px dotted #ccc;margin: 0;">
   <dt style="padding-top: 14px;width: 30%;"><label class="ec-label">お問い合わせ項目</label></dt>
   <dd style="width: 70%;line-height: 3;">
     {% set categoryNum = data.inquiry_category %}
     {% if categoryNum == 1 %}
        {{ 'admin.contact.inquiry_category1'|trans }}
     {% elseif categoryNum == 2 %}
        {{ 'admin.contact.inquiry_category2'|trans }}
     {% elseif categoryNum == 3 %}
     　{{ 'admin.contact.inquiry_category3'|trans }}
     {% elseif categoryNum == 4 %}
         {{ 'admin.contact.inquiry_category4'|trans }}
     {% endif %}
    </dd>
 </dl>

これで管理者へ届くメールにも選択項目が表示されました。

それでは以上となります。今回はラジオボタンで試しましたが、他の項目などにも応用可能だと思います。

※<注意>他のプラグインやカスタマイズとの競合により動作異常が起きる場合があるので、カスタマイズを行う際はくれぐれも慎重にお願いします。

最後に

Eccubeはsymfonyのフレームワークで構成されています。もし「自力でもっとカスタマイズしたい」や「仕事でEccubeで開発することになった」方には、下記のsymofony4入門の参考書をおすすめします。
こちらの参考書にはEccubeのカスタマイズ方法については一切記載されていませんが、Entity、Controller、twig、Repositoryの利用方法が非常に分かりやすく書かれています。筆者も仕事でEccubeに携わることとなり、参考書を購入し理解が深まりました。 symfonyはLaravelと密接している部分もありLaravelの構成部分の理解も深まり有益でした。
価格帯は若干高めですが、中身はしっかりしているので、購入して損はないと思います。

リンク