13
7月
EC-CUBE4プラグイン スイッチによる切り替え機能実装方法
EC-CUBE4プラグインでスイッチによる切り替え機能実装方法についてご紹介します。
今回は例として、問合せフォームの任意項目の表示、非表示を切り替えるスイッチを実装します。
※問合せフォームの任意項目は、お名前（カナ）、住所、電話番号の3項目になります。
ここでは、本サイトで既にご紹介している問合せフォームの複製を利用する形でご紹介します。
・以下の記事を参考に、プラグインの雛形を作成してください。※既に作成済みの方は省略してください。
EC-CUBE4プラグインの雛形の作成方法はこちら
・以下の記事を参考に、作成したプラグインの雛形内に問合せフォームを複製してください。※既に作成済みの方は省略してください。
EC-CUBE4 問合せフォーム複製方法はこちら
・以下の記事を参考に、問合せフォーム複製プラグインとカスタマイズしたメールテンプレートファイルを連動させてください。
EC-CUBE4 プラグインとメールテンプレートファイルの連動方法はこちら
※送信される問合せ受付メールに、フォーム表示の設定内容が反映されていないといけないため、メールテンプレートをカスタマイズする必要があります。そのメールテンプレートファイルと連動させましょう。
・複製が必要なファイル
これまでに複製したファイルで十分なので、特にありません。
・修正が必要なファイル
・Config.php(Entity)
スイッチと連動させる任意項目の3項目分の新規カラムとして作成します。
・3項目分のカラムを以下のファイルを参考に追加してください。
また、不要になっているnameカラムの削除もここで行いましょう。
※この記事では、カラム名はそれぞれ以下のようにします。
・カナ項目用カラム：my_contact_kana
・住所項目用カラム：my_contact_address
・電話番号用カラム：my_contact_phone_number
・以下のコードを削除してください。
/**
* @var string
*
* @ORM\Column(name=”name”, type=”string”, length=255)
*/
private $name;
・以下のコードを削除してください。
/**
* @return string
*/
public function getName()
{
return $this->name;
}
/**
* @param string $name
*
* @return $this;
*/
public function setName($name)
{
$this->name = $name;
return $this;
}
・以下のコードを追加してください。
/**
* @var bool
*
* @ORM\Column(type=”boolean”, options={“default”: false})
*/
private $my_contact_kana;
/**
* @var bool
*
* @ORM\Column(type=”boolean”, options={“default”: false})
*/
private $my_contact_address;
/**
* @var bool
*
* @ORM\Column(type=”boolean”, options={“default”: false})
*/
private $my_contact_phone_number;
・以下のコードを追加してください。
/**
* @return bool|null
*/
public function isMyContactKana(): ?bool
{
return $this->my_contact_kana;
}
/**
* @param bool|null $my_contact_kana
* @return $this
*/
public function setMyContactKana(?bool $my_contact_kana): self
{
$this->my_contact_kana = $my_contact_kana;
return $this;
}
/**
* @return bool|null
*/
public function isMyContactAddress(): ?bool
{
return $this->my_contact_address;
}
/**
* @param bool|null $my_contact_address
* @return $this
*/
public function setMyContactAddress(?bool $my_contact_address): self
{
$this->my_contact_address = $my_contact_address;
return $this;
}
/**
* @return bool|null
*/
public function isMyContactPhoneNumber(): ?bool
{
return $this->my_contact_phone_number;
}
/**
* @param bool|null $my_contact_phone_number
* @return $this
*/
public function setMyContactPhoneNumber(?bool $my_contact_phone_number): self
{
$this->my_contact_phone_number = $my_contact_phone_number;
return $this;
}
・PluginManager.php
Config.phpに追加したカラムの初期値設定を行います。
・以下のコードを削除してください。
const ADD_CONFIG_NAME = “ほげほげ”;
・createConfigメソッド内の以下のコードを削除してください。
$config->setName($this::ADD_CONFIG_NAME);
・追加カラムの分、createConfigメソッド内に初期値設定のコードを追加してください。（ここでは全ての初期値をfalseとします）
$config->setMyContactKana(false);
$config->setMyContactAddress(false);
$config->setMyContactPhoneNumber(false);
・ConfigType.php
フォームの設定を行います。追加カラム分のフォームの設定を追加し、不要になったnameカラムのフォームの設定を削除します。
・builderFromメソッドを以下のように書き換えてください。
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder->add(‘my_contact_kana’, ToggleSwitchType::class);
$builder->add(‘my_contact_address’, ToggleSwitchType::class);
$builder->add(‘my_contact_phone_number’, ToggleSwitchType::class);
}
・useの一番下に以下のコードを追加してください。
use Eccube\Form\Type\ToggleSwitchType;
・nameカラムのフォーム設定を削除したことで不要になったコードを削除してください。
use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Component\Validator\Constraints\Length;
use Symfony\Component\Validator\Constraints\NotBlank;
.
・Config.twig
ConfigType.phpで設定したフォームを表示し、名前フォームを削除します。
・以下のコードを削除してください。
<div class=”row”>
<div class=”col-3″><span>名前</span><span
class=”badge badge-primary ml-1″>必須</span></div>
<div class=”col mb-2″>
{{ form_widget(form.name) }}
{{ form_errors(form.name) }}
</div>
</div>
・上記のコードがあった場所に以下のコードを追加してください。
<div class=”row”>
<div class=”col-3″><span>お名前(カナ)</span></div>
<div class=”col mb-2″>
{{ form_widget(form.my_contact_kana) }}
{{ form_errors(form.my_contact_kana) }}
</div>
</div>
<div class=”row”>
<div class=”col-3″><span>住所</span></div>
<div class=”col mb-2″>
{{ form_widget(form.my_contact_address) }}
{{ form_errors(form.my_contact_address) }}
</div>
</div>
<div class=”row”>
<div class=”col-3″><span>電話番号</span></div>
<div class=”col mb-2″>
{{ form_widget(form.my_contact_phone_number) }}
{{ form_errors(form.my_contact_phone_number) }}
</div>
</div>
・config.twigファイルはバグが発生して、上記のコードで正常に表示されないケースがあるようです。
私の場合は、view画面を表示する際に記述していないdivの閉じタグが増加してしまうというバグでした。
そのため、もし正常に表示されなかった場合は、各フォームを以下のコードに変更して試してください。（各項目のdivタグを全て削除します）
<span>お名前(カナ)</span>
{{ form_widget(form.my_contact_kana) }}
{{ form_errors(form.my_contact_kana) }}
<span>住所</span>
{{ form_widget(form.my_contact_address) }}
{{ form_errors(form.my_contact_address) }}
<span>電話番号</span>
{{ form_widget(form.my_contact_phone_number) }}
{{ form_errors(form.my_contact_phone_number) }}
.
・ContactController.php
・useの一番下に以下のコードを追加してください。
use Plugin\HogePlugin\Repository\ConfigRepository;
・ContactControllerクラスの直下を以下のように修正してください。（修正箇所は赤字で記載しています。）
class MyContactController extends AbstractController
{
/**
* @var MailService
*/
protected $mailService;
/**
* @var ConfigRepository
*/
protected $configRepository;
/**
* QuestionController constructor.
*
* @param MailService $mailService
*
* @param ConfigRepository $configRepository
*
*/
public function __construct(
MailService $mailService,
ConfigRepository $configRepository
)
{
$this->mailService = $mailService;
$this->configRepository = $configRepository;
}
.
・ContactControllerクラス内のindexメソッドを修正してください。（修正箇所は赤字で記載しています。）
public function index(Request $request)
{
$config = $this->configRepository->findOneBy([“kensaku” => ‘search_mail_template’]);
$builder = $this->formFactory->createBuilder(ContactType::class);
if ($this->isGranted(‘ROLE_USER’)) {
/** @var Customer $user */
$user = $this->getUser();
$builder->setData(
[
‘name01’ => $user->getName01() ,
‘name02’ => $user->getName02(),
‘kana01’ => $config->isMyContactKana() ? $user->getKana01() : “”,
‘kana02’ => $config->isMyContactKana() ? $user->getKana02() : “”,
‘postal_code’ => $config->isMyContactAddress() ? $user->getPostalCode() : “”,
‘pref’ => $config->isMyContactAddress() ? $user->getPref() : “”,
‘addr01’ => $config->isMyContactAddress() ? $user->getAddr01() : “”,
‘addr02’ => $config->isMyContactAddress() ? $user->getAddr02() : “”,
‘phone_number’ => $config->isMyContactPhoneNumber() ? $user->getPhoneNumber() : “”,
‘email’ => $user->getEmail(),
]
);
}
// FRONT_CONTACT_INDEX_INITIALIZE
$event = new EventArgs(
[
‘builder’ => $builder,
],
$request
);
$this->eventDispatcher->dispatch(EccubeEvents::FRONT_CONTACT_INDEX_INITIALIZE, $event);
$form = $builder->getForm();
$form->handleRequest($request);
if ($form->isSubmitted() && $form->isValid()) {
switch ($request->get(‘mode’)) {
case ‘confirm’:
$form = $builder->getForm();
$form->handleRequest($request);
return $this->render(‘@HogePlugin/my_confirm.twig’, [
‘form’ => $form->createView(),
‘my_contact_kana’ => $config->isMyContactKana(),
‘my_contact_address’ => $config->isMyContactAddress(),
‘my_contact_phone_number’ => $config->isMyContactPhoneNumber(),
]);
case ‘complete’:
$data = $form->getData();
$event = new EventArgs(
[
‘form’ => $form,
‘data’ => $data,
],
$request
);
$this->eventDispatcher->dispatch(EccubeEvents::FRONT_CONTACT_INDEX_COMPLETE, $event);
$data = $event->getArgument(‘data’);
// メール送信
$this->mailService->sendContactMail($data);
return $this->redirect($this->generateUrl(‘contact_complete’));
}
}
return [
‘form’ => $form->createView(),
‘my_contact_kana’ => $config->isMyContactKana(),
‘my_contact_address’ => $config->isMyContactAddress(),
‘my_contact_phone_number’ => $config->isMyContactPhoneNumber(),
];
}
・index.twig(contact)およびconfire.twig(contact)
・各任意項目フォームのdlタグの内容を条件分岐で分け、trueなら表示、falseなら<dl>タグの中身はdisplay:noneで全て非表示とすることで、フォームの表示非表示の設定を実現します。
以下のコードはindex.twig(contact)の任意項目3種のフォームのコードになります。（修正箇所を赤字で記載）
またindex.twig(contact)だけでなく、confire.twig(contact)も同じ要領で修正してください。
{% if my_contact_kana %}
<dl>
{% else %}
<dl style=”display:none”>
{% endif %}
<dt>
{{ form_label(form.kana, ‘お名前(カナ)’, {‘label_attr’: {‘class’: ‘ec-label’}}) }}
</dt>
<dd>
<div class=”ec-halfInput{{ has_errors(form.kana.kana01, form.kana.kana02) ? ‘ error’ }}”>
{{ form_widget(form.kana.kana01, {‘attr’: { ‘placeholder’: ‘セイ’ }}) }}
{{ form_widget(form.kana.kana02, {‘attr’: { ‘placeholder’: ‘メイ’ }}) }}
{{ form_errors(form.kana.kana01) }}
{{ form_errors(form.kana.kana02) }}
</div>
</dd>
</dl>
{% if my_contact_address %}
<dl>
{% else %}
<dl style=”display:none”>
{% endif %}
<dt>
{{ form_label(form.address, ‘住所’, { ‘label_attr’: { ‘class’: ‘ec-label’ }}) }}
</dt>
<dd>
<div class=”ec-zipInput{{ has_errors(form.postal_code) ? ‘ error’ }}”>
<span>{{ ‘〒’|trans }}</span>
{{ form_widget(form.postal_code) }}
{{ form_errors(form.postal_code) }}
</div>
<div class=”ec-zipInputHelp”>
<div class=”ec-zipInputHelp__icon”>
<div class=”ec-icon”><img
src=”{{ asset(‘assets/icon/question-white.svg’) }}” alt=””>
</div>
</div><a href=”https://www.post.japanpost.jp/zipcode/” target=”_blank”><span>{{ ‘郵便番号検索’|trans }}</span></a>
</div>
{{ form_errors(form.postal_code) }}
<div class=”ec-select{{ has_errors(form.address.pref) ? ‘ error’ }}”>
{{ form_widget(form.address.pref) }}
{{ form_errors(form.address.pref) }}
</div>
<div class=”ec-input{{ has_errors(form.address.addr01) ? ‘ error’ }}”>
{{ form_widget(form.address.addr01, { ‘attr’: { ‘placeholder’: ‘市区町村名(例：大阪市北区)’ }}) }}
{{ form_errors(form.address.addr01) }}
</div>
<div class=”ec-input{{ has_errors(form.address.addr02) ? ‘ error’ }}”>
{{ form_widget(form.address.addr02, { ‘attr’: { ‘placeholder’: ‘番地・ビル名(例：西梅田1丁目6-8)’ }}) }}
{{ form_errors(form.address.addr02) }}
</div>
</dd>
</dl>
{% if my_contact_phone_number %}
<dl>
{% else %}
<dl style=”display:none”>
{% endif %}
<dt>
{{ form_label(form.phone_number, ‘電話番号’, { ‘label_attr’: { ‘class’: ‘ec-label’ }}) }}
</dt>
<dd>
<div class=”ec-telInput{{ has_errors(form.phone_number) ? ‘ error’ }}”>
{{ form_widget(form.phone_number) }}
{{ form_errors(form.phone_number) }}
</div>
</dd>
</dl>
.
・メールテンプレートファイルも修正します。
これを修正しないと、スイッチをOFFにしていて画面に表示されていなかった項目がメールには表示されてしまったり、ログイン中のユーザーが問合せをした場合に項目だけでなく入力していないのに会員情報をもとにして入力内容が表示されてしまいます。なので、必ず修正してください。
・contact_mail.twig
・以下の4行を削除してください。
お名前：{{ data.name01 }} {{ data.name02 }}{% if data.kana01 or data.kana02 %} ({{ data.kana01 }} {{ data.kana02 }}){% endif %} 様
郵便番号：{% if data.postal_code %}〒{{ data.postal_code }}{% endif %}
住所：{% if data.pref.name is defined %} {{ data.pref.name }}{% endif %}{{ data.addr01 }}{{ data.addr02 }}
電話番号：{{ data.phone_number }}
・削除した箇所に以下の5行を追加してください。
お名前：{{ data.name01 }} {{ data.name02 }} 様
{% if data.kana01 or data.kana02 %}お名前（カナ）：({{ data.kana01 }} {{ data.kana02 }})様{% endif %}
{% if data.postal_code %}郵便番号：〒{{ data.postal_code }}{% endif %}
{% if data.pref.name is defined %}住所： {{ data.pref.name }}{{ data.addr01 }}{{ data.addr02 }}{% endif %}
{% if data.phone_number %}電話番号：{{ data.phone_number }}{% endif %}
・contact_mail.html.twig
・任意項目の3項目分のフォームを以下のように修正してください。
{% if data.kana01 or data.kana02 %}
<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;”>{{ data.kana01 }} {{ data.kana02 }}</dd>
</dl>
{% endif %}
{% if data.postal_code or data.pref.name is defined %}
<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;”><span>〒</span>{{ data.postal_code }} {{ data.pref }} {{ data.addr01 }} {{ data.addr02 }}</dd>
</dl>
{% endif %}
{% if data.phone_number %}
<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;”>{{ data.phone_number }}</dd>
</dl>
{% endif %}
.
以上の手順で、スイッチによる切り替え機能実装ができます。
