refirio.org

カスタマイズ

WebデザイナーがEC-CUBE4を触る為に知っておくと良い事 | EC-CUBE CORPORATE BLOG https://www.wantedly.com/companies/ec-cube/post_articles/199543 EC-CUBE4 Template for Adobe XD on Behance https://www.behance.net/gallery/94593359/EC-CUBE4-Template-for-Adobe-XD EC-CUBE 4.0 開発者向けドキュメント - < for EC-CUBE 4.0 Developers /> https://doc4.ec-cube.net/ 以下のページ以降で、カスタマイズについて解説されている まずはひととおり目を通しておくのが良さそう ディレクトリ・ファイル構成 - < for EC-CUBE 4.0 Developers /> https://doc4.ec-cube.net/spec_directory-structure ECCube4はSymfonyやDoctrineがベースになっているため、それらの拡張機構を利用できる ECCubeのカスタマイズ情報が見つからない場合、SymfonyやDoctrineに関する情報を探すことで対応できることがある Symfonyの機能を使ったカスタマイズ - < for EC-CUBE 4 Developers /> https://doc4.ec-cube.net/customize_symfony ■ファイル構成 ディレクトリ・ファイル構成 - < for EC-CUBE 4.0 Developers /> https://doc4.ec-cube.net/spec_directory-structure src内にECCubeのプログラムが格納されているが、原則この中は編集しない app内にファイルをコピーし、そのコピーしたファイルを編集する ただしPHPプログラムの場合、以下のように namespace の調整が必要になる可能性があるので注意 （以下は src\Eccube\Service\OrderStateMachine.php を複製して app\Customize\Service\OrderStateMachine.php を作成した場合） コントローラやビューは上記のとおりapp内にコピーを作成すればいいが、 ファイルによってはsrc内のファイルを直接編集する必要があるかもしれない 都度要確認 ■ルート定義の確認 Symfonyのルート定義は、yamlで定義する方法とアノテーションで定義する方法の2種類がある ECCubeではアノテーション方式が採用されている アノテーションは便利ではあるが、全体を把握しにくいデメリットがある 新しいページを作成しようとした際にルート名が既にあるかなど確認したければ、 以下のコマンドでルート定義一覧を確認できる ■キャッシュの扱い コントローラやテンプレートは、ECCube設置ディレクトリ内の html/var/cache 内にキャッシュが作成される 具体的には html/var/cache/prod/twig/b3/b3e156cd992b8f915fb07ae6291c4614787a7b3146f1c86e8ffb6aa78ddcd6f9.php のような場所に作成される ECCubeのキャッシュはなかなか強力で、これが原因で正しく動作しないことが多々ある 意図したとおりに反映＆動作しなければ、まずはキャッシュの全削除を試すといい。以下のコマンドでキャッシュを削除できる 次回アクセス時にキャッシュが再生成される（初回アクセス時は非常に重いので注意） もしくは管理画面の「コンテンツ管理 → キャッシュ管理」からキャッシュを削除することもできる ただし上記のようにコマンドで削除するほうが確実かもしれない 管理画面からキャッシュを削除しても挙動がおかしければ、コマンドでの削除を試す キャッシュの生成は を実行することでも対応できる …が、ローカルのVagrant環境で試すと 「Error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 524288 bytes)」 のエラーになった。ブラウザからアクセスしてキャッシュを再生成させると大丈夫だった なお、部分的な表示変更のための編集なら html/var/cache/prod/twig/b3/b3e156cd992b8f915fb07ae6291c4614787a7b3146f1c86e8ffb6aa78ddcd6f9.php などをピンポイントで手動削除すれば高速に表示確認できる 上記だと対象ファイルを探すのが面倒だが html/var/cache/prod/twig をフォルダごと削除する方法なら、対象は明確だし次回の表示もそれほど時間はかからない この方法が一番無難かもしれない また、.env で以下のように設定すると、キャッシュが作成されないようになり、デバッグバーが表示される（開発用） ただし一部キャッシュなしで動作するので、キャッシュ再生成時ほどではないがそれなりに重い なおVagrantを使用している場合、共有フォルダをNFSにすると大幅に改善する可能性がある Vagrant(VirtualBox)でディスクアクセスが遅い問題の対処法 https://masshiro.blog/vagrant-laravel-slow/ EC-CUBE 開発コミュニティ - フォーラム https://xoops.ec-cube.net/modules/newbb/viewtopic.php?topic_id=20574&forum=2 ■ユーティリティ関数 コントローラーやサービスなどから呼び出す、グローバル関数を定義できる src/Eccube/Util/StringUtil.php などを参考に app/Customize/Util に作成すると良さそう ■テンプレートの編集 テンプレートエンジンにはTwigが使われている 以下の場所にテンプレートがある html\src\Eccube\Resource\template 例えば以下のファイルを編集すると、ログイン画面に反映される html\src\Eccube\Resource\template\default\Mypage\login.twig ただし元のファイルは直接編集せずに、以下に複製配置して編集することが推奨される（コントローラなど他ファイルも同様） html\app\template\default\Mypage\login.twig 反映されない場合はキャッシュを削除する テンプレートは管理画面の「オーナーズストア → テンプレート → テンプレート一覧」から確認できる ダウンロードすると、CSSファイルや画像ファイルに加え、上の手順で複製配置した差分ファイルを取得できる EC-CUBE4カスタマイズ初心者のためのTwig入門 | Designup https://designup.jp/eccube4-twig-beginner.html デザインテンプレートの基礎 - < for EC-CUBE 4.0 Developers /> https://doc4.ec-cube.net/design_template EC-CUBE4：デザインテンプレートのインストール | ITOBEN STYLE Blog https://itoben.com/blog/3751.html ■Twigヘルパー関数 [EC-CUBE]EC-CUBE4のtwigで利用できる関数の追加 - 株式会社MIX https://mixltd.jp/blog/eccube_twig_add_function/ [EC-CUBE4] Twig内で使用できる独自のヘルパー関数を追加する方法 #EC-CUBE4 - Qiita https://qiita.com/seiyaan/items/e2cf373db0aab4028cb5 ちょっとした処理なら src/Eccube/Twig/Extension/EccubeExtension.php を複製して app/Customize/Twig/Extension/EccubeExtension.php を作成し、 これを編集して関数を追加するのがいいか ■CSSファイルの編集 ※GulpでSassをビルドする手順があるが、エラーで進められず 詳細は「メモ」の「CSSファイルの編集」を参照 ■プレースホルダの変更 フォームの入力例は、以下のファイルで変更することができる プレースホルダ内にある文字列「5300001」などで検索すると、該当箇所を見つけることができる src\Eccube\Resource\locale\messages.ja.yaml ■メールテンプレートの追加 「受注編集」画面の最下部に「メールを作成」ボタンがあり、ここから送信ができる テンプレートを選択できるが、現状本番環境では「注文受付メール」のみになっている 以下によると、テンプレートの作成とデータベースの調整で対応できそう EC-CUBE4でメールテンプレートを追加する方法 | コトダマウェブ https://cotodama.co/ec-cube4_mail_template/ また、以下のプラグインを導入すれば管理画面から新規追加できるみたい（有料＆未検証） 4.0系|メールテンプレート登録プラグイン for EC-CUBE4|トエビス株式会社 https://www.ec-cube.net/products/detail.php?product_id=1941 ■納品書ロゴの変更 注文管理で納品書を出力したとき、ECCubeのロゴが表示される。これを差し替える方法 管理画面「コンテンツ管理 → ファイル管理」から「asset → pdf」内の「logo.png」に上書きアップロードする EC-CUBE4で納品書ロゴを変更する(4.0.3〜) - Qiita https://qiita.com/kazumiiiiiiiiiii/items/f2e5bdfb902b1b94c00a ■404ページの変更 初期デザインは素っ気ないものなので、サイトに合わせてデザインされたページにしておくといい src\Eccube\Resource\template\default\error.twig を複製して app\template\default\error.twig を作成し、任意の内容に変更する ■メンテナンスモード キャッシュクリア時やプラグインのインストール途中など、 ユーザ側にアクセスしてほしくない場合はメンテナンスモードを利用できる 以下のようにすると、ユーザ側の表示がメンテナンス画面に変更される 以下のようにすると、メンテナンス画面が解除される なお、この機能は管理画面からも利用できる 管理画面の「コンテンツ管理 → メンテナンス管理」から、メンテナンスモードの有効・無効を切り替えることができる メンテナンス機能を追加 by okazy - Pull Request #3998 - EC-CUBE/ec-cube https://github.com/EC-CUBE/ec-cube/pull/3998 ■税抜価格（税別価格）で表示 プラグインがあるくらいなので、標準機能では対応していないみたい 4.0系|割引率表示、税抜表示プラグイン(EC-CUBE4.0系対応)|株式会社YMK https://www.ec-cube.net/products/detail.php?product_id=2074 ただし、ユーザ側の表示に限定すれば大変な改造にはならないかもしれない 「カートに入れたときの表示」「注文メールの内容」「マイページでの表示」などはあるので、あちこち調整が必要になるかもしれないが EC-CUBE 開発コミュニティ - フォーラム https://xoops.ec-cube.net/modules/newbb/viewtopic.php?viewmode=flat&topic_id=22003&forum=10 ※以下「法律.txt」にも同じ内容を記載している 消費税転嫁対策特別措置法により、税抜表示が問題になる可能性があるらしい？ 要勉強 消費税転嫁対策特別措置法 | 消費者庁 https://www.caa.go.jp/policies/policy/representation/consumption_tax/ 10％増税に備えよう！消費税転嫁対策特別措置法まとめ https://biz.moneyforward.com/accounting/basic/13868/ 消費増税前に再確認！ 消費税転嫁対策特別措置法って？ - マネーイズム https://www.all-senmonka.jp/moneyizm/1088/ ■商品ごとに税率を設定する バージョン4.0.3からは対応している ただし4.0.3時点では商品別税率設定の税率が正しく反映されないケースがあるとのこと（以下ページ参照） またプラグインや表示カスタマイズ部分も含めて対応できているか、は何とも言えないので、設定する前にひととおりの検証は必要 EC-CUBE 4.0.3 で改善された軽減税率制度関連機能と設定方法を見てみよう！ - ネットショップの壺 https://tsubo.ec-cube.net/2019/09/09/10674 ■商品登録時の価格を内税にする 税率設定を0%に設定し、商品登録時の商品価格を税込み価格で登録することで、全ての価格を内税（税込）運用とすることはできるみたい ただし表示部分のテンプレートは編集する必要はあるみたい EC-CUBE4設定＞店舗設定＞税率設定 | EC-CUBE4 管理・運用マニュアル | shiro8 https://www.shiro8.net/manual4/v40x/setting/shop_tax.html 税率設定 - < for EC-CUBE 4.0 Developers /> https://doc4.ec-cube.net/spec_tax ■商品に販売期間を設定する ※未検証 【EC-CUBE4】商品に販売期間を設定する方法 - あずみ.net https://a-zumi.net/eccube4-now-on-sale-product/ ■タグによる検索 商品情報として「タグ」を登録できる ただし標準機能では、このタグをもとに絞り込み検索する機能は無いみたい EC-CUBE4のフロントの検索ボックスで商品タグ検索できるようにする方法 - あずみ.net https://a-zumi.net/eccube4-tag-search/ [EC-CUBE4]タグIDで商品一覧を絞り込めるようにするよー | Hiroki's toy box https://blugrit.com/2020/04/05/ec-cube4-product-list-tag-id/ 4.0系|商品タグ検索プラグイン for EC-CUBE4|あずみ.net https://www.ec-cube.net/products/detail.php?product_id=1862 4.0系|商品タグ機能拡張(4.0対応版)|systemkd https://www.ec-cube.net/products/detail.php?product_id=1709 ■商品一覧の表示件数を変更する 管理画面の「設定 → システム設定 → マスターデータ管理」で mtb_product_list_max をいじることで、ユーザ側での商品一覧の表示件数を変更できる データの並びを変更すれば、デフォルトの指定も変更できる（一番上のデータがデフォルトの指定となる） EC-CUBE4で商品一覧のソート順を「新着順」を初期表示にする - Qiita https://qiita.com/chihiro-adachi/items/279a05d833e87bc84076 ■商品一覧の並び順を「新着順」を初期表示にする 管理画面の「設定 → システム設定 → マスターデータ管理」で mtb_product_list_order_by をいじることで、ユーザ側での商品一覧の並び順を追加できる データの並びを変更すれば、デフォルトの指定も変更できる（一番上のデータがデフォルトの指定となる） ■商品一覧の並び順を任意のものに変更する 管理画面の商品一覧で、簡単に並び順を変更する機能は無いみたい プログラムを改造するか、プラグインを探すなどする必要がある 【ECCUBE4】商品検索結果・一覧に順番やwhere条件を追加する | Zakkuriブログ https://zakkuri.life/eccube-add-query/#google_vignette ec-cube4 タグ 検索 - ECCUBE4の商品検索で商品タグも条件に追加するANDじゃなくてORで - Customizer(Where| Query)だと出来ない？ https://doroidpanic.com/ec-cube4-%E3%82%BF%E3%82%B0-%E6%A4%9C%E7%B4%A2-eccube4%E3%81%AE%E5%95%86%E5%... [EC-CUBE 4] 商品一覧ページのソート順をカスタマイズ - スプレッドワークス - Web制作会社/システム開発 - 東京都豊島区南池袋 https://www.spreadworks.co.jp/product-list-sort-order-change-for-ec-cube4/ EC-CUBE4の管理画面で「商品」「受注」「会員」一覧の並び順を変更する方法 | TechMemo https://techmemo.biz/ec-cube/eccube4-admin-list-orderby/ 4.0系|商品並び替えプラグイン(CSV一括更新対応) for EC-CUBE4|あずみ.net https://www.ec-cube.net/products/detail.php?product_id=1890 「売上順」もしくは「売れ筋順」でよければ、以下のプラグインによって対応できる 4.0系|売上順・売れ筋順並び替えプラグイン for EC-CUBE4|株式会社U-Mebius https://www.ec-cube.net/products/detail.php?product_id=2006 ■管理画面の商品一覧の表示順を変更する リポジトリのカスタマイズ - < for EC-CUBE 4 Developers /> https://doc4.ec-cube.net/customize_repository EC-CUBE4 リポジトリのカスタマイズ 使い方を調べてみた #EC-CUBE4 - Qiita https://qiita.com/dev_belltzel/items/f902fead76d3c9aa6dde app/Customize/Repository/AdminProductListOrderByCustomizer.php を作成して以下の内容を記述すると、管理画面の商品一覧が「商品IDの降順」になる OrderByCustomizerを継承してクラスを作成し、getQueryKeyでは「QueryKey::PRODUCT_SEARCH_ADMIN」を返すといいみたい - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - <?php namespace Customize\Repository; use Eccube\Doctrine\Query\JoinClause; use Eccube\Doctrine\Query\OrderByClause; use Eccube\Doctrine\Query\OrderByCustomizer; use Eccube\Repository\QueryKey; class AdminProductListOrderByCustomizer extends OrderByCustomizer { /** * 検索条件を追加する * * @param array $params * @param $queryKey * @return JoinClause[] */ public function createStatements($params, $queryKey) { return [new OrderByClause('p.id', 'DESC')]; //return []; } /** * @return string * @see \Eccube\Repository\ProductRepository::getQueryBuilderBySearchDataForAdmin() * @see QueryKey */ public function getQueryKey() { // 管理画面の商品一覧をカスタマイズする return QueryKey::PRODUCT_SEARCH_ADMIN; } } - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ■管理画面の商品一覧の絞り込み条件を追加する EC-CUBE4カスタマイズ - [4系プラグイン開発] たった３ステップで受注一覧へ検索絞り込み条件を追加する方法 https://umebius.com/eccube/v4-plugin-order_list_filter_shipping_date/ app/Customize/Repository/AdminProductListWhereCustomizer.php を作成して以下の内容を記述する 「WhereClause::like」であいまい検索が、「WhereClause::eq」で完全一致検索ができる - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - <?php namespace Customize\Repository; use Eccube\Doctrine\Query\JoinClause; use Eccube\Doctrine\Query\WhereClause; use Eccube\Doctrine\Query\OrderByClause; use Eccube\Doctrine\Query\OrderByCustomizer; use Eccube\Doctrine\Query\WhereCustomizer; use Eccube\Repository\QueryKey; class AdminProductListWhereCustomizer extends WhereCustomizer { /** * 検索条件を追加する * * @param array $params * @param $queryKey * @return JoinClause[] */ public function createStatements($params, $queryKey) { return [WhereClause::like('p.name', ':name', ['name' => '%ジェラート%'])]; //return [WhereClause::eq('p.name', ':name', ['name' => 'ジェラート'])]; //return []; } /** * @return string * @see \Eccube\Repository\ProductRepository::getQueryBuilderBySearchDataForAdmin() * @see QueryKey */ public function getQueryKey() { // 管理画面の商品一覧をカスタマイズする return QueryKey::PRODUCT_SEARCH_ADMIN; } } - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - なお独自に追加した項目であっても、以下のようにして検索対象にできる （これは「カスタマイズ: 商品情報に項目を追加」で追加した項目から検索する例） - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - public function createStatements($params, $queryKey) { return [WhereClause::like('p.recommend_text', ':recommend_text', ['recommend_text' => '%おすすめポイント%'])]; } - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ■受注一覧の「対応状況」の色 「システム設定 → マスターデータ管理」の mtb_order_status_color で色を変更できる ステータスが違っても色が同じになっているものがあるので、判りづらいようなら必要に応じて変更する ■受注一覧の絞り込み ※未検証 EC-CUBE4カスタマイズ - [4系プラグイン開発] たった３ステップで受注一覧へ検索絞り込み条件を追加する方法 https://umebius.com/eccube/v4-plugin-order_list_filter_shipping_date/ ■受注登録画面で「その他の明細」を追加する EC-CUBE4カスタマイズ - [受注管理] 受注登録画面でその他の明細を追加する方法 https://umebius.com/eccube/%E5%8F%97%E6%B3%A8%E7%AE%A1%E7%90%86-%E3%81%9D%E3%81%AE%E4%BB%96%E3%81%AE... ■受注編集時に「注文者」が折りたたまれないように 「受注管理」で受注を編集する際、「注文者」がデフォルトで折りたたまれている これをデフォルトで折りたたまれないようにする src/Eccube/Resource/template/admin/Order/edit.twig を複製して app/template/admin/Order/edit.twig を作成し、 360行目あたりあたりにある以下の部分をそれぞれ調整する ■CSVに項目を追加 EC-CUBE4でCSV出力項目をカスタマイズする方法 ｜株式会社サイバースペース｜愛媛県松山市のWeb制作・ホームページ制作・システム会社 https://cyberspace-jp.com/2023/1664/ 実際に追加を試したときのメモが、「カスタマイズ: 商品情報に項目を追加」の「CSVダウンロードに反映」にある ■受注CSVに送料と手数料を出力しない EC-CUBE 開発コミュニティ - フォーラム https://xoops.ec-cube.net/modules/newbb/viewtopic.php?topic_id=21851&forum=11 src\Eccube\Controller\Admin\Order\OrderController.php の415行目あたり、 この直後に以下を追加して対応できた ロジックとしては「送料と手数料を省く」というより「商品コードがなければ省く」となっている ■購入時に画像を添付 ※未検証 標準機能では対応できないようだが、以下で改造方法が紹介されている 【EC-CUBE4】購入手続き時にファイルをアップロードできる機能を実装する方法 - あずみ.net https://a-zumi.net/eccube4-shopping-file-upload/ ■カートの内容を参照 カートの情報はデータベースの dtb_cart テーブルに記録されている。 カート内商品の情報は dtb_cart_item テーブルに記録されている。 この情報をもとに ・どの会員のカートに何が格納されているか ・商品と合計金額は何か ・最後にカートが操作されたのはいつか などは確認できそう。 上記の内容を管理ページで一覧表示できれば十分、ならプラグインを使うほどでは無いと思われる。 なお、ログインせずにカートに入れると dtb_cart テーブルの customer_id はNULLになっている ■会社名を入力必須項目に変更 ※未検証 FormExtensionを使った拡張により、会社名を入力必須項目に変更できる 後述の「カスタマイズ: バリデーションの調整」も参照 FormTypeのカスタマイズ - < for EC-CUBE 4 Developers /> https://doc4.ec-cube.net/customize_formtype なおこれは、SymfonyのFormExtensionの仕組みによって拡張しているとのこと How to Create a Form Type Extension (Symfony 3.x Docs) https://symfony.com/doc/3.x/form/create_form_type_extension.html ■お問い合わせフォームの電話番号を入力必須項目に変更 ※前述の「会社名を入力必須項目に変更」も参考になる src/Eccube/Form/Type/Front/ContactType.php を以下のように編集することで、一応は入力必須への変更ができる ただしsrc内のプログラムを直接いじるのは可能な限り避けたい この場合、app/Customize/Form/Extension/ContactExtension.php を作成して以下の内容を記述する 以下のようにキャッシュを削除する これで、お問い合わせフォームの電話番号が入力必須項目に変更される ■代理キーでのデータ判定について考察 例えば「クレジットカード決済を選択したら○○を表示する」のような分岐をしたい場合、データの特定には ・代理キー ・名称 のいずれかを使うことになる（code や key のような値を持っていない） 「代理キー」で分岐を作ると「5なら○○を表示する」のような代理キーに依存した作りになってしまうし、「名称」で分岐を作ると名前の変更が難しくなる ECCubeの仕様と妥協するしか無いかもしれないが、以下に管理方法の例を記載する 「代理キー5はクレジットカード決済」のような情報はyamlファイルで設定として持っておく また app/config/eccube/packages/eccube.yaml を参考にして、 「ECCUBE_COOKIE_NAME などは初期値があるが、.env から変更もできる」 という仕組みにしておくと、環境によって代理キーが変わる場合でも柔軟に対応できる eccube.yaml の扱いは、このファイル内にある「運用のためのメモ」の「環境による分岐」も参照 app/config/eccube/packages/eccube.yaml ではなく app/Customize/Resource/config/services.yaml などを作って設定する方がいいかもしれないが、詳細は引き続き要検証 ■マスターデータを作成 ※未検証 ECCube4でマスターテーブル作成 - サニージェム株式会社｜東京豊島区池袋にあるウェブサイト制作システム開発会社 https://www.sunnygem.co.jp/2021/09/15/eccube4%E3%81%A7%E3%83%9E%E3%82%B9%E3%82%BF%E3%83%BC%E3%83%86%... ■その他 このファイル内の「仕事で使う場合の注意」を参考に、必要に応じてカスタマイズを行う