Blog

ブログ

【ECCUBE】会員登録時のカナを自動入力にしたい

eccube

最近これ便利だなっていうjavascriptプラグインを見つけたので紹介したいと思います。
開発者が嬉しいというより使っていただくユーザさんに便利なプラグインです。
名前を入力する場合は大抵フリガナも入力する欄が設置されていると思いますが同じことを2回入力するのって地味にめんどくさいと思うんです。
そんな手間を少しでも楽にしたい時はぜひ使ってみてください。
ECCUBEのバージョンには依存しないので、2系〜4系どこでも使用できるかと思います。
※今回は4系に実装します

autokana

https://github.com/harisenbon/autokana

こちら日本語入力に対するフリガナを自動的に別フィールドに記入するJQueryプラグインになります。
注意点も少しあります。
・keydownで発火するためコピペなどでは使えません
・入力されている文字を読み取ってカナに変換しているわけではないのでタイポした場合はカナに文字が残ってしまう

ここからは設置方法を説明します。とっても簡単です。

まず↑のリンクから.jsをダウンロードしhtml/user_data/jsに設置

Twigファイルを修正

app/template/default/Entry/index.twig

<script src="{{ asset('assets/js/autokana-master/jquery.autoKana.js', 'user_data') }}"></script>

<script>
    $(function() {
        $.fn.autoKana('input[name="entry[name][name01]"] ', 'input[name="entry[kana][kana01]"]', {katakana:true});
        $.fn.autoKana('input[name="entry[name][name02]"] ', 'input[name="entry[kana][kana02]"]', {katakana:true});
    });
</script>

これだけです！

とってもかんたんですね♪

では実際に名前を入力してみましょう。

 

ちゃんとカナに入力されているのがわかりますね！

すぐできますのでぜひお試しください

【EC-CUBE4系】環境変数を設定する際にハマった話

eccube

EC-CUBE4 の Docker環境で環境変数を設定する際に、思わぬ壁にぶち当たりました。

services.yaml に記述されている設定内容を、環境ごとに分けるため、環境変数から取得するようにしたかったのです。
クレジット決済の3Dセキュアに関する設定なので、3D_SECURE_SETTING といった感じの名前で環境変数を登録し、設定として取得するようにしました。

docker-compose を使用する環境で環境変数を登録するには、docker-compose.dev.yml の environment に記述します。

services:
  ec-cube:
    environment:
      3D_SECURE_SETTING: "my_value"

環境変数を設定ファイル services.yaml で取得するには、’%env(環境変数名)%’ とします。

parameters:
  my_setting: '%env(3D_SECURE_SETTING)%'

以上で、コントローラー等で

$this->eccubeConfig['my_setting']

とすれば、”my_value”が読み取れるはず、が、以下のエラーが発生しました。

Environment variable not found: “3D_SECURE_SETTING”

何度も設定方法を確認し、コンテナの再起動とキャッシュクリアを繰り返すも虚しく時間がすぎるだけでしたが、ふと、「この変数名…？」と気づきました。
数字で始まる変数名は、多くのプログラミング言語で許可されていません。
また環境変数の命名規則も同様なようです。
PHPのコーディングをしている時はほぼ無意識的に避けて命名していたのですが、設定ファイル内でのこととあってか、頭から抜けていました。

英字から始まる環境変数名にすることで、無事取得できました！
イージーなミスですが、油断してるとハマりますね。

【ECCUBE4】eccubeでenumを使いたい！

eccube

eccubeでenumを使いたい！

ECcubeでは固定値などはMasterにレコードを追加して、
使いたい場合は都度DBからレコードを検索して使用しているかと思います。

ですがいちいちDBに接続&検索をして使うのは…という場合にこんなやり方もあります。
enumの追加＆使用方法を簡単ですがご紹介したいと思います。

まず、Customize配下にEnumディレクトリを追加

下記のようなファイルを作成

<?php
namespace Customize\Enum;
/**
* 会員ランク
*/
enum CustomerRankType: string
{
　　case ROOKIE = ‘1’;
　　case BRONZE = ‘2’;
　　case SILVER = ‘3’;
　　case GOLD = ‘4’;
　　case PLATINUM = ‘5’;
　　case DIAMOND = ‘6’;
　　case MASTER = ‘7’;
　　public function getLabel(): string
　　{
　　　return match ($this) {
　　　　　self::ROOKIE => ‘ルーキー’,
　　　　　self::BRONZE => ‘ブロンズ’,
　　　　　self::SILVER => ‘シルバー’,
　　　　　self::GOLD => ‘ゴールド’,
　　　　　self::PLATINUM => ‘プラチナム’,
　　　　　self::DIAMOND => ‘ダイアモンド’,
　　　　　self::MASTER => ‘マスター’,
　　　　};
　　}
　　public static function getTypeList()
　　{
　　　$allList = [];
　　　foreach (self::cases() as $item) {
　　　　　$allList[$item->getLabel()] = $item->value;
　　　}
　　　return $allList;
　　}
}

使用方法ですが、例えばFormTypeで使用する場合は下記のようにすれば使用できます。

->add(‘customer_rank’, ChoiceType::class, [
‘required’ => false,
expanded’ => false,
‘multiple’ => false,
‘placeholder’ => ‘選択してください’,
‘choices’ => CustomerRankType::typeList(),
])

Twigにはこんな感じです

<div class=”row mb-2″>
　　<div class=”col-3″>
　　　　<span>{{ ‘会員スペシャルランク’|trans }}</span>
　　　　<span class=”badge bg-primary ms-1″>{{ ‘admin.common.required’|trans }}</span>
　　</div>
　　<div class=”col”>
　　　　<div class=”row”>
　　　　　　<div class=”col”>
　　　　　　　　{{ form_widget(form.customer_rank) }}
　　　　　　</div>
　　　　</div>
　　</div>
</div>

こんな感じで表示することができました。

ぜひ機会があればですが、検討してみてください。