■目次
ECCube4ダウンロード導入導入(Vagrant + GitHub版)導入(Vagrant + 公式サイト版)導入(Docker + 公式サイト版)導入(XAMPP + 公式サイト版)導入(EC2 + GitHub版)導入(EC2 + 公式サイト版)インストールカスタマイズマイグレーションでのデータ管理Entityでのテーブル&列追加プラグインの導入プラグインの導入: ECCube VeriTrans4G決済プラグイン(4.0系)プラグインの作成テスト本番環境(AWS想定)での稼働トラブルメモ
■ECCube4
ECサイト構築・リニューアルは「ECオープンプラットフォームEC-CUBE」 https://www.ec-cube.net/ EC-CUBE4 理想のショップは作れる"あなたのための" EC-CUBEできました https://www.ec-cube.net/product/4.0/ EC-CUBE4 管理・運用マニュアル | shiro8 https://www.shiro8.net/manual4/v40x/ EC-CUBE 4.0 開発者向けドキュメント - < for EC-CUBE 4.0 Developers /> https://doc4.ec-cube.net/ EC-CUBE1系・2系・3系・4系の違い - Qiita https://qiita.com/nanasess/items/dc8407c48a3dcf982ea2 ■Symfony EC-CUBE4はSymfony3.4をベースに作られている EC-CUBEはなぜSymfonyを選んだのか - Qiita https://qiita.com/chihiro-adachi/items/d1293ec08a5d004fac32 Symfony Book | SymDoc - PHP フレームワーク Symfony3 日本語ドキュメント Wiki http://symdoc.kwalk.jp/doc/book/start Symfony のインストールと設定 | SymDoc - PHP フレームワーク Symfony3 日本語ドキュメント Wiki http://symdoc.kwalk.jp/doc/book/installation 超入門 Symfony3 | シムノート http://symnote.kwalk.jp/public/learning_symfony ■データベース定義 EC-CUBE4開発リファレンス http://ec4.umebius.com/ ■オーナーズストア プラグインは有料のものが多いので、 ECCubeの導入には結局結構なお金がかかるかもしれない オーナーズストア | ECサイト構築・リニューアルは「ECオープンプラットフォームEC-CUBE」 https://www.ec-cube.net/owners/
■ダウンロード
ECサイト構築・リニューアルは「ECオープンプラットフォームEC-CUBE」 https://www.ec-cube.net/ EC-CUBEダウンロード | ECサイト構築・リニューアルは「ECオープンプラットフォームEC-CUBE」 https://www.ec-cube.net/download/ 公式サイトからダウンロードしたものには、一部開発ツールが含まれていない (gulp、tests、.gitignore などが含まれていない) 以下のGitHubからならすべてのファイルが揃っていると思われる (ただし、逆にComposerによって作成されるvendor内は含まれていない。Composerを使って自分で作成する必要がある) EC-CUBE/ec-cube: EC-CUBE is the most popular e-commerce solution in Japan https://github.com/EC-CUBE/ec-cube 恐らく 公式サイト版 ... 丸ごとダウンロードして一部カスタマイズし、丸ごと本番環境にFTPアップロードして反映する GitHub版 ... Gitなど開発ツールを使って本格的に開発し、本番環境にもGitと連動させて反映する のような想定だと思われる よって開発について初心者なら公式サイト版を、そうでなければGitHub版を使っておくと無難
■導入
・Vagrant ・Docker ・XAMPP ・EC2 への導入について記載する EC2は t2.micro でも、特に遅いとは感じないくらいの速度だった Vagrantは動作が重いが、何とか作業できなくも無いくらいの速度だった Dockerは遅すぎて作業にならないくらいの速度だった VagrantとDockerは、LinuxとWindowsでのファイル同期の速度が問題になっているのかもしれない XAMPPは遅くなかったが、高性能なパソコンでのみ試したので実際のところは不明 なおプログラムは、公式サイトからダウンロードできるものとは別に、開発者向けのGitHub版がある 単純にレンタルサーバにFTPアップロードして設置するなら前者で良さそうだが、 本格的にプログラムをいじるなら後者を使うと良さそう
■導入(Vagrant + GitHub版)
■環境の構築 ※OS起動後、SELinuxを無効化しておく ※apache_php7_mariadb のPlaybookで環境を作成 >vagrant box add centos/7 Vagrantfile
Vagrant.configure(2) do |config| config.vm.box = "centos/7" config.vm.box_check_update = false config.vm.network "forwarded_port", guest: 80, host: 8080 config.vm.network "private_network", ip: "192.168.33.10" # config.vm.network "public_network" # config.vm.network "public_network", ip: "192.168.33.101", bridge: "en0: Wi-Fi (AirPort)" config.vm.synced_folder "C:/Users/refirio/Vagrant/eccube4/code", "/var/www" end
>vagrant up $ sudo su - # python --version Python 2.7.5 # yum -y install epel-release # yum -y install ansible # ansible --version ansible 2.9.7 # vi /etc/ansible/hosts
[localhost] 127.0.0.1
# exit $ cd /var/www/ansible $ ansible localhost -m ping --connection=local $ ansible-playbook site.yml --connection=local http://192.168.33.10/ ■データベースを作成 データベースと接続ユーザを作成 $ mysql -u root -p mysql> GRANT ALL PRIVILEGES ON eccube4.* TO webmaster@localhost IDENTIFIED BY '1234'; mysql> FLUSH PRIVILEGES; mysql> CREATE DATABASE eccube4 DEFAULT CHARACTER SET utf8mb4; mysql> QUIT; ■導入 EC-CUBE/ec-cube: EC-CUBE is the most popular e-commerce solution in Japan https://github.com/EC-CUBE/ec-cube 上記のGitHub版を使う (と言ってもGitHubからダウンロードするわけではなく、create-project で作成する 案件用のリポジトリでは、最低限の差分のみ管理する?要確認) インストール方法 - < for EC-CUBE 4.0 Developers /> https://doc4.ec-cube.net/quickstart_install 「開発者向けインストール方法」の「コマンドラインからインストールする」をもとに作業 $ sudo su -s /bin/bash - apache $ cd /var/www/main Composer https://getcomposer.org/download/ を参考に以下を実行(バージョンアップによってハッシュの値は変更されるので、上記公式サイトで確認する) $ php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');" $ php -r "if (hash_file('sha384', 'composer-setup.php') === 'e0012edf3e80b6978849f5eff0d4b4e4c79ff1609dd1e613307e16318854d24ae64f26d17af3ef0bf7cfb710ca74755a') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;" $ php composer-setup.php $ php -r "unlink('composer-setup.php');" この際、 All settings correct for using Composer Unable to create Composer home directory "/usr/share/httpd/.config/composer": mkdir(): Permission denied と表示されるなら、rootで以下を実行しておく もしくは apache を所有者とするディレクトリを作成するか # cd /usr/share/httpd # mkdir .config # cd .config # mkdir composer # chmod 0777 composer 引き続きECCubeの導入を進める 以下のように create-project を実行すると html 内にプログラムが作成され、ここが公開ディレクトリになる (もとからある /var/www/main/html は、いったん /var/www/main/html_20200630 などと変更しておく) $ php composer.phar create-project --no-scripts ec-cube/ec-cube html "4.0.x-dev" --keep-vcs Cannot create cache directory /usr/share/httpd/.cache/composer/repo/https---repo.packagist.org/, or directory is not writable. Proceeding without cache Creating a "ec-cube/ec-cube" project at "./html" Installing ec-cube/ec-cube (4.0.x-dev 040a47089de8942731d0ba0e7c5328b420c46c6d) Cannot create cache directory /usr/share/httpd/.cache/composer/files/, or directory is not writable. Proceeding without cache - Installing ec-cube/ec-cube (4.0.x-dev 040a470): Cloning 040a47089d Created project in /var/www/main/html Cannot create cache directory /usr/share/httpd/.cache/composer/repo/https---repo.packagist.org/, or directory is not writable. Proceeding without cache Cannot create cache directory /usr/share/httpd/.cache/composer/files/, or directory is not writable. Proceeding without cache Loading composer repositories with package information Installing dependencies (including require-dev) from lock file Package operations: 164 installs, 0 updates, 0 removals - Installing ocramius/package-versions (1.4.2): Downloading (100%) - Installing ec-cube/plugin-installer (0.0.8): Downloading (100%) 〜中略〜 - Installing php-coveralls/php-coveralls (v2.2.0): Downloading (100%) - Installing symfony/phpunit-bridge (v3.4.42): Downloading (100%) Package zendframework/zend-eventmanager is abandoned, you should avoid using it. Use laminas/laminas-eventmanager instead. Package zendframework/zend-code is abandoned, you should avoid using it. Use laminas/laminas-code instead. Package sensio/generator-bundle is abandoned, you should avoid using it. Use symfony/maker-bundle instead. Package setasign/fpdi-tcpdf is abandoned, you should avoid using it. No replacement was suggested. Package facebook/webdriver is abandoned, you should avoid using it. Use php-webdriver/webdriver instead. Package phpunit/phpunit-mock-objects is abandoned, you should avoid using it. No replacement was suggested. Package easycorp/easy-log-handler is abandoned, you should avoid using it. No replacement was suggested. Generating optimized autoload files Deprecation Notice: Class Plugin\EntityExtension\Entity\CustomerSortNoTrait located in ./app/Plugin/EntityExtension/Entity/CustomerRankTrait.php does not comply with psr-4 autoloading standard. It will not autoload anymore in Composer v2.0. in phar:///var/www/main/composer.phar/src/Composer/Autoload/ClassMapGenerator.php:201 55 packages you are using are looking for funding. Use the `composer fund` command to find out more! ■ECCubeの初期設定 以下にアクセス http://eccube4.local/ しばらく待ったあと以下が表示された
Warning: SessionHandler::read(): Session data file is not created by your uid
セッションの保存場所が特殊みたいなので、一般的なものにしてみる C:\Users\refirio\Vagrant\eccube4\code\main\html\app\config\eccube\packages\framework.yaml
12:- save_path: '%kernel.project_dir%/var/sessions/%kernel.environment%' 12:+ save_path: '/tmp/%kernel.environment%'
インストール画面が表示されたが、以下が表示されている
[必須] zip拡張モジュールが有効になっていません。 システム要件をご確認ください [必須] intl拡張モジュールが有効になっていません。 システム要件をご確認ください [推奨] apc拡張モジュールが有効になっていません。
Ansibleで php-intl と php-zip を追加インストール C:\Users\refirio\Vagrant\eccube4\code\ansible\role-web\tasks\main.yml
26: - php-intl 27: - php-zip
これで「必須」が消えた 「推奨」は表示されたままだが、「apc拡張モジュール」はPHP5の機能みたいなので無視して良さそう ■Vagrantfileの調整 環境構築が完了した後は、Vagrantfile 内の最後にある「end」の前の行に、以下を追加しておく これが無いと、Vagrant起動時にApacheが自動で起動されないので注意 参考: Vagrantのup時、httpdが自動起動しないとき - Qiita https://qiita.com/ooba1192/items/96b7ab25d2bda1676aaa
config.vm.provision :shell, run: "always", :inline => <<-EOT sudo service httpd restart EOT
■共有フォルダをNFSにする VagrantでECCubeを使うと非常に重いが、これは共有フォルダの同期に時間がかかっている可能性がある vagrant-winnfsd プラグインを導入して共有フォルダをNFSに指定すると、動作が早くなる可能性がある >vagrant halt … 起動している場合は終了させる >vagrant plugin install vagrant-winnfsd … プラグインをインストール Vagrantfile で以下のように設定する
config.vm.synced_folder "./code", "/var/www" ↓ config.vm.synced_folder "./code", "/var/www", type: "nfs"
>vagrant up 起動時にWindowsのネットワークの警告が表示された 起動自体も早くなった Vagrant(VirtualBox)でディスクアクセスが遅い問題の対処法 https://masshiro.blog/vagrant-laravel-slow/ EC-CUBE 開発コミュニティ - フォーラム https://xoops.ec-cube.net/modules/newbb/viewtopic.php?topic_id=20574&forum=2 ■参考:導入の際にECCubeの初期設定も同時に行う場合 create-project でプロジェクト作成時、「--no-scripts」を省略すると初期設定が自動で行われる この場合、完了後以下にアクセスするとインストール画面ではなく、CCubeのユーザ向け画面が表示される セットアップは終わった状態となる http://eccube4.local/ 以下で管理画面にもログインできる ただしログインすると「管理画面URLは、セキュリティのため推測されにくいものを設定してください。」と警告が表示されている http://eccube4.local/admin/ admin / password また、デフォルトではデータベースはSQLiteとなる 動作もなかなか重い $ php composer.phar create-project ec-cube/ec-cube html "4.0.x-dev" --keep-vcs Cannot create cache directory /usr/share/httpd/.cache/composer/repo/https---repo.packagist.org/, or directory is not writable. Proceeding without cache Creating a "ec-cube/ec-cube" project at "./html" Installing ec-cube/ec-cube (4.0.x-dev 040a47089de8942731d0ba0e7c5328b420c46c6d) Cannot create cache directory /usr/share/httpd/.cache/composer/files/, or directory is not writable. Proceeding without cache - Installing ec-cube/ec-cube (4.0.x-dev 040a470): Cloning 040a47089d Created project in /var/www/main/html Cannot create cache directory /usr/share/httpd/.cache/composer/repo/https---repo.packagist.org/, or directory is not writable. Proceeding without cache Cannot create cache directory /usr/share/httpd/.cache/composer/files/, or directory is not writable. Proceeding without cache Loading composer repositories with package information Installing dependencies (including require-dev) from lock file Package operations: 164 installs, 0 updates, 0 removals - Installing ocramius/package-versions (1.4.2): Downloading (100%) - Installing ec-cube/plugin-installer (0.0.8): Downloading (100%) 〜中略〜 - Installing php-coveralls/php-coveralls (v2.2.0): Downloading (100%) - Installing symfony/phpunit-bridge (v3.4.42): Downloading (100%) Package zendframework/zend-eventmanager is abandoned, you should avoid using it. Use laminas/laminas-eventmanager instead. Package zendframework/zend-code is abandoned, you should avoid using it. Use laminas/laminas-code instead. Package sensio/generator-bundle is abandoned, you should avoid using it. Use symfony/maker-bundle instead. Package setasign/fpdi-tcpdf is abandoned, you should avoid using it. No replacement was suggested. Package facebook/webdriver is abandoned, you should avoid using it. Use php-webdriver/webdriver instead. Package phpunit/phpunit-mock-objects is abandoned, you should avoid using it. No replacement was suggested. Package easycorp/easy-log-handler is abandoned, you should avoid using it. No replacement was suggested. Generating optimized autoload files Deprecation Notice: Class Plugin\EntityExtension\Entity\CustomerSortNoTrait located in ./app/Plugin/EntityExtension/Entity/CustomerRankTrait.php does not comply with psr-4 autoloading standard. It will not autoload anymore in Composer v2.0. in phar:///var/www/main/composer.phar/src/Composer/Autoload/ClassMapGenerator.php:201 Carbon 1 is deprecated, see how to migrate to Carbon 2. https://carbon.nesbot.com/docs/#api-carbon-2 You can run './vendor/bin/upgrade-carbon' to get help in updating carbon and other frameworks and libraries that depend on it. 55 packages you are using are looking for funding. Use the `composer fund` command to find out more! ocramius/package-versions: Generating version class... ocramius/package-versions: ...done generating version class Executing script cache:clear --no-warmup [OK] Executing script cache:warmup --no-optional-warmers [OK] Executing script assets:install --symlink --relative html [OK] > bin/console doctrine:database:create Created database var/eccube.db for connection named default > bin/console doctrine:schema:create ! [CAUTION] This operation should not be executed in a production environment! Creating database schema... [OK] Database schema created successfully! > bin/console eccube:fixtures:load > Finished Successful! Executing script cache:clear --no-warmup [OK] Executing script cache:warmup --no-optional-warmers [OK] Executing script assets:install --symlink --relative html [OK]
■導入(Vagrant + 公式サイト版)
■環境の構築 「導入(Vagrant + GitHub版)」と同じ ■データベースを作成 「導入(Vagrant + GitHub版)」と同じ ■ECCubeの初期設定 起動後、html 内にECCube4のファイルを丸ごと配置した http://192.168.33.10/ にアクセスすると、しばらく待ったあと以下が表示された
Fatal error: Maximum execution time of 30 seconds exceeded
プログラムが重いようなので、PHPの実行時間を伸ばしてみる # vi /etc/php.ini
61: - { regexp: "max_execution_time = 30", replace: "max_execution_time = 600" }
再読み込みすると、しばらく待ったあと以下が表示された
Warning: SessionHandler::read(): Session data file is not created by your uid
セッションの保存場所が特殊みたいなので、一般的なものにしてみる C:\Users\refirio\Vagrant\eccube4\code\main\html\app\config\eccube\packages\framework.yaml
12:- save_path: '%kernel.project_dir%/var/sessions/%kernel.environment%' 12:+ save_path: '/tmp/%kernel.environment%'
インストール画面が表示されたが、以下が表示されている
[必須] zip拡張モジュールが有効になっていません。 システム要件をご確認ください [必須] intl拡張モジュールが有効になっていません。 システム要件をご確認ください [推奨] apc拡張モジュールが有効になっていません。
Ansibleで php-intl と php-zip を追加インストール C:\Users\refirio\Vagrant\eccube4\code\ansible\role-web\tasks\main.yml
26: - php-intl 27: - php-zip
これで「必須」が消えた 「推奨」は表示されたままだが、「apc拡張モジュール」はPHP5の機能みたいなので無視して良さそう ■Vagrantfileの調整 「導入(Vagrant + GitHub版)」と同じ ■共有フォルダをNFSにする 「導入(Vagrant + GitHub版)」と同じ
■導入(Docker + 公式サイト版)
※公式のDockerfileで起動できなかったので、独自に作成した docker-compose で起動 以前に作成したPHP7環境で起動してみる ※動作が非常に重く、何の工夫もなく使うのは現実的ではない Vagrantで起動する方がマシだが、同期対象を絞るなどで改善の余地はあるみたい ■起動 $ cd /c/Users/refirio/docker/eccube4/docker $ docker-compose build $ docker-compose up -d $ docker-compose down http://192.168.99.100/ http://192.168.99.100/system/ admin / abcd1234 システム要件 - < for EC-CUBE 4.0 Developers /> https://doc4.ec-cube.net/quickstart_requirement ■ECCubeの初期設定 起動後、html 内にECCube4のファイルを丸ごと配置した http://192.168.99.100/ にアクセスすると、しばらく待ったあと以下が表示された
Warning: SessionHandler::read(): Session data file is not created by your uid
セッションの保存場所が特殊みたいなので、一般的なものにしてみる C:\Users\refirio\docker\eccube4\html\app\config\eccube\packages\framework.yaml
12:- save_path: '%kernel.project_dir%/var/sessions/%kernel.environment%' 12:+ save_path: '/tmp/%kernel.environment%'
インストール画面が表示されたが、以下が表示されている
[必須] zip拡張モジュールが有効になっていません。 システム要件をご確認ください [必須] intl拡張モジュールが有効になっていません。 システム要件をご確認ください [推奨] apc拡張モジュールが有効になっていません。
C:\Users\refirio\docker\eccube4\docker\php\Dockerfile
3:+ libicu-dev \ 4:+ libzip-dev \ 9:- && docker-php-ext-install gd pdo_mysql mysqli mbstring \ 9:+ && docker-php-ext-install gd pdo_mysql mysqli mbstring intl zip \
これで「必須」が消えた 「推奨」は表示されたままだが、「apc拡張モジュール」はPHP5の機能みたいなので無視して良さそう 【EC-CUBE on Docker】「[必須]intl拡張モジュールが有効になっていません」の原因と解決方法 | まいにち1UP!! https://tetrablog.net/eccube-on-docker-no-intl dockerfileでPHPのzip拡張を導入するメモ - Qiita https://qiita.com/Y-Kanoh/items/9d450a6868183557042f Docker php:7.3-fpm で zip モジュールを使えるようにしようとして発生したエラーと解決方法 - oki2a24 https://oki2a24.com/2019/03/20/solve-build-error-to-use-php-zip-module-in-docker-php-7-3-fpm/ ■公式手順でインストールできなかったメモ インストール方法 - < for EC-CUBE 4.0 Developers /> https://doc4.ec-cube.net/quickstart_install#docker%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%8... 手順通りに実行 $ cd /c/Users/refirio/docker/eccube4 $ docker build -t eccube4-php-apache . The following packages have unmet dependencies: libicu-dev : Depends: libicu57 (= 57.1-6+deb9u3) but 57.1-6+deb9u4 is to be installed E: Unable to correct problems, you have held broken packages. The command '/bin/sh -c apt-get update && apt-get install -y curl apt-utils apt-transport-https debconf-utils gcc build-essential zlib1g-dev git gnupg2 unzip libfreetype6-dev libjpeg62-turbo-dev libpng-dev libzip-dev libicu-dev vim git ssl-cert && docker-php-ext-install -j$(nproc) zip gd mysqli pdo_mysql opcache intl && rm -rf /var/lib/apt/lists/*' returned a non-zero code: 100 libicu57に問題があるらしい C:\Users\refirio\docker\eccube4\Dockerfile
13:- libpng-dev libzip-dev libicu-dev vim git ssl-cert \ 13:+ libpng-dev libzip-dev vim git ssl-cert \
試しに省いてみる configure: error: Unable to detect ICU prefix or no failed. Please verify ICU install prefix and make sure icu-config works. checking for location of ICU headers and libraries... checking for pkg-config... /usr/bin/pkg-config checking for icu-config... no not found The command '/bin/sh -c apt-get update && apt-get install -y curl apt-utils apt-transport-https debconf-utils gcc build-essential zlib1g-dev git gnupg2 unzip libfreetype6-dev libjpeg62-turbo-dev libpng-dev libzip-dev vim git ssl-cert && docker-php-ext-install -j$(nproc) zip gd mysqli pdo_mysql opcache intl && rm -rf /var/lib/apt/lists/*' returned a non-zero code: 1 ICUが無いと言われる $ apt-get install libicu-dev $ sudo yum install libicu-devel これらでインストールできず
■導入(XAMPP + 公式サイト版)
■環境の構築 XAMPPをインストールしてPHP7環境を作っておく 今回は http://localhost/~eccube4/ にインストールするものとする ■データベースを作成 XAMPP付属のphpMyAdminで、eccube4 データベースを作っておく ■ECCubeの初期設定 https://www.ec-cube.net/download/ からダウンロード C:\localhost\home\eccube4\public_html に配置するものとする。配置したら以下にアクセス http://localhost/~eccube4/ インストール画面が表示されたが、以下が表示されている
[必須] intl拡張モジュールが有効になっていません。 システム要件をご確認ください [推奨] wincache拡張モジュールが有効になっていません。
C:\xampp\php\php.ini で以下のコメントアウトを外す
;extension=intl ↓ extension=intl
これで「必須」が消えた 「推奨」は表示されたままだが、「wincache拡張モジュール」はキャッシュ作成の機能みたいなので無視して良さそう ただし速度は落ちるらしい EC-CUBE 開発コミュニティ - フォーラム https://xoops.ec-cube.net/modules/newbb/viewtopic.php?topic_id=21086&forum=2
■導入(EC2 + GitHub版)
■環境の構築 ※apache_php7_mariadb のPlaybookで環境を作成 # amazon-linux-extras install ansible2 -y # amazon-linux-extras install php7.3 -y # ansible --version ansible 2.9.9 # vi /etc/ansible/hosts
[localhost] 127.0.0.1
# exit $ cd /home/ec2-user/ansible $ ansible-playbook site.yml --connection=local http://203.0.113.1/ ■データベースを作成 データベースと接続ユーザを作成 $ mysql -u root -p mysql> GRANT ALL PRIVILEGES ON eccube4.* TO webmaster@localhost IDENTIFIED BY '1234'; mysql> FLUSH PRIVILEGES; mysql> CREATE DATABASE eccube4 DEFAULT CHARACTER SET utf8mb4; mysql> QUIT; ■導入 EC-CUBE/ec-cube: EC-CUBE is the most popular e-commerce solution in Japan https://github.com/EC-CUBE/ec-cube 上記のGitHub版を使う (と言ってもGitHubからダウンロードするわけではなく、create-project で作成する 案件用のリポジトリでは、最低限の差分のみ管理する?要確認) インストール方法 - < for EC-CUBE 4.0 Developers /> https://doc4.ec-cube.net/quickstart_install 「開発者向けインストール方法」の「コマンドラインからインストールする」をもとに作業 $ sudo su -s /bin/bash - apache $ cd /var/www/main Composer https://getcomposer.org/download/ を参考に以下を実行(バージョンアップによってハッシュの値は変更されるので、上記公式サイトで確認する) $ php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');" $ php -r "if (hash_file('sha384', 'composer-setup.php') === 'e5325b19b381bfd88ce90a5ddb7823406b2a38cff6bb704b0acc289a09c8128d4a8ce2bbafcd1fcbdc38666422fe2806') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;" $ php composer-setup.php $ php -r "unlink('composer-setup.php');" この際、 All settings correct for using Composer Unable to create Composer home directory "/usr/share/httpd/.config/composer": mkdir(): Permission denied と表示されるなら、rootで以下を実行しておく もしくは apache を所有者とするディレクトリを作成するか # cd /usr/share/httpd # mkdir .config # cd .config # mkdir composer # chmod 0777 composer 引き続きECCubeの導入を進める 以下のように create-project を実行すると html 内にプログラムが作成され、ここが公開ディレクトリになる (もとからある /var/www/main/html は、いったん /var/www/main/html_20200630 などと変更しておく) $ php composer.phar create-project --no-scripts ec-cube/ec-cube html "4.0.x-dev" --keep-vcs Cannot create cache directory /usr/share/httpd/.cache/composer/repo/https---repo.packagist.org/, or directory is not writable. Proceeding without cache Creating a "ec-cube/ec-cube" project at "./html" Installing ec-cube/ec-cube (4.0.x-dev 4feb7da4ad86251c234ebb6508f42079ff5803f2) Cannot create cache directory /usr/share/httpd/.cache/composer/files/, or directory is not writable. Proceeding without cache - Installing ec-cube/ec-cube (4.0.x-dev 4feb7da): Cloning failed using an ssh key for authentication, enter your GitHub credentials to access private repos Head to https://github.com/settings/tokens/new?scopes=repo&description=Composer+on+ip-10-0-1-231.ap-nort... to retrieve a token. It will be stored in "/usr/share/httpd/.config/composer/auth.json" for future use by Composer. Token (hidden): 上記に表示されているURLにアクセス GitHubのパスワードでログイン 「New personal access token」という画面が表示されるので、そのまま「Generate token」をクリックしてみる 670ecf1b6f020aa4e843b727fccfde9d95451f80 が表示されたので入力してみる インストールが続行された Token stored successfully. Cloning 4feb7da4ad Created project in /var/www/main/html Cannot create cache directory /usr/share/httpd/.cache/composer/repo/https---repo.packagist.org/, or directory is not writable. Proceeding without cache Cannot create cache directory /usr/share/httpd/.cache/composer/files/, or directory is not writable. Proceeding without cache Loading composer repositories with package information Installing dependencies (including require-dev) from lock file Your requirements could not be resolved to an installable set of packages. Problem 1 - The requested PHP extension ext-intl * is missing from your system. Install or enable PHP's intl extension. Ansibleで php-intl と php-zip を追加インストール /home/ec2-user/ansible/role-web/tasks/main.yml
26: - php-intl 27: - php-zip
中途半端に作成されてしまったプロジェクトを削除 $ rm -rf html 再度 create-project を実行 $ php composer.phar create-project --no-scripts ec-cube/ec-cube html "4.0.x-dev" --keep-vcs Cannot create cache directory /usr/share/httpd/.cache/composer/repo/https---repo.packagist.org/, or directory is not writable. Proceeding without cache Creating a "ec-cube/ec-cube" project at "./html" Installing ec-cube/ec-cube (4.0.x-dev 4feb7da4ad86251c234ebb6508f42079ff5803f2) Cannot create cache directory /usr/share/httpd/.cache/composer/files/, or directory is not writable. Proceeding without cache - Installing ec-cube/ec-cube (4.0.x-dev 4feb7da): Cloning 4feb7da4ad Created project in /var/www/main/html Cannot create cache directory /usr/share/httpd/.cache/composer/repo/https---repo.packagist.org/, or directory is not writable. Proceeding without cache Cannot create cache directory /usr/share/httpd/.cache/composer/files/, or directory is not writable. Proceeding without cache Loading composer repositories with package information Installing dependencies (including require-dev) from lock file Package operations: 164 installs, 0 updates, 0 removals - Installing ocramius/package-versions (1.4.2): Downloading (100%) - Installing ec-cube/plugin-installer (0.0.8): Downloading (100%) 〜中略〜 - Installing php-coveralls/php-coveralls (v2.2.0): Downloading (100%) - Installing symfony/phpunit-bridge (v3.4.42): Downloading (100%) Package zendframework/zend-eventmanager is abandoned, you should avoid using it. Use laminas/laminas-eventmanager instead. Package zendframework/zend-code is abandoned, you should avoid using it. Use laminas/laminas-code instead. Package sensio/generator-bundle is abandoned, you should avoid using it. Use symfony/maker-bundle instead. Package setasign/fpdi-tcpdf is abandoned, you should avoid using it. No replacement was suggested. Package facebook/webdriver is abandoned, you should avoid using it. Use php-webdriver/webdriver instead. Package phpunit/phpunit-mock-objects is abandoned, you should avoid using it. No replacement was suggested. Package easycorp/easy-log-handler is abandoned, you should avoid using it. No replacement was suggested. Generating optimized autoload files Deprecation Notice: Class Plugin\EntityExtension\Entity\CustomerSortNoTrait located in ./app/Plugin/EntityExtension/Entity/CustomerRankTrait.php does not comply with psr-4 autoloading standard. It will not autoload anymore in Composer v2.0. in phar:///var/www/main/composer.phar/src/Composer/Autoload/ClassMapGenerator.php:201 55 packages you are using are looking for funding. Use the `composer fund` command to find out more! ■ECCubeの初期設定 以下にアクセス http://203.0.113.1/ インストール画面が表示されたが、以下が表示されている
[推奨] apc拡張モジュールが有効になっていません。
「apc拡張モジュール」はPHP5の機能みたいなので無視して良さそう
■導入(EC2 + 公式サイト版)
■環境の構築 ※apache_php7_mariadb のPlaybookで環境を作成 # amazon-linux-extras install ansible2 -y # amazon-linux-extras install php7.3 -y # ansible --version ansible 2.9.5 # vi /etc/ansible/hosts
[localhost] 127.0.0.1
# exit $ cd /home/ec2-user/ansible $ ansible-playbook site.yml --connection=local http://203.0.113.1/ ■データベースを作成 データベースと接続ユーザを作成 $ mysql -u root -p mysql> GRANT ALL PRIVILEGES ON eccube4.* TO webmaster@localhost IDENTIFIED BY '1234'; mysql> FLUSH PRIVILEGES; mysql> CREATE DATABASE eccube4 DEFAULT CHARACTER SET utf8mb4; mysql> QUIT; ■ECCubeの初期設定 # mkdir /var/www/eccube # cd /var/www/eccube # wget http://downloads.ec-cube.net/src/eccube-4.0.3.zip # unzip eccube-4.0.3.zip # chown -R apache. eccube-4.0.3 # find eccube-4.0.3 -type d -print | xargs chmod 775 # find eccube-4.0.3 -type f -print | xargs chmod 664 パーミッション変更の際に以下の警告が表示されたが、無視して進めて問題無さそう chmod: `eccube-4.0.3/vendor/symfony/finder/Tests/Fixtures/with' にアクセスできません: No such file or directory chmod: `space' にアクセスできません: No such file or directory # cp -rp /var/www/eccube/eccube-4.0.3/. /var/www/main/html … /var/www/main/html/index.php は上書き配置でいい http://203.0.113.1/ にアクセスするとインストール画面が表示されたが、以下が表示されている
[必須] intl拡張モジュールが有効になっていません。 システム要件をご確認ください [推奨] apc拡張モジュールが有効になっていません。
Ansibleで php-intl を追加インストール /home/ec2-user/ansible/role-web/tasks/main.yml
15: - php-intl
これで「必須」が消えた 「推奨」は表示されたままだが、「apc拡張モジュール」はPHP5の機能みたいなので無視して良さそう EC-CUBE4のインストール方法と具体的な手順 - たぶろぐ https://tab-log.com/eccube4-install#apc
■インストール
※URLやデータベースへの接続情報は、環境構築時の内容に依存する 解説中の情報はVagrantで起動したときのもの ※あらかじめ hosts でURLを割り当てておいてもいい インストール手順: http://192.168.33.10/install/step1 「ようこそ」が表示されているので「次へ進む」をクリック 「権限チェック」で「アクセス権限は正常です」と表示されていることを確認して「次へ進む」をクリック 「サイトの設定」で以下を入力して「次へ進む」をクリック あなたの店名: テスト店 メールアドレス: example@gmail.com 管理画面ログインID: admin 管理画面パスワード: abcd1234 管理画面のディレクトリ名: system 「データベースの設定」で以下を入力して「次へ進む」をクリック データベースのホスト名: localhost データベース名: eccube4 ユーザ名: webmaster パスワード: 1234 「データベースの初期化」が表示されるので「次へ進む」をクリック 「インストールが完了しました!」が表示されたら「管理画面を表示」をクリック 上で設定した管理画面情報でログインする http://192.168.33.10/ http://192.168.33.10/system/ ■メール送信 メールを送信する場合は以下を編集する 以下はGmailのSMTPを使う例 C:\Users\refirio\Vagrant\eccube4\code\main\html\.env
25:- MAILER_URL=smtp://localhost:25 25:+ MAILER_URL=smtp://smtp.gmail.com:465?encryption=ssl&auth_mode=login&username=example@gmail.com&password=XXXXXXXXXXXXXXXX
■コマンドラインインターフェイス コマンドラインインターフェイス - < for EC-CUBE 4.0 Developers /> https://doc4.ec-cube.net/quickstart_cli $ sudo su -s /bin/bash - apache $ cd /var/www/main/html $ bin/console list Symfony 3.4.26 (kernel: Eccube, env: prod, debug: false) Usage: command [options] [arguments] 「bin/console list」を実行して「bin/console: Permission denied」のエラーになる場合、 以下のようにすると実行できることがある $ php bin/console list XAMPP環境なら以下のようにする >C:\xampp\php\php.exe bin/console list ■認証キー 管理画面 → オーナーズストア → 認証キー設定 から、認証キーの新規発行と登録ができる 認証キーが共通なら、以前に購入した有料プラグインを再度インストールしたりできるみたい 認証キーを登録しないと、プラグインの一覧など一部機能が使えない
■カスタマイズ
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 ■キャッシュの扱い コントローラやテンプレートは、ECCube設置ディレクトリ内の html\var\cache 内にキャッシュが作成される 具体的には html\var\cache\prod\twig\b3\b3e156cd992b8f915fb07ae6291c4614787a7b3146f1c86e8ffb6aa78ddcd6f9.php のような場所に作成される ファイルを編集しても反映されない場合、以下のコマンドでキャッシュを削除する 次回アクセス時にキャッシュが再生成される $ cd /var/www/main/html $ bin/console cache:clear --no-warmup もしくは管理画面の「コンテンツ管理 → キャッシュ管理」からキャッシュを削除することもできる ただし次回アクセス時に非常に重いため、一部ファイルの編集時は html\var\cache\prod\twig\b3\b3e156cd992b8f915fb07ae6291c4614787a7b3146f1c86e8ffb6aa78ddcd6f9.php などをピンポイントで手動削除する方が現実的か ただし無理矢理感は否めない また、.env で以下のように設定すると、キャッシュが作成されないようになり、デバッグバーが表示される(開発用) ただしキャッシュなしで動作するので、キャッシュ再生成時ほどではないがそれなりに重い
APP_ENV=prod APP_DEBUG=0 ↓ APP_ENV=dev APP_DEBUG=1
なおVagrantを使用している場合、共有フォルダをNFSにすると大幅に改善する可能性がある 詳細は「導入(Vagrant + GitHub版)」の「共有フォルダをNFSにする」を参考に ■テンプレートの編集 以下の場所にテンプレートがある html\src\Eccube\Resource\template 例えば以下のファイルを編集すると、ログイン画面に反映される html\src\Eccube\Resource\template\default\Mypage\login.twig ただし元のファイルは直接編集せずに、以下に複製配置して編集することが推奨される(コントローラなど他ファイルも同様) html\app\template\default\Mypage\login.twig 反映されない場合はキャッシュを削除する テンプレートは管理画面の「オーナーズストア → テンプレート → テンプレート一覧」から確認できる ダウンロードすると、CSSファイルや画像ファイルに加え、上の手順で複製配置した差分ファイルを取得できる デザインテンプレートの基礎 - < for EC-CUBE 4.0 Developers /> https://doc4.ec-cube.net/design_template EC-CUBE4:デザインテンプレートのインストール | ITOBEN STYLE Blog https://itoben.com/blog/3751.html ■CSSファイルの編集 ※GulpでSassをビルドする手順があるが、エラーで進められず 詳細は「メモ」の「CSSファイルの編集」を参照 ■下層ページの作成(管理画面から作成) 管理画面の「コンテンツ管理 → ページ管理 → 新規作成」から作成できる ヘッダなどが表示されたページにしたければ、「レイアウト設定」で「下層ページ用レイアウト」などを選択する EC-CUBE4で新しくページを追加する方法 | ホムペディア https://homupedia.com/eccube4-create-pages.html レイアウトの利用 - < for EC-CUBE 4.0 Developers /> https://doc4.ec-cube.net/design_layout URLには「user_data」という文字が含まれるが、これは設定で他のものに変更できる EC-CUBE4でuser_dataを変更する - Qiita https://qiita.com/chihiro-adachi/items/3218275ea4fc6d485fe5 ■下層ページの作成(コントローラを用意して作成) Controllerのカスタマイズ - < for EC-CUBE 4.0 Developers /> https://doc4.ec-cube.net/customize_controller コントローラを作成 html\app\Customize\Controller\TestPageController.php
<?php namespace Customize\Controller; use Sensio\Bundle\FrameworkExtraBundle\Configuration\Method; use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route; use Symfony\Component\HttpFoundation\Response; class TestPageController { /** * @Method("GET") * @Route("/test") */ public function testMethod() { return new Response('Hello test page !'); } }
以下にアクセスすると「Hello test page !」と表示される 反映されない場合はキャッシュを削除する http://eccube4.local/test ■下層ページの作成(コントローラを用意して作成 / テンプレートに対応) 引き続き、テンプレートファイルに対応させてみる html\app\Customize\Controller\TestPageController.php
<?php namespace Customize\Controller; use Sensio\Bundle\FrameworkExtraBundle\Configuration\Method; use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route; use Sensio\Bundle\FrameworkExtraBundle\Configuration\Template; use Symfony\Component\HttpFoundation\Response; class TestPageController { /** * @Method("GET") * @Route("/test") * @Template("Test/index.twig") */ public function testMethod() { return ['message' => '下層ページの作成']; } }
html\app\template\default\Test\index.twig
<h2>Hello !</h2> <p>message={{ message }}</p>
以下にアクセスすると「Hello ! message=下層ページの作成」と表示される http://eccube4.local/test 以下のようにするとbodyタグなどが反映される ただしこの時点では、共通のヘッダやフッタは表示されない html\app\template\default\Test\index.twig
{% extends 'default_frame.twig' %} {% block main %} <h2>Hello !</h2> <p>message={{ message }}</p> {% endblock %}
Controllerのカスタマイズ - < for EC-CUBE 4.0 Developers /> https://doc4.ec-cube.net/customize_controller ■下層ページの作成(コントローラを用意して作成 / データベースの参照) 引き続き、データベースを参照してみる html\app\Customize\Controller\TestPageController.php
<?php namespace Customize\Controller; use Eccube\Repository\ProductRepository; use Sensio\Bundle\FrameworkExtraBundle\Configuration\Method; use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route; use Sensio\Bundle\FrameworkExtraBundle\Configuration\Template; use Symfony\Component\HttpFoundation\Response; class TestPageController { /** * @var ProductRepository */ protected $productRepository; /** * ProductController constructor. * * @param ProductRepository $productRepository */ public function __construct( ProductRepository $productRepository ) { $this->productRepository = $productRepository; } /** * @Method("GET") * @Route("/test/{id}", requirements={"id" = "\d+"}, name="test") * @Template("Test/index.twig") */ public function testMethod($id) { $Product = $this->productRepository->find($id); if (!$Product) { throw new NotFoundHttpException(); } return [ 'message' => '下層ページの作成', 'Product' => $Product, ]; } }
html\app\template\default\Test\index.twig
{% extends 'default_frame.twig' %} {% block main %} <h2>Hello !</h2> <p>message={{ message }}</p> <p>{{ Product.id }}: {{ Product.name }}</p> {% endblock %}
以下にアクセスすると、URLに応じて「1: 彩のジェラートCUBE」のように商品情報が表示される http://eccube4.local/test/1 http://eccube4.local/test/2 ■下層ページの作成(コントローラを用意して作成 / ヘッダとフッタを表示) 引き続き、ヘッダとフッタを表示してみる レイアウトは管理画面から設定を行うが、何もしなければ管理画面には認識されない まずは以下の情報をデータベースに登録する
INSERT INTO `dtb_page` (`master_page_id`, `page_name`, `url`, `file_name`, `edit_type`, `author`, `description`, `keyword`, `create_date`, `update_date`, `meta_robots`, `meta_tags`, `discriminator_type`) VALUES ( NULL, 'テストページ', /* ページ名 */ 'test', /* url */ 'Test/index', /* テンプレートファイル */ 2, NULL, NULL, NULL, NOW(), NOW(), NULL, NULL, 'page' );
これで管理画面「コンテンツ管理 → ページ管理」に「テストページ」が表示される このページに対して設定を行う 「レイアウト設定」で「PC」を「下層ページ用レイアウト」にして「登録」ボタンを押す この作業により、今回は以下のデータが登録された
INSERT INTO `dtb_page_layout` VALUES (46, 2, 41, 'pagelayout');
これで以下にアクセスすると、ヘッダやフッタ付きでページが表示される http://eccube4.local/test/1 どうしてもデータベースへのデータ追加が発生するようなので、 このデータはマイグレーションで管理しておくべきか [EC-CUBE 4]コントローラを利用するページを追加してみる | creatorlab https://www.creatorlab.jp/2019/07/10/eccube4%E3%82%B3%E3%83%B3%E3%83%88%E3%83%AD%E3%83%BC%E3%83%A9%E... ■管理画面内ページの作成 html\app\Customize\Controller\Admin\Product\TestController.php
<?php /* * This file is part of EC-CUBE * * Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved. * * http://www.ec-cube.co.jp/ * * For the full copyright and license information, please view the LICENSE * file that was distributed with this source code. */ namespace Customize\Controller\Admin\Product; use Eccube\Controller\AbstractController; use Symfony\Component\HttpFoundation\Request; use Symfony\Component\HttpFoundation\Response; use Symfony\Component\Routing\Annotation\Route; use Sensio\Bundle\FrameworkExtraBundle\Configuration\Template; class TestController extends AbstractController { /** * @Route("/%eccube_admin_route%/test", name="admin_test") * @Template("@admin/Product/test.twig") */ public function index(Request $request) { } }
html\app\template\admin\Product\test.twig
{% extends '@admin/default_frame.twig' %} {% set menus = ['product'] %} {% block title %}タイトル{% endblock %} {% block sub_title %}サブタイトル{% endblock %} {% block main %} <p>テストです。</p> {% endblock %}
これでキャッシュを削除してから http://eccube4.local/system/test_menu のように管理画面にアクセスすると、作成したページが表示される ヘッダやサイドバーは自動的に表示された EC-CUBE4カスタマイズ - 4系で管理画面に2ステップで新規ページを作る方法 https://umebius.com/eccube/eccube4_create_new_admin_page/ EC-CUBE4カスタマイズ - 4系で管理画面に新規メニュー項目を追加する方法 https://umebius.com/eccube/ecceube4_insert_new_admin_menu/ ■管理画面内ページの作成(データベースを参照) html\app\Customize\Controller\Admin\Product\TestController.php
<?php /* * This file is part of EC-CUBE * * Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved. * * http://www.ec-cube.co.jp/ * * For the full copyright and license information, please view the LICENSE * file that was distributed with this source code. */ namespace Customize\Controller\Admin\Product; use Eccube\Controller\AbstractController; use Eccube\Repository\ProductRepository; use Symfony\Component\HttpFoundation\Request; use Symfony\Component\HttpFoundation\Response; use Symfony\Component\Routing\Annotation\Route; use Sensio\Bundle\FrameworkExtraBundle\Configuration\Template; class TestController extends AbstractController { /** * @var ProductRepository */ protected $productRepository; /** * ProductController constructor. * * @param ProductRepository $productRepository */ public function __construct( ProductRepository $productRepository ) { $this->productRepository = $productRepository; } /** * @Route("/%eccube_admin_route%/test/{id}", requirements={"id" = "\d+"}, name="admin_test") * @Template("@admin/Product/test.twig") */ public function index(Request $request, $id) { $Product = $this->productRepository->find($id); if (!$Product) { throw new NotFoundHttpException(); } return [ 'Product' => $Product, ]; } }
html\app\template\admin\Product\test.twig
{% extends '@admin/default_frame.twig' %} {% set menus = ['product'] %} {% block title %}タイトル{% endblock %} {% block sub_title %}サブタイトル{% endblock %} {% block main %} <p>テストです。</p> <p>{{ Product.id }}: {{ Product.name }}</p> {% endblock %}
■会員情報に項目を追加 EC-CUBE4カスタマイズ - [4系] 新規会員登録画面に項目を追加する方法 https://umebius.com/eccube/eccube4-add-new-form-item-customer/ html\app\Customize\Entity\CustomerTrait.php を作成
<?php namespace Customize\Entity; use Doctrine\ORM\Mapping as ORM; use Eccube\Annotation\EntityExtension; /** * @EntityExtension("Eccube\Entity\Customer") */ trait CustomerTrait { /** * @var string|null * @ORM\Column(type="string", length=14, nullable=true) * @Eccube\Annotation\FormAppend( * auto_render=false, * type="\Symfony\Component\Form\Extension\Core\Type\TextType", * options={ * "required": false, * "label": "携帯電話番号", * "attr": {"placeholder": "例:09000000000"} * }) */ private $mobile_number; /** * @return string|null */ public function getMobileNumber() { return $this->mobile_number; } /** * @param string|null $mobile_number * @return CustomerTrait */ public function setMobileNumber($mobile_number) { $this->mobile_number = $mobile_number; return $this; } }
作業したらキャッシュを削除する 引き続き作業 $ bin/console eccube:generate:proxies 以下に、トレイトを認識させるためのプロキシファイルが作成される ファイル内の「use \Customize\Entity\CustomerTrait;」で、上記ファイルが読み込まれる html\app\proxy\entity\src\Eccube\Entity\Customer.php $ bin/console cache:clear --no-warmup $ bin/console eccube:schema:update --force --dump-sql 「[OK] Database schema updated successfully!」と表示され、 dtb_customerテーブルの最後に「mobile_number」が追加される これは「ALTER TABLE dtb_customer ADD mobile_number VARCHAR(14) DEFAULT NULL;」と同じ効果 なお「[OK] Nothing to update - your database is already in sync with the current entity metadata.」と表示された場合、先にキャッシュの削除を行っておく html\src\Eccube\Resource\template\default\Entry\index.twig を複製して html\app\template\default\Entry\index.twig を作成し、以下を追加する
<dl> <dt> {{ form_label(form.mobile_number, '携帯電話番号', { 'label_attr': { 'class': 'ec-label' }}) }} </dt> <dd> <div class="ec-telInput{{ has_errors(form.mobile_number) ? ' error' }}"> {{ form_widget(form.mobile_number) }} {{ form_errors(form.mobile_number) }} </div> </dd> </dl>
html\src\Eccube\Resource\template\default\Entry\confirm.twig を複製して html\app\template\default\Entry\confirm.twig を作成し、以下を追加する
<dl> <dt> {{ form_label(form.mobile_number, '携帯電話番号', { 'label_attr': { 'class': 'ec-label' }}) }} </dt> <dd>{{ form.mobile_number.vars.data }} {{ form_widget(form.mobile_number, { type : 'hidden' }) }} </dd> </dl>
html\src\Eccube\Resource\template\default\Mypage\change.twig を複製して html\app\template\default\Mypage\change.twig を作成し、以下を追加する
<dl> <dt> {{ form_label(form.mobile_number, '携帯電話番号', { 'label_attr': { 'class': 'ec-label' }}) }} </dt> <dd> <div class="ec-telInput{{ has_errors(form.mobile_number) ? ' error' }}"> {{ form_widget(form.mobile_number) }} {{ form_errors(form.mobile_number) }} </div> </dd> </dl>
これでユーザ側に携帯電話番号欄が追加される 引き続き、管理側も調整を行う html\src\Eccube\Resource\template\admin\Customer\edit.twig を複製して html\app\template\admin\Customer\edit.twig を作成し、以下を追加する
<div class="row mb-2"> <div class="col-3"> <span>{{ 'admin.common.mobile_number'|trans }}</span> <span class="badge badge-primary ml-1">{{ 'admin.common.required'|trans }}</span> </div> <div class="col"> {{ form_widget(form.mobile_number) }} {{ form_errors(form.mobile_number) }} </div> </div>
管理画面のラベルを正しく表示させるには、以下のリソースファイルに文言を追加する (他にも追加が必要かもしれないが要調査) html\src\Eccube\Resource\locale\messages.ja.yaml
admin.common.mobile_number: 携帯電話番号
html\src\Eccube\Resource\locale\messages.en.yaml
admin.common.phone_number: Mobile Phone
これで管理側に携帯電話番号欄が追加される 引き続き、PDFなどの掲載内容も必要に応じて調整が必要かもしれない ■商品規格 商品ごとに「この色でこの大きさなら○円で在庫は○円」を登録できる ただし規格は1商品に対して2つまでしか紐付けられないので注意 以下のプラグインである程度柔軟に対応できるかもしれないが、 注文内容の商品に対するオプション内容を、管理画面から変更できないので注意 (開発元に確認済み。いったん商品を削除しての再追加はできる) 4.0系|商品オプションプラグイン for EC-CUBE4|株式会社ブラテック https://www.ec-cube.net/products/detail.php?product_id=1787 ■商品に項目の追加 ※未検証 【EC-CUBE4】商品規格に項目を追加し、バリデーションを入れる | クマひよ工房 https://kumahiyo.com/add-product-class-validation/ ■対応ステータスの追加 設定 → システム設定 → マスタデータ管理 → mtb_order_status でステータスを管理できる ただしステータス遷移なども定義が必要みたい 未検証だが、以下が参考になりそう EC-CUBE4で受注ステータスを追加する - Qiita https://qiita.com/chihiro-adachi/items/a7c518f49c0182f297fa
■マイグレーションでのデータ管理
EC-CUBE4カスタマイズ - マイグレーションの作成・実行方法 https://umebius.com/eccube/eccube4-howto-migration/ EC-CUBE4でmigrationを使いこなす - Qiita https://qiita.com/yusukeito58/items/a33e2fd6d26c4fc29d9f マイグレーションでデータベースを管理できるが、データの編集に使うのが主な目的らしい ECCube3まではカラムの追加などをマイグレーションで行っていたが、ECCube4では考え方を変えたらしい 以下はマイグレーションを試したときのメモ テーブルの追加を試しているが、上記のようにテーブルの追加はEntityから行うのが正攻法みたい Entityでのテーブル作成&列追加は、このファイル内の「Entityでのテーブル&列追加」を参照 ■個別実行 以下のコマンドでマイグレーションを作成できる バージョン名は、コマンドを実行したときの日時が使われる $ php bin/console doctrine:migrations:generate Generated new migration class to "/var/www/main/html/app/DoctrineMigrations/Version20200728034801.php" 以下のファイルが作成された 作成直後は、マイグレーションの中身はカラ html\app\DoctrineMigrations\Version20200728034801.php
<?php declare(strict_types=1); namespace DoctrineMigrations; use Doctrine\DBAL\Schema\Schema; use Doctrine\Migrations\AbstractMigration; /** * Auto-generated Migration: Please modify to your needs! */ final class Version20200728034801 extends AbstractMigration { public function up(Schema $schema) : void { // this up() migration is auto-generated, please modify it to your needs } public function down(Schema $schema) : void { // this down() migration is auto-generated, please modify it to your needs } }
upとdownの内容を以下のように編集 つまり、table_testテーブルの作成を行う
public function up(Schema $schema) : void { $sql =<<<EOL CREATE TABLE table_test( id INT UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 'ID', text VARCHAR(255) NOT NULL COMMENT 'テキスト', PRIMARY KEY(id) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT 'テーブル操作テスト'; EOL; $this->addSql($sql); } public function down(Schema $schema) : void { $sql =<<<EOL DROP TABLE table_test; EOL; $this->addSql($sql); }
以下のコマンドでマイグレーションを実行できる $ php bin/console doctrine:migrations:execute 20200728034801 --up WARNING! You are about to execute a database migration that could result in schema changes and data lost. Are you sure you wish to continue? (y/n)y ++ migrating 20200728034801 -> CREATE TABLE table_test( id INT UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 'ID', text VARCHAR(255) NOT NULL COMMENT 'テキスト', PRIMARY KEY(id) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT 'テーブル操作テスト'; ++ migrated (0.4s) データベースを確認すると、table_test テーブルが作成されていた また、既存テーブル migration_versions の version 列に「20200728034801」が登録されていた これをもとに、どのマイグレーションが実行済みなのかを管理しているみたい 以下のコマンドでマイグレーションの巻き戻しを実行できる $ php bin/console doctrine:migrations:execute 20200728034801 --down WARNING! You are about to execute a database migration that could result in schema changes and data lost. Are you sure you wish to continue? (y/n)y -- reverting 20200728034801 -> DROP TABLE table_test; -- reverted (0.22s) データベースを確認すると、table_test テーブルが削除されていた また、既存テーブル migration_versions の version 列に登録されていた「20200728034801」が削除されていた ■一括実行 以下のコマンドでマイグレーションを一括実行できる html\app\DoctrineMigrations には元からいくつかマイグレーションが入っているので、それらが実行される $ php bin/console doctrine:migrations:migrate Application Migrations WARNING! You are about to execute a database migration that could result in schema changes and data loss. Are you sure you wish to continue? (y/n)y Migrating up to 20200303053716 from 0 ++ migrating 20181017090225 Migration 20181017090225 was executed but did not result in any SQL statements. ++ migrated (0.27s) ++ migrating 20181109101907 -> UPDATE dtb_page SET page_name = '商品購入/遷移', url = 'shopping_redirect_to' WHERE id = 42 ++ migrated (0.02s) ++ migrating 20190821081036 Migration 20190821081036 was executed but did not result in any SQL statements. ++ migrated (0.21s) ++ migrating 20200303053716 -> UPDATE dtb_delivery_duration SET duration = -1 WHERE id = 9 and duration = 0 ++ migrated (0.02s) ------------------------ ++ finished in 0.52s ++ 4 migrations executed ++ 2 sql queries もう一度実行すると、実行すべきマイグレーションは無い旨が表示される $ php bin/console doctrine:migrations:migrate Application Migrations No migrations to execute. Version20200728034801.php を追加してみる ファイルの内容は何でもいいが、「個別実行」で作成したものを利用してみる 追加したら、マイグレーションを一括実行する $ php bin/console doctrine:migrations:migrate Application Migrations WARNING! You are about to execute a database migration that could result in schema changes and data loss. Are you sure you wish to continue? (y/n)y Migrating up to 20200728034801 from 20200303053716 ++ migrating 20200728034801 -> CREATE TABLE table_test( id INT UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 'ID', text VARCHAR(255) NOT NULL COMMENT 'テキスト', PRIMARY KEY(id) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT 'テーブル操作テスト'; ++ migrated (0.23s) ------------------------ ++ finished in 0.23s ++ 1 migrations executed ++ 1 sql queries 追加したマイグレーションのみが実行された なお「php bin/console doctrine:migrations:execute --down」を実行すると「Not enough arguments (missing: "version").」というエラーになった マイグレーションの巻き戻しは、バージョンの指定が必要みたい
■Entityでのテーブル&列追加
■テーブルの追加 ※未検証 Entityのカスタマイズ - < for EC-CUBE 4.0 Developers /> https://doc4.ec-cube.net/customize_entity 【EC-CUBE4】お問い合わせ内容をデータベースに保存する方法 - あずみ.net https://a-zumi.net/eccube4-save-contact/ ■列の追加 「カスタマイズ」内の「会員情報に項目を追加」を参照
■プラグインの導入
プラグイン → プラグインを探す から「商品レビュー管理プラグイン」をインストール インストール完了のダイアログが表示されたら「完了」ボタンを押す プラグイン一覧画面に遷移するので、プラグインを有効化する ■有用そうなプラグイン 有用そうなプラグインをメモ ただしプラグインは有料のものが多いので、ECCubeの導入には結局結構なお金がかかるかもしれない 4.0系|会員機能無効化|ONE HAND RED https://www.ec-cube.net/products/detail.php?product_id=1734 4.0系|会員項目追加プラグイン for EC-CUBE4|株式会社ブラテック https://www.ec-cube.net/products/detail.php?product_id=1791 4.0系|商品オプションプラグイン for EC-CUBE4|株式会社ブラテック https://www.ec-cube.net/products/detail.php?product_id=1787 4.0系|セット商品販売(在庫管理)プラグイン for EC-CUBE4|あずみ.net https://www.ec-cube.net/products/detail.php?product_id=1833 4.0系|セット商品販売プラグイン(4.0系)|株式会社Diezon https://www.ec-cube.net/products/detail.php?product_id=1910 4.0系|ランディングページ作成プラグイン|ITOBEN STYLE https://www.ec-cube.net/products/detail.php?product_id=1912 4.0系|カテゴリスライドショープラグイン for EC-CUBE4|株式会社アイデア工房 https://www.ec-cube.net/products/detail.php?product_id=1947 4.0系|キービジュアル管理 for EC-CUBE4|株式会社U-Mebius https://www.ec-cube.net/products/detail.php?product_id=2000 4.0系|[Ver.4]価格帯で選ぶブロック追加プラグイン|lecast system https://www.ec-cube.net/products/detail.php?product_id=2049 4.0系|VeriTrans4G決済プラグイン(4.0系)|ベリトランス株式会社 https://www.ec-cube.net/products/detail.php?product_id=1835
■プラグインの導入: ECCube VeriTrans4G決済プラグイン(4.0系)
■概要 4.0系|VeriTrans4G決済プラグイン(4.0系)|ベリトランス株式会社 https://www.ec-cube.net/products/detail.php?product_id=1835 ※「EC-CUBE対応バージョン」は「4.0.0, 4.0.1, 4.0.2, 4.0.3」となっている 現状4.0.4はサポートしていないとのこと このプラグインを使うなら、ECCube本体は4.0.3を使う方が無難か。もしくは実質4.0.4でも問題ないか 以下にマニュアルがあるので、これをもとに進める https://www.ec-cube.net/upload/manual_file/04151400_5e9694fe5c61f.pdf ■API設定情報を確認 ベリトランス管理画面で、あらかじめAPI設定情報を確認しておく ダッシュボード下部で「API設定情報」の「API設定情報はこちら」をクリック 「API設定情報」として表示される内容を控えておく ■インストール(P.11) ECCube管理画面「プラグイン → プラグインを探す」からプラグインを入手 「購入する」をクリックする(無料で購入できる) 公式サイトで購入処理を行うと、「プラグイン → プラグインを探す」に「VeriTrans4G決済プラグイン(4.0系)」が表示される 「インストール」をクリックする インストール確認画面が表示されるので、再度「インストール」をクリックする インストールが完了したら、ダイアログに表示されている「完了」をクリックする プラグイン一覧で、プラグインを有効化する ステータスが「無効」から「有効」になれば成功 プラグインは以下に保存された html\app\Plugin\VeriTrans4G html\html\plugin\vt4g 以下にログファイルが作成された(必要に応じて書き込み権限を与えておく) html\var\log\mdk.log データベースに、以下のテーブルが作成された(説明はマニュアルより) plg_vt4g_order_log ... 決済ログ保持テーブル plg_vt4g_order_payment ... 決済情報保持テーブル plg_vt4g_payment_method ... 各決済方法の設定情報保持テーブル plg_vt4g_plugin ... プラグイン設定情報保持テーブル また、dtb_customerテーブルに以下の列が追加された `vt4g_account_id` varchar(100) DEFAULT NULL ■プラグインの設定(P.20) プラグイン一覧の設定アイコンをクリックする API設定情報でメモした内容をもとに、以下のように設定する マーチャントCCID: A100000000000001234567xx マーチャント認証鍵: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx マーチャントID: (空欄のまま) ハッシュシード: (空欄のまま) トークンAPI キー: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx 取引IDプレフィックス: TEST_ 有効にする支払方法: クレジットカード決済 ダミーモード: ダミーモードで稼働 注文完了メール送信タイミング: 注文完了画面表示時 「登録」ボタンをクリックする ■支払い方法の設定(P.22) ECCube管理画面「設定 → 店舗設定 → 支払い方法設定」から設定を行う 今回は一覧から「クレジットカード決済」をクリックする 今回は以下を変更してみる 支払い種別: 「一括払い」のみにチェックを入れる ベリトランス会員IDプレフィックス: TEST_CARD_ 「登録」ボタンをクリックする ■配送方法の設定(P.26) ECCube管理画面「設定 → 店舗設定 → 配送方法設定」から設定を行う 今回は「サンプル業者」の詳細画面で「取り扱う支払方法」から「クレジットカード決済」にチェックを入れる 「登録」ボタンをクリックする ■動作確認(P.28) 通常の手順でカートに商品を入れ、レジに進む 配送方法で、上記で設定した「サンプル業者」を選択すると、お支払い方法で「クレジットカード決済」を選択できる 注文確認画面に進むと、 お支払方法: クレジットカード決済(¥0) と表示されている 「(¥0)」の意味は★要確認 そのまま「注文する」ボタンをクリックする 「クレジットカード決済」という画面が表示される ※この時点でECCube管理画面の「受注管理 → 受注一覧」を確認すると、以下のデータが確認できる 対応状況: 新規受付 支払方法: クレジットカード決済 決済状況: (空欄) クレジットカード番号: 4111111111111111 カード有効期限: 12/20 カード名義人名: TARO YAMADA セキュリティコード: 123 お支払い方法: 一括払い 「入力したクレジットカード情報でお支払い」ボタンをクリックする ご注文完了画面に遷移する 通常の完了メッセージとご注文番号に加えて、「クレジットカード決済情報」として以下が表示された 決済取引ID: TEST_363534656663653700000000002 ■決済の確認 ベリトランス管理画面の取引検索画面で 決済品目: クレジットカード決済 取引ID: TEST_363534656663653700000000002 テスト取引: 「除外する」チェックを外す として検索 先程テストしたデータが表示されていることを確認する この時点では、「ステータス」は「与信」となっている ECCube管理画面「受注管理 → 受注一覧」から確認すると、以下のデータが確認できる 対応状況: 新規受付 支払方法: クレジットカード決済 決済状況: 与信 また、詳細画面の下部に「ベリトランス4G決済情報」が表示されている 「売上確定(実売上)実行」をクリックすると売上が確定されるみたい 対応状況: 新規受付 支払方法: クレジットカード決済 決済状況: 売上 なお「対応状況」は自動で変わらなかった(「新規受付」のまま) 手動で「入金済み」に変更することはできた ベリトランス管理画面の取引検索画面で再度確認すると、 「ステータス」が「売上」となっているデータが追加されていた ■決済のキャンセル ・ECCubeの注文詳細画面で「[売上済]再売上(実売上)実行」をクリックすると、ベリトランス管理画面で「ステータス」が「キャンセル(売上)」が追加された 前回の売上をキャンセルして、再度売上にしたということ? ★要確認 ・同画面で「取消(返品)実行」をクリックすると、決済が取り消された 決済後にキャンセルしたことで、データとしてはおかしな状態になった?詳細画面に「お支払い合計と決済の金額が異なります。」と表示されている また、「対応状況」は「新規受付」になっている ★要確認 ■「与信」を「与信+売上」に変更 クレジットカード決済のオーソリとは?安全性をさらに高める対策も紹介|クレジットカード決済代行のベリトランス株式会社 https://www.veritrans.co.jp/tips/column/authorization.html クレジットカード決済では売上確定などの処理は必要ですか? - イプシロンよくある質問 https://www.epsilon.ne.jp/support/faq/ufaqs/credit002/ ECCube管理画面「設定 → 店舗設定 → 支払い方法設定 → クレジットカード決済」から設定を行う 処理区分: 与信 ↓ 処理区分: 与信+売上_ 「登録」ボタンをクリックする この状態でクレジット決済すると、購入完了直後で以下の状態になった 対応状況: 入金済み 支払方法: クレジットカード決済 決済状況: 売上 ■「本人認証(3Dセキュア)」を使用 クレジットカード決済の安全性を高める「3Dセキュア」とは | 企業のお金とテクノロジーをつなぐメディア「Finance&Robotic」 https://www.robotpayment.co.jp/blog/creditcard/4046/ ECCube管理画面「設定 → 店舗設定 → 支払い方法設定 → クレジットカード決済」から設定を行う 本人認証(3Dセキュア): 利用しない ↓ 本人認証(3Dセキュア): 利用する 「登録」ボタンをクリックする この状態でクレジット決済すると、直後に以下の画面が表示された(何のデザインも無い簡素なページだった)
3D-Secure Authentication dummy page 消費者はこのタイミングで本人認証のための情報(パスワード等)を入力します。 これはダミーサイトのため、認証情報の入力は省略します。 ボタンを押して次のページに進んで下さい。 In this sequence, consumers will enter the password for authentication. Please press the button. Password is omitted Because this is a dummy site. [ OK ]
「OK」をクリックすると「決済結果にリダイレクト中です」と表示され、しばらく待つと注文完了画面が表示された 恐らくプラグインの設定で「ダミーモード」を「本番モードで稼働」にすればいいとは思うが、テストサイトで有効にして大丈夫かは要確認★ ■メモ ・「決済状況」の「与信」については詳細な意味を確認しておく 一気に確定させるか与信にするかは先方要確認だろうけど、いったん社内でも認識と一般的な設定を確認する ・3D認証は不要か確認しておく
■プラグインの作成
■プラグインでページを作成 $ bin/console eccube:plugin:generate EC-CUBE Plugin Generator Interactive Wizard =========================================== name [EC-CUBE Sample Plugin]: > サンプルページプラグイン code [Sample]: > SamplePage ver [1.0.0]: > 1.0.0 [OK] Plugin was successfully created: サンプルページプラグイン SamplePage 1.0.0 以下の場所にプラグインの雛形が作成される html\app\Plugin\SamplePage ページ表示用にファイルを作成する html\app\Plugin\SamplePage\Controller\SampleController.php
<?php namespace Plugin\SamplePage\Controller; use Eccube\Controller\AbstractController; use Sensio\Bundle\FrameworkExtraBundle\Configuration\Template; use Symfony\Component\Routing\Annotation\Route; class SampleController extends AbstractController { /** * @Route("sample", name="sample") * @Template("@SamplePage/default/index.twig") */ public function index() { return []; } }
html\app\Plugin\SamplePage\Resource\template\default\index.twig
{% extends 'default_frame.twig' %} {% block main %} <p>サンプルページです</p> {% endblock %}
以下のコマンドでプラグインをインストールできる $ bin/console eccube:plugin:install --code=SamplePage 管理画面の「プラグイン → プラグイン一覧」の「ユーザー独自プラグイン」に、作成したプラグインが表示される 一覧に表示されている三角の「有効化」ボタンで、プラグインを有効化できる もしくは、以下のコマンドでプラグインを有効化することもできる $ bin/console eccube:plugin:enable --code=SamplePage プラグインを有効化すると、以下でプラグインによって作成されたページを表示できる http://eccube4.local/sample 一覧に表示されている四角2つの「無効化」ボタンで、プラグインを有効化できる もしくは、以下のコマンドでプラグインを無効化することができる $ bin/console eccube:plugin:disable --code=SamplePage ■ヘッダとフッタを表示 引き続き、プラグインの有効化時にページとレイアウトに関する情報がデータベースに登録されるようにする 以下のファイルを作成する このファイルはプラグインの有効化・無効化時に実行されるので、ここにページレイアウト登録のためのプログラムを記述する html\app\Plugin\SamplePage\PluginManager.php
<?php namespace Plugin\SamplePage; use Eccube\Entity\PageLayout; use Eccube\Plugin\AbstractPluginManager; use Eccube\Repository\LayoutRepository; use Eccube\Repository\PageLayoutRepository; use Eccube\Repository\PageRepository; use Symfony\Component\DependencyInjection\ContainerInterface; class PluginManager extends AbstractPluginManager { // 1: トップページ用レイアウト, 2:下層ページ用レイアウト const ADD_PAGE_LAYOUT_ID = 2; // ページ設定 const ADD_PAGE_NAME = "サンプルページ"; const ADD_PAGE_URL = "sample"; const ADD_PAGE_FILE_NAME = "SamplePage/Resource/template/default/index"; const ADD_PAGE_META_ROBOTS = "noindex"; // or null // 0: Controller不要, 2: Controller必要 const ADD_PAGE_EDIT_TYPE = 2; /** * プラグイン有効化時に走る * @param array $meta * @param ContainerInterface $container */ public function enable(array $meta, ContainerInterface $container) { $this->createPage($container); } /** * プラグイン無効化時・アンインストール時に走る * @param array $meta * @param ContainerInterface $container */ public function disable(array $meta, ContainerInterface $container) { $this->deletePage($container); } /** * ページ情報を挿入する dtb_page, dtb_page_layout * @param ContainerInterface $container */ private function createPage(ContainerInterface $container) { // dtb_page に存在しないことを確認する $pageRepository = $container->get(PageRepository::class); $pageFindResult = $pageRepository->findOneBy(["url" => $this::ADD_PAGE_URL]); if (is_null($pageFindResult) == false) return; // dtb_layout から下層ページ用レイアウトを取得する $layoutRepository = $container->get(LayoutRepository::class); $underLayout = $layoutRepository->findOneBy(["id" => $this::ADD_PAGE_LAYOUT_ID]); // dtb_page_layout の次のSortNoを取得する $pageLayoutRepository = $container->get(PageLayoutRepository::class); $LastPageLayout = $pageLayoutRepository->findOneBy([], ['sort_no' => 'DESC']); $nextSortNo = $LastPageLayout->getSortNo() + 1; // EntityManager準備 $em = $container->get('doctrine.orm.entity_manager'); $em->beginTransaction(); // INSERT INTO dtb_page $page = $pageRepository->newPage(); $page->setName($this::ADD_PAGE_NAME) ->setUrl($this::ADD_PAGE_URL) ->setFileName($this::ADD_PAGE_FILE_NAME) ->setEditType($this::ADD_PAGE_EDIT_TYPE) ->setMetaRobots($this::ADD_PAGE_META_ROBOTS); $em->persist($page); $em->flush($page); // INSERT INTO dtb_page_layout $pageLayout = new PageLayout(); $pageLayout->setLayout($underLayout) ->setLayoutId($underLayout->getId()) ->setPageId($page->getId()) ->setSortNo($nextSortNo) ->setPage($page); $em->persist($pageLayout); $em->flush($pageLayout); $em->commit(); } /** * ページ情報を削除 dtb_page, dtb_page_layout * @param ContainerInterface $container */ private function deletePage(ContainerInterface $container) { // dtb_page に存在することを確認する $pageRepository = $container->get(PageRepository::class); $page = $pageRepository->findOneBy(["url" => $this::ADD_PAGE_URL]); if (is_null($page)) return; // EntityManager準備 $em = $container->get('doctrine.orm.entity_manager'); $em->beginTransaction(); // DELETE FROM dtb_page WHERE インストール時にINSERTしたページ $em->remove($page); $em->flush($page); // DELETE FROM dtb_page_layout WHERE インストール時にINSERTしたページレイアウト $pageLayoutRepository = $container->get(PageLayoutRepository::class); $pageLayout = $pageLayoutRepository->findOneBy(["page_id" => $page->getId()]); if(is_null($pageLayout) === false){ $em->remove($pageLayout); $em->flush($pageLayout); } $em->commit(); } }
プラグインを無効化し、再度有効化する これによって、上記で作成したファイルの内容が実行される $ bin/console eccube:plugin:disable --code=SamplePage $ bin/console eccube:plugin:enable --code=SamplePage 以下を再読込すると、ヘッダやフッタが表示されている http://eccube4.local/sample [EC-CUBE4] ヘッダー・フッター付きの新規ページを作成する方法→プラグイン化 - Qiita https://qiita.com/seiyaan/items/382e3d2107ca859c38ad ■既存ページに情報を表示 データの表示はEvent経由で行う必要があるみたい 以下が参考になりそう EC-CUBE4系のプラグインを開発してみた - Qiita https://qiita.com/yoshiharu-semachi/items/03817d6dd883b000348f 以下、実際に試したメモ プラグイン一覧 → サンプルページプラグイン → 設定 で「名前」に「テスト」登録しておく 以下にEntityが作成されていることを確認する C:\vagrant\eccube4\code\main\html\app\Plugin\SamplePage\Entity\Config.php 以下にRepositoryが作成されていることを確認する C:\vagrant\eccube4\code\main\html\app\Plugin\SamplePage\Repository\ConfigRepository.php 以下にFormが作成されていることを確認する(管理画面のフォームに項目を追加するためのもの?要確認) C:\vagrant\eccube4\code\main\html\app\Plugin\SamplePage\Form\Type\Admin\ConfigType.php 以下にControllerが作成されていることを確認する C:\vagrant\eccube4\code\main\html\app\Plugin\SamplePage\Controller\Admin\ConfigController.php 以下にEventが作成されていることを確認する C:\vagrant\eccube4\code\main\html\app\Plugin\SamplePage\Event.php Event.php の内容を以下のように編集する
<?php namespace Plugin\SamplePage; use Eccube\Event\TemplateEvent; use Plugin\SamplePage\Repository\ConfigRepository; use Symfony\Component\EventDispatcher\EventSubscriberInterface; class Event implements EventSubscriberInterface { /** * @var ConfigRepository */ protected $ConfigRepository; /** * ProductReview constructor. * * @param ConfigRepository $ConfigRepository */ public function __construct(ConfigRepository $ConfigRepository) { $this->ConfigRepository = $ConfigRepository; } /** * 配列のキーはイベント名、値は呼び出すメソッド名です。 * * @return array */ public static function getSubscribedEvents() { return [ 'Product/detail.twig' => 'StockShowTwig', ]; } /** * @param TemplateEvent $event */ public function StockShowTwig(TemplateEvent $event) { $twig = '@SamplePage/default/Product/stock_show.twig'; // addSnippet()関数で指定したテンプレートを<body>タグの下部に追加できます。 $event->addSnippet($twig); $Config = $this->ConfigRepository->get(); $parameters = $event->getParameters(); $parameters['pluginName'] = $Config->getName(); $event->setParameters($parameters); } }
以下のファイルを作成する C:\vagrant\eccube4\code\main\html\app\Plugin\SamplePage\Resource\template\default\Product\stock_show.twig
{# Style #} <style type="text/css"> #stock_show_area { padding: 0 0 14px 0; border-bottom: 1px dotted #ccc; } #stock_show_area p { font-size: 18px; } </style> <script> {# JQueryのinsertAfterメソッドを使いProduct/detail.twigの<div class="ec-productRole__tags">の直後に挿入 #} $(function() { $('#stock_show_area').insertAfter($('.ec-productRole__tags')); }); </script> {# 規格あり商品の場合 #} {% if Product.hasProductClass %} {# 規格なし商品の場合 #} {% else %} {% if Product.getStockMin > 0 and Product.getStockMin <= 100 %} <div id="stock_show_area"> <p>残り {{ Product.getStockMin }} 点です。ご注文はお早めに! by {{ pluginName }}</p> </div> {% endif %} {% endif %}
これで完成。商品在庫数が100個以下なら、商品詳細ページに「ご注文はお早めに!!」のメッセージが表示される 表示されなければキャッシュを削除する ※引き続き、登録項目の追加を試したい 「残り○点です」の基準値を管理画面から登録できるようにして、それをもとに画面に表示できるようにしたい
■テスト
※未検証 ディレクトリ・ファイル構成 - < for EC-CUBE 4.0 Developers /> https://doc4.ec-cube.net/spec_directory-structure tests にテストを置くようになっているが、それ以上の情報はすぐに見つけられず Symfonyの解説を探すべきか もとからかなりの数のテストが書かれているみたい
■本番環境(AWS想定)での稼働
意外に簡単!?最新EC-CUBEのAWSインストール方法 【ネットショップ構築最前線】 https://regolith.diezon.co.jp/ec11_aws.detail.html EC-CUBE4の立ち上げ〜AWSにデプロイするまで - ひろこま Hack Log https://www.mahirokazuko.com/entry/2020/01/03/235548 ■nginx ※未検証 公式にはApacheしか記載は無いが、動かないわけでは無いみたい [備忘録] EC-CUBE4をnginx上で動かす | planet-green.com https://planet-green.com/eccube4-on-nginx/3235 ■複数台構成 rsyncで双方向同期…なら大丈夫そうだが、 きちんと「画像はS3に置いて」は難しそう EC-CUBEによるECサイトの負荷対策 https://www.slideshare.net/kazunoriinaba/20171010jawsugeccube 「負荷対策(1)」で紹介されているが、S3を使うとしても ・管理用サーバを1台とし、管理画面へはそこへ直接アクセス ・uploadやuser_dataなど、同期が必要なものは管理用サーバからS3に転送。公開用サーバはS3から取得 となる?つまり、S3に対応させる場合でも「ECCubeが直接S3を扱うように」は不可能? 【JAWS-UG関西女子会】#2 ELB+EC2+RDSでECサイトをつくろう 〜EC-CUBEコンテンツ同期編〜 - Qiita https://qiita.com/naotinn74/items/83ccefd08bbea796f359 双方向同期の情報はある EFSは今も激重か?使用実績は無い? 以下は最近の情報みたい Amazon Elastic File System(EFS)を使ううえでの勘所 - Qiita https://qiita.com/taichimachima/items/f7d47b68aac2a11ea7cc 色々と注意があるようなので、いきなりの実戦投入はリスクが高そう EC-CUBE とクラウドは仲良しか? https://www.slideshare.net/nanasess/aw-svs-azure ECCubeをBeanstalkで使う場合について触れられているが、ECCubeがスケーリングには対応してないとある EC-CUBE4のアーキテクチャとこれから https://www.ec-cube.net/user_data/press/R1-3_eccube.pdf いくらか参考になるかもしれない 又聞きだが、ECCube公式に確認して「ECCube自体がスケーリングを想定していないので、正式な対応手順があるわけでは無い」と回答されたとのこと 「不可能ではないが色々と工夫が必要」という感じ 「管理画面用サーバの内容をS3に自動転送して、ユーザ画面用サーバで自動取得する」が一応のベストかもしれない が、プログラム側では複数台構成を意識しなくていい「rsyncで同期方式」が無難か ■設定ファイル インストール方法 - < for EC-CUBE 4.0 Developers /> https://doc4.ec-cube.net/quickstart_install 「インストール完了後、インストールディレクトリにデータベースの接続情報等が設定された .env ファイルが生成されます。 .env ファイルは、開発用途での環境変数を設定するためのものであり、本番環境での使用は推奨されません。 本番環境では、環境変数をサーバ設定ファイルに設定することを推奨します。 サーバ設定ファイルに環境変数を設定することにより、環境変数が外部に暴露される危険性が減り、安全に運用できます。」 自動作成された .env は削除したうえで、httpd.conf や .htaccess で設定することが推奨される 例えばインストール完了後に /var/www/main/html/.env - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - APP_ENV=prod APP_DEBUG=0 DATABASE_URL=mysql://webmaster:1234@localhost/main DATABASE_SERVER_VERSION=5.5.64-MariaDB MAILER_URL=smtp://smtp.gmail.com:465?encryption=ssl&auth_mode=login&username=example@gmail.com&password=xxxxxxxxxxxxxxxx ECCUBE_AUTH_MAGIC=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx ECCUBE_ADMIN_ALLOW_HOSTS=[] ECCUBE_FORCE_SSL=false ECCUBE_ADMIN_ROUTE=system ECCUBE_COOKIE_PATH=/ ECCUBE_TEMPLATE_CODE=default ECCUBE_LOCALE=ja - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - と設定されている場合、以下のようにする /var/www/main/.htaccess - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - SetEnv APP_ENV prod SetEnv APP_DEBUG 0 SetEnv DATABASE_URL mysql://webmaster:1234@localhost/main SetEnv DATABASE_SERVER_VERSION 5.5.64-MariaDB SetEnv MAILER_URL smtp://smtp.gmail.com:465?encryption=ssl&auth_mode=login&username=example@gmail.com&password=xxxxxxxxxxxxxxxx SetEnv ECCUBE_AUTH_MAGIC xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx SetEnv ECCUBE_ADMIN_ALLOW_HOSTS [] SetEnv ECCUBE_FORCE_SSL false SetEnv ECCUBE_ADMIN_ROUTE system SetEnv ECCUBE_COOKIE_PATH / SetEnv ECCUBE_TEMPLATE_CODE default SetEnv ECCUBE_LOCALE ja - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ブラウザでアクセスして、.env があるときと同じように表示されるか確認する インストール画面が表示される場合、設定内容が認識されていないと思われる /var/www/main 内で .htaccess の利用を許可されているかなどを確認する ただしこの設定をした場合、以下の機能を管理画面から設定することができなくなるらしい ・管理画面 → オーナーズストア → テンプレート ・管理画面 → 設定 → システム設定 → セキュリティ管理
■トラブル
■プログラムに異常は見当たらないのにエラーになる 管理画面の「コンテンツ管理 → キャッシュ管理」からキャッシュを削除する コマンドで削除してもいい
■メモ
■仮登録と本登録 会員登録をすると、いったん仮登録状態になる 確認の旨のメールが送信され、メール内のURLをクリックすると本会員登録される 本会員登録されると、完了の旨のメールが送信される 仮登録の状態だと、ログインしようとしても 「ログインできませんでした。入力内容に誤りがないかご確認ください。」 のエラーになる ■CSSファイルの編集 ※エラーで進められず GulpでSassをビルドする必要があるみたい まずは以下のようにNode.jsをインストールする $ curl --silent --location https://rpm.nodesource.com/setup_12.x | sudo bash - $ sudo yum install -y nodejs $ node --version v12.16.3 $ npm --version 6.14.4 npmコマンドでインストール $ cd /var/www/main/html $ npm install npm ERR! code EPROTO npm ERR! syscall symlink npm ERR! path ../acorn/bin/acorn npm ERR! dest /var/www/main/html/node_modules/@gulp-sourcemaps/identity-map/node_modules/.bin/acorn npm ERR! errno -71 npm ERR! EPROTO: protocol error, symlink '../acorn/bin/acorn' -> '/var/www/main/html/node_modules/@gulp-sourcemaps/identity-map/node_modules/.bin/acorn' npm ERR! A complete log of this run can be found in: npm ERR! /home/vagrant/.npm/_logs/2020-05-21T06_27_22_323Z-debug.log エラーになる symlinkが使えない場合、「--no-bin-link」のオプションを付けるといいらしい $ npm install --no-bin-link npm WARN bootstrap@4.1.3 requires a peer of jquery@1.9.1 - 3 but none is installed. You must install peer dependencies yourself. npm WARN bootstrap@4.1.3 requires a peer of popper.js@^1.14.3 but none is installed. You must install peer dependencies yourself. added 7 packages from 115 contributors and audited 735 packages in 7.588s found 131 vulnerabilities (76 low, 8 moderate, 47 high) run `npm audit fix` to fix them, or `npm audit` for details $ npm run build > eccube@4.0.0 build /var/www/main/html > run-s build:moc sh: run-s: コマンドが見つかりません npm ERR! code ELIFECYCLE npm ERR! syscall spawn npm ERR! file sh npm ERR! errno ENOENT npm ERR! eccube@4.0.0 build: `run-s build:moc` npm ERR! spawn ENOENT npm ERR! npm ERR! Failed at the eccube@4.0.0 build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! /home/vagrant/.npm/_logs/2020-05-21T06_30_02_632Z-debug.log エラーになる node_modules を削除して、始めからやりなおすといいらしい Laravel-Mixコンパイル時のcode ELIFECYCLEエラーに対応する - Qiita https://qiita.com/ishizukih/items/9673e709832dacaa5155 $ rm -rf node_modules $ rm package-lock.json $ npm cache clear --force $ npm install --no-bin-link $ npm run build > eccube@4.0.0 build /var/www/main/html > run-s build:moc sh: run-s: コマンドが見つかりません npm ERR! code ELIFECYCLE npm ERR! syscall spawn npm ERR! file sh npm ERR! errno ENOENT npm ERR! eccube@4.0.0 build: `run-s build:moc` npm ERR! spawn ENOENT npm ERR! npm ERR! Failed at the eccube@4.0.0 build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! /home/vagrant/.npm/_logs/2020-05-21T06_37_31_405Z-debug.log 相変わらず同じエラーになる /home/vagrant/.npm/_logs/2020-05-21T06_37_31_405Z-debug.log の内容は以下のとおり
0 info it worked if it ends with ok 1 verbose cli [ '/usr/bin/node', '/usr/bin/npm', 'run', 'build' ] 2 info using npm@6.14.4 3 info using node@v12.16.3 4 verbose run-script [ 'prebuild', 'build', 'postbuild' ] 5 info lifecycle eccube@4.0.0~prebuild: eccube@4.0.0 6 info lifecycle eccube@4.0.0~build: eccube@4.0.0 7 verbose lifecycle eccube@4.0.0~build: unsafe-perm in lifecycle true 8 verbose lifecycle eccube@4.0.0~build: PATH: /usr/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/var/www/main/html/node_modules/.bin:/usr/local/bin:/usr/bin:/usr/local/sbin:/usr/sbin:/opt/puppetlabs/bin:/home/vagrant/.local/bin:/home/vagrant/bin 9 verbose lifecycle eccube@4.0.0~build: CWD: /var/www/main/html 10 silly lifecycle eccube@4.0.0~build: Args: [ '-c', 'run-s build:moc' ] 11 info lifecycle eccube@4.0.0~build: Failed to exec build script 12 verbose stack Error: eccube@4.0.0 build: `run-s build:moc` 12 verbose stack spawn ENOENT 12 verbose stack at ChildProcess.<anonymous> (/usr/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:48:18) 12 verbose stack at ChildProcess.emit (events.js:310:20) 12 verbose stack at maybeClose (internal/child_process.js:1021:16) 12 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5) 13 verbose pkgid eccube@4.0.0 14 verbose cwd /var/www/main/html 15 verbose Linux 3.10.0-1127.el7.x86_64 16 verbose argv "/usr/bin/node" "/usr/bin/npm" "run" "build" 17 verbose node v12.16.3 18 verbose npm v6.14.4 19 error code ELIFECYCLE 20 error syscall spawn 21 error file sh 22 error errno ENOENT 23 error eccube@4.0.0 build: `run-s build:moc` 23 error spawn ENOENT 24 error Failed at the eccube@4.0.0 build script. 24 error This is probably not a problem with npm. There is likely additional logging output above. 25 verbose exit [ 1, true ]
以下はEC2で作業したときのメモだが、やはりエラーで進められず ec2-user で以下を実行 $ curl --silent --location https://rpm.nodesource.com/setup_12.x | sudo bash - $ sudo yum install -y nodejs $ node --version v12.17.0 $ npm --version 6.14.4 apache で以下を実行 $ node --version v12.17.0 $ npm --version 6.14.4 npmコマンドでインストール $ cd /var/www/main/html $ npm install npm ERR! correctMkdir failed to make directory /usr/share/httpd/.npm/_locks npm ERR! code EACCES npm ERR! syscall mkdir npm ERR! path /usr/share/httpd/.npm npm ERR! errno -13 npm ERR! npm ERR! Your cache folder contains root-owned files, due to a bug in npm ERR! previous versions of npm which has since been addressed. npm ERR! npm ERR! To permanently fix this problem, please run: npm ERR! sudo chown -R 48:48 "/usr/share/httpd/.npm" エラーになったので、ディレクトリを作成して所有者を調整 # mkdir /usr/share/httpd/.npm # chown -R apache. /usr/share/httpd/.npm $ npm install gyp ERR! build error gyp ERR! stack Error: `make` failed with exit code: 2 gyp ERR! stack at ChildProcess.onExit (/var/www/main/html/node_modules/node-gyp/lib/build.js:262:23) gyp ERR! stack at ChildProcess.emit (events.js:315:20) gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12) gyp ERR! System Linux 4.14.173-137.229.amzn2.x86_64 gyp ERR! command "/usr/bin/node" "/var/www/main/html/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library=" gyp ERR! cwd /var/www/main/html/node_modules/node-sass gyp ERR! node -v v12.17.0 gyp ERR! node-gyp -v v3.8.0 gyp ERR! not ok Build failed with error code: 1 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! node-sass@4.9.3 postinstall: `node scripts/build.js` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the node-sass@4.9.3 postinstall script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! /usr/share/httpd/.npm/_logs/2020-05-27T06_00_31_503Z-debug.log エラーになったのでやりなおしてみる $ rm -rf node_modules $ rm package-lock.json $ npm cache clear --force $ npm install added 726 packages from 548 contributors and audited 726 packages in 25.499s 18 packages are looking for funding run `npm fund` for details found 14 vulnerabilities (2 low, 4 moderate, 8 high) run `npm audit fix` to fix them, or `npm audit` for details ┌──────────────────────────────────────────────────────────────┐ │ npm update check failed │ │ Try running with sudo or get access │ │ to the local update config store via │ │ sudo chown -R $USER:$(id -gn $USER) /usr/share/httpd/.config │ └──────────────────────────────────────────────────────────────┘ インストールできた $ npm run build npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! eccube@4.0.0 build:moc:sass: `gulp sass` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the eccube@4.0.0 build:moc:sass script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! /usr/share/httpd/.npm/_logs/2020-05-27T06_08_12_615Z-debug.log ERROR: "build:moc:sass" exited with 1. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! eccube@4.0.0 build:moc: `run-s build:moc:*` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the eccube@4.0.0 build:moc script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! /usr/share/httpd/.npm/_logs/2020-05-27T06_08_12_650Z-debug.log ERROR: "build:moc" exited with 1. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! eccube@4.0.0 build: `run-s build:moc` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the eccube@4.0.0 build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! /usr/share/httpd/.npm/_logs/2020-05-27T06_08_12_685Z-debug.log ビルドしようとするとエラーになる EC-CUBE4初心者のためのテンプレートカスタマイズ方法 | ホムペディア https://homupedia.com/eccube4-template-customize.html ■ECCubeカートに追加ボタン 以下に情報はあるが古いみたい EC-CUBE と WordPress を連携させるためのベストプラクティス - Qiita https://qiita.com/nanasess/items/9260f0de30332d65db85 以下のコードで対応できるみたい …と思ったが、CSRFトークン対策が必要 SC_Helper_Session_Ex::getToken() で取れる?昔のバージョンの話? いずれにせよ、無理矢理感は否めない
<script> $(function() { $('.add-cart').on('click', function(event) { // 個数フォームのチェック if ($('#quantity').val() < 1) { $('#quantity')[0].setCustomValidity('1以上で入力してください。'); return true; } else { $('#quantity')[0].setCustomValidity(''); } event.preventDefault(); $form = $('#form1'); $.ajax({ url: $form.attr('action'), type: $form.attr('method'), data: $form.serialize(), dataType: 'json', beforeSend: function(xhr, settings) { // Buttonを無効にする $('.add-cart').prop('disabled', true); } }).done(function(data) { // レスポンス内のメッセージをalertで表示 $.each(data.messages, function() { $('#ec-modal-header').html(this); }); $('#ec-modal-checkbox').prop('checked', true); // カートブロックを更新する $.ajax({ url: "http://13.231.230.5/block/cart", type: 'GET', dataType: 'html' }).done(function(html) { $('.ec-headerRole__cart').html(html); }); }).fail(function(data) { alert('カートへの追加に失敗しました。'); }).always(function(data) { // Buttonを有効にする $('.add-cart').prop('disabled', false); }); }); }); </script> <form action="/products/add_cart/2" method="post" id="form1" name="form1"> <input type="number" id="quantity" name="quantity" required="required" min="1" maxlength="" class="form-control" value="1" /> <button type="submit" class="ec-blockBtn--action add-cart"> カートに入れる </button> <input type="hidden" id="product_id" name="product_id" value="2" /> <input type="hidden" id="ProductClass" name="ProductClass" value="11" /> <input type="hidden" id="_token" name="_token" value="[CsrfToken]" /> ←このコードでは駄目みたい </form> <div class="ec-modal"> <input type="checkbox" id="ec-modal-checkbox" class="checkbox"> <div class="ec-modal-overlay"> <label for="ec-modal-checkbox" class="ec-modal-overlay-close"></label> <div class="ec-modal-wrap"> <label for="ec-modal-checkbox" class="ec-modal-close"><span class="ec-icon"><img src="/html/template/default/assets/icon/cross-dark.svg" alt=""/></span></label> <div id="ec-modal-header" class="text-center">カートに追加しました。</div> <div class="ec-modal-box"> <div class="ec-role"> <label for="ec-modal-checkbox" class="ec-inlineBtn--cancel">お買い物を続ける</label> <a href="http://13.231.230.5/cart" class="ec-inlineBtn--action">カートへ進む</a> </div> </div> </div> </div> </div>
■未検証 ・プラグインでのページ作成とプラグインなしのページ作成を試す。データベース連動も含めて ・プラグインの導入を試す 「おすすめ商品管理プラグイン」は機能的に分かりやすそうだし、公式プラグインなので丁度いいかも ・バリデーションの挙動を確認する ・テンプレート内の form_widget や url は独自に定義されている? ・リポジトリは作らなくてもいい? ・Laravelのように、コンストラクタでサービスを受け取っている? EC-CUBE4 デザインカスタマイズ(あっさり解説) - Qiita https://qiita.com/kakuta_yu/items/d36f2e746b59f5db7557 EC-CUBE4 アーカイブ - U-Mebius https://umebius.com/eccube/category/ec-cube4/ EC-CUBE4カスタマイズ - [4系] 新規会員登録画面に項目を追加する方法 https://umebius.com/eccube/eccube4-add-new-form-item-customer/