refirio.org

Memo

■メモ
■参考：導入の際に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]
■仮登録と本登録

会員登録をすると、いったん仮登録状態になる
確認の旨のメールが送信され、メール内の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>
■ECCubeカートに追加ボタン（その2）

商品一覧ページに限定すれば、app/template/default/Product/list.twig に以下の内容を記述すれば、
商品IDが「3」の商品をカートに入れるボタンを追加できた

{% set product_id = 3 %}
{% set form = forms[product_id] %}
<form name="form{{ product_id }}" id="productForm{{ product_id }}" action="{{ url('product_add_cart', {id:product_id}) }}" method="post">
    <div class="ec-productRole__actions">
        {% if form.classcategory_id1 is defined %}
            <div class="ec-select">
                {{ form_widget(form.classcategory_id1) }}
                {{ form_errors(form.classcategory_id1) }}
            </div>
            {% if form.classcategory_id2 is defined %}
                <div class="ec-select">
                    {{ form_widget(form.classcategory_id2) }}
                    {{ form_errors(form.classcategory_id2) }}
                </div>
            {% endif %}
        {% endif %}
        <div class="ec-numberInput"><span>{{ 'common.quantity'|trans }}</span>
            {{ form_widget(form.quantity, {'attr': {'class': 'quantity'}}) }}
            {{ form_errors(form.quantity) }}
        </div>
    </div>
    {{ form_rest(form) }}
</form>
<div class="ec-productRole__btn">
    <button type="submit" class="ec-blockBtn--action add-cart" data-cartid="{{ product_id }}" form="productForm{{ product_id }}">
        {{ 'front.product.add_cart'|trans }}
    </button>
</div>


ただし動くのはこのページに追加したときのみで、商品詳細や店舗概要ページに入力してもシステムエラーになった
どうもコントローラ側のプログラムもいじる必要がありそうだが、詳細は不明

セキュリティを気にしないなら、CSRFを無効にする方法はある
ただこの場合でも、商品規格などのオプション項目をシステムと連動させる場合は色々作る必要はある（そもそも、セキュリティ上推奨されない方法だが）

EC-CUBE3, EC-CUBE4カスタマイズ - LPや別サイトから商品をカート追加が可能に。CSRFトークンを解除する
https://umebius.com/eccube/lp_add_cart_csrf_protextion_false/

以下、何かのときに参考にできそうなコードをメモ。

<form name="form3" id="productForm3" action="/products/add_cart/3" method="post">
<input type="number" id="quantity3" name="quantity" required="required" min="1" maxlength="9" class="quantity form-control" value="1" />
<input type="hidden" id="product_id3" name="product_id" value="3" /><input type="hidden" id="ProductClass3" name="ProductClass" value="12" />
<input type="submit" value="ID3の商品をカートに入れる">
</form>

[ {{ form_widget(forms[3]._token) }} ]

[ {{ csrf_token('_token') }} ]

[ {{ csrf_token('authenticate') }} ]

[ {{ csrf_token(constant('Eccube\\Common\\Constant::TOKEN_NAME')) }} ]

[ {{ csrf_token_for_anchor() }} ]
■ECCubeカートに追加ボタン（その3）

以下のようにボタンを設置して、規格なしの商品をカートへ入れることができた（app\template\default\Help\about.twig で確認できた）
product_class の値は、dtb_product_classテーブルに組み合わせがある

{% set product_id = 3 %}
{% set product_class = 12 %}
{% set product_name = 'ブラウニー' %}
<form action="/products/add_cart/{{ product_id }}" method="post">
<input type="number" name="quantity" value="1" />
<input type="hidden" name="product_id" value="{{ product_id }}" />
<input type="hidden" name="ProductClass" value="{{ product_class }}" />
<input type="hidden" name="_token" value="{{ csrf_token('Eccube\\Form\\Type\\AddCartType') }}" />
<input type="submit" value="{{ product_name }}をカートに入れる">
</form>


以下のようにボタンを設置して、規格ありの商品をカートへ入れることができた
product_class の値は、dtb_product_classテーブルに組み合わせがある（カートに入れる規格によって変化する）
以下は特定の規格の組み合わせを決め打ちでカートに入れることになる

{% set product_id = 6 %}
{% set product_class = 21 %}
{% set product_name = 'レモン' %}
<form action="/products/add_cart/{{ product_id }}" method="post">
<input type="number" name="quantity" value="1" />
<input type="hidden" name="product_id" value="{{ product_id }}" />
<input type="hidden" name="ProductClass" value="{{ product_class }}" />
<input type="hidden" name="_token" value="{{ csrf_token('Eccube\\Form\\Type\\AddCartType') }}" />
<input type="submit" value="{{ product_name }}をカートに入れる">
</form>


プルダウンなどで規格を選択できるようにする場合、
「規格1」の選択内容に応じて「規格2」の選択内容を動的に変更したりが必要なので、それなりに手間取りそう
（そもそも、商品に応じた規格の取得自体が未調査）

_token で渡す値は以下が参考になった
（他のトークンとは別に、カートに入れるとき専用のトークンがあるみたい）

(2) Ohtani@web制作さんはTwitterを使っています / Twitter
https://twitter.com/Ohtani_6/status/1351901175952539650

一例だが、以下のようなトークンの取得方法があるみたい（詳細は未調査）

{{ csrf_token(constant('Eccube\\Common\\Constant::TOKEN_NAME')) }}
{{ csrf_token('_token') }}
{{ csrf_token('authenticate') }}
{{ csrf_token_for_anchor() }}
{{ form._token }}
{{ constant('Eccube\\Common\\Constant::TOKEN_NAME') }}
■未検証

・プラグインでのページ作成とプラグインなしのページ作成を試す。データベース連動も含めて
・プラグインの導入を試す
  「おすすめ商品管理プラグイン」は機能的に分かりやすそうだし、公式プラグインなので丁度いいかも
・バリデーションの挙動を確認する
・テンプレート内の 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/
Memo

Advertisement
