ECCUBE3系とWordPressの共存でハマったときの回避策(ディレクター/デザイナー向け)

EC-CUBE-3-Refine

ECCUBEとWORDPRESSを一緒に使うことはよくあります。
一応、よくある構造
httpdocs
└ ECCUBE本体
 └ wordpress
構築したことのある人は、うんうん!という感じかと思います。

eccube2系の頃は、とくに気にすることなくWordpressのインストールができたと思いますが、eccube3系は、少々「くせ」がるのですよね。

あ!映らない。。。。

eccue3_404

そのときのエラーログ

でも実際には、wordpressのファイルはしっかり上がってる!!

ページがみつかりません。

と出ていても焦らず!対応しましょう。

どうやら、ECCUBE3のフロント側を生成する/html/フォルダに問題(問題いっても大したことない。)があるようです。

htaccessがworpressのファイルまで影響してる

eccubeの/html/に入ってる htaccess(えいちーあくせす)の中の記述が今回、インストールしたWordpressにまで影響して映らなくなってるようです。

これね!

先ほどのhtaccessに、Wordpressのディレクトリを除外する記述を書く

ちなみに

だけをコメントアウトすると、今度はECCUBE3系のページが映らなくなります。。。

これで、問題なくwordpressが表示されるようになりました!!

eccube3 htmlの階層のまま、トップドメインでアクセスする方法

EC-CUBE-3-Refine

こんな使い方!

eccube3系をサーバにインストールする際、FTP転送を使うのが一般的。
ただしインストールした後のURLは

http://hogehoge.com/html/

これになってしまいます。
問題ないかもしれませんが、あまり格好がよくないですよね。

http://hogehoge.com/html/index.php

ではじまるものを

http://hogehoge.com/index.php

にする


やり方

変更するファイル
httpdocs/html/


httpdocs/中に

index.php

require __DIR__.’/../autoload.php';

require __DIR__.’/autoload.php';

この時点では、まだエラーがでます。

次に、path.ymlの書き換え
/app/config/eccube/path.yml

変更前

変更後

問題なければ、とりあえず成功!


まとめ

http://hogehoge.com/html だったeccube3が
http://hogehoge.com/ でアクセスが可能になります。

ECCUBEのこのあたりはURLの変更などは、昔から変わらず、インストールする際に自動的に選択できたり
管理画面から変更できるようになると便利なんだけど、今後のバージョンアップに期待しましょう。

完了すれば問題なく表示ができますので、デザインやシステムのカスタマイズをする前に
動作のチェック
1)フロント側がエラーなく表示される
2)管理画面にログインできる/ログアウトもできる
3)会員登録ができる
4)商品登録ができる
5)商品購入ができる

eccube3カスタマイズ方法[事前準備編]

EC-CUBE-3-Refine

こんな使い方!

eccube3系を共有サーバにインストールする際、FTP転送を使うのが一般的。
ただしインストールした後のURLは

http://ドメイン/html/

これになってしまいます。
問題ないかもしれませんが、あまり格好がよくないですよね。

http://ドメイン/ これで動かすようにする手順をメモ。
ちなみに筆者は、ヘテムルの共有サーバで実装してます。


やり方

変更するファイル
/app/config/eccube/path.yml
のhtml/箇所を一括で置き換え

置き換え前 /html/~~~
置き換え後 /~~~~~

*置き換え後のファイル

/index.php

require __DIR__.’/../autoload.php';

require __DIR__.’/autoload.php';

この時点では、まだエラーがでます。

次に、/html/フォルダ内を、ドキュメントルート直下に移動します。

移動前
/html
20150913-1

移動後
20150913-2

*ドキュメント直下にある htaccessは、ひまず_bakに。

完了すれば問題なく表示ができますので、デザインやシステムのカスタマイズをする前に
動作のチェック
1)フロント側がエラーなく表示される
2)管理画面にログインできる/ログアウトもできる
3)会員登録ができる
4)商品登録ができる
5)商品購入ができる

問題なければ、とりあえず成功!


まとめ

http://ドメイン/html だったeccube3が
http://ドメイン/ でアクセスが可能になります。

ECCUBEのこのあたりはURLの変更などは、昔から変わらず、インストールする際に自動的に選択できたり
管理画面から変更できるようになると便利なんだけど、今後のバージョンアップに期待しましょう。

*ドキュメント直下にシステムファイルを置く場合セキュリティ的にちょっと怖いのもあるので
このあたりは、注意してくだいね。

eccube3を共有サーバにFTP転送を使い、インストールしてURLを変える方法

EC-CUBE-3-Refine

こんな使い方!

eccube3系を共有サーバにインストールする際、FTP転送を使うのが一般的。
ただしインストールした後のURLは

http://ドメイン/html/

これになってしまいます。
問題ないかもしれませんが、あまり格好がよくないですよね。

http://ドメイン/ これで動かすようにする手順をメモ。
ちなみに筆者は、ヘテムルの共有サーバで実装してます。


やり方

変更するファイル
/app/config/eccube/path.yml
のhtml/箇所を一括で置き換え

置き換え前 /html/~~~
置き換え後 /~~~~~

*置き換え後のファイル

/index.php

require __DIR__.’/../autoload.php';

require __DIR__.’/autoload.php';

この時点では、まだエラーがでます。

次に、/html/フォルダ内を、ドキュメントルート直下に移動します。

移動前
/html
20150913-1

移動後
20150913-2

*ドキュメント直下にある htaccessは、ひまず_bakに。

完了すれば問題なく表示ができますので、デザインやシステムのカスタマイズをする前に
動作のチェック
1)フロント側がエラーなく表示される
2)管理画面にログインできる/ログアウトもできる
3)会員登録ができる
4)商品登録ができる
5)商品購入ができる

問題なければ、とりあえず成功!


まとめ

http://ドメイン/html だったeccube3が
http://ドメイン/ でアクセスが可能になります。

ECCUBEのこのあたりはURLの変更などは、昔から変わらず、インストールする際に自動的に選択できたり
管理画面から変更できるようになると便利なんだけど、今後のバージョンアップに期待しましょう。

*ドキュメント直下にシステムファイルを置く場合セキュリティ的にちょっと怖いのもあるので
このあたりは、注意してくだいね。

アクセス数が高いサイトは要注意!ECCUBE 2.13系 スマートフォンサイトの注文確認ページのTPLでバグ。。。

ECCUBE専用HELPサイト   ECCUBE HELP ME

概要

弊社では、高トラフィックに対応したECCUBEの構築も対応しております。
*高トラフィック/高アクセス →瞬間的なアクセスの増幅(瞬間的同時接続:4000ユーザー)
例)何時何分より一斉に販売開始 ユーザーはその時間に購入する準備をしている。
サーバも分散し、もちろんデータベースも独立させて、ロードバランサーなるものを入れて対応してます。

今回のこの記事は、ECCUBEの2.13系で起きたバグ?なんですが、スマフォサイトを持ち、かつ、決済モジュールを利用してない支払い方法の際は、要注意な記事になります。

*高トラフィックではない、利用者も一度調査が必要です。

商品をカゴに入れ、決済方法を選び、確認画面から、注文完了ボタンを押す際の、javascriptの記述に、デフォルトのテンプレートで記述ミスがありました。

要は『連続クリック禁止』のためのjavascriptの記述に問題があります。

ここで、制限を入れてあげないと、受注が重複して立ってしまう誰も得しない、何とも面倒なことが起きてしまいます。


調査方法:スマートフォンサイト

(1)商品をカートに入れる
(2)支払い方法を、決済モジュールを利用してないものを選ぶ(よくあるパターンだと、銀行振込、代引きなど)
(3)確認画面に進む
(4)注文完了ボタンを連続クリックする(筆者はサーバが落ちるまでやってみました。)
(5)データベースに受注データを書き込み中
(6)エラー画面が表示される
(7)同じ受注が何件も立ってしまう(筆者は最大で11件)

*ちなみにPCサイトでは、しっかり、「連続クリック防止」のjavascriptが機能してますので、よほどのことがない限り、重複オーダーは立つことはありません。(0とは言えない。)


解決策:スマートフォン

改修するファイルはtemplateファイルで1箇所。
/data/Smarty/templates/sphone/shopping/confirm.tpl
デフォルトの記述は、以下ののようなソースなのですが

よく見受ける、ソースですね。
しかしこれが、注文完了ボタンのソースを見ると

冒頭に記述されてる、fnCheckSubmit() が、ボタン内でセットされてないではありませんか(笑)
*笑いごとではないです。本当に。

これでは、ユーザーさん側は、注文完了ページが表示されない場合は、何度もクリックしてしまいます。


そこで以下のように改修
冒頭のjavascriptは、そのまま生かすことにします。

注文完了ボタンだけ記述方法を変更
*サイトのデザインに合わせて改変してください。

これで2回目以降にボタンをクリックしても、重複オーダーが発生することがほぼ無くなります。(0ではない)
IMG_0211


まとめ

高機能なオープンソースでも、このようなバグなどは、つきものです。
カスタマイズをした部分だけデバックするのではなく、基本機能もしっかりデバックすることが、重要だということですね。

ぜひ、一度この件に関して、ご興味、調査が必要なお客様は、お気軽にお問い合わせください。