2018年3月30日金曜日

EC-CUBE(3.0系)でペイパルのロゴが代替テキストで表示される不具合を修正(備忘録)

EC-CUBEとは

商品販売サイトをリニューアルするにあたり、使っているレンタルサーバーの「簡単インストール」にある「EC-CUBE(イーシーキューブ)」を調べてみました。
サイトの紹介文を見てみると(以下引用です)、 
「EC-CUBE(イーシーキューブ)」は、株式会社ロックオンのEC構築パッケージを誰でも無料で利用・改変できる「オープンソース」として公開したものです。ダウンロードは無料。必要な機能は揃っているので、すぐに開店することができます。改変も自由なので、カスタマイズをすれば、オンライン予約やカスタムオーダーなど、ASPサービスでは実現できない様々な販売形態のサイトを作ることもできます。さらに、物流・決済・広告などネットに留まらないリアル領域の各種EC周辺サービスととの無限の組み合わせによって、独自のショッピングプラットフォームを構築することができます。
 パソコンでデモサイトを見て、スマホでも見たところデザインが気に入り、さらに色々と調べてみたところ、これは良いと思ったので導入を決定しました。
 ライセンスについては(以下引用です)、 
オープンソースであるEC-CUBEの使用には、無償の「GPLライセンス」と、有償の「商用ライセンス」が選択できる「デュアルライセンス方式」を採用しています。詳しくは、EC-CUBEのライセンスについてをご確認ください。
 とありましたので、無償のライセンスを選択しました。






EC-CUBEのインストールと改変
レンタルサーバーでインストール先のフォルダを指定すると、「簡単インストール」で基本的なパッケージがインストールされます。
インストールしたパッケージを管理画面から開いて、デフォルトから少しずつ改変、というより、内容を自分のサイトにしていきます。
そして重要な決済方法ですが、その一つとして過去記事で掲載した「PayPal(ペイパル)」を導入することになったのです。

プラグイン導入

基本のパッケージには決済方法のシステムが入っていないので、別にプラグインを購入してインストールする必要があります。
EC-CUBEのオーナーズ「ストア」サイトで新規メンバー登録をして、「ペイパル エクスプレス チェックアウト 決済プラグイン(3.0系)」の購入をします。※(3.0系)は利用しているパッケージのバージョンです。
購入といってもこのプラグインは無料ですので。

まずは、プラグイン購入時に登録したプラグインを利用するサイトの認証キーをEC-CUBEオーナーズストアで取得して、
管理画面のオーナーズストア>認証キー設定
で認証キーを設定します。
次に、管理画面の
オーナーズストア>プラグイン>プラグイン一覧>「プラグインの新規追加」
から「PayPalExpress」を選択してインストールします。
インストール後に「有効にする」をクリックして有効にしたら、「設定」をクリックします。

設定画面での不具合

設定(○○○/plugin/paypalexpress/config)でペイパルの登録内容を入力していきますが、入力していくと以下の場所で不具合が発生していることに気がつきました。
ペイパルのロゴが代替テキストで表示される不具合
ペイパルのロゴが代替テキストで表示される不具合

「 PayPalロゴ
ECサイトにPayPalロゴを表示します。コンテンツ管理にて表示場所を設定することができます。

  ・その他のオプション
  ・その他のオプション
  ・その他のオプション 」

とエラーイメージとともに「その他のオプション」と代替テキストが表示されていました。本来は「その他オプション」の3か所には3種類選択出来るペイパルのロゴ画像が表示されなくてはなりません。
しかし、ここでは修正出来なさそうなので、そのまま登録を完了させました。

自分のサイトでの不具合

自分のサイトをブラウザで開いて見ると、フッターと商品注文画面で、エラーイメージと「その他のオプション」の代替テキストが表示されていました。
フッターのほうは、管理画面からその表示自体を除く選択をして簡単にクリア。
注文画面のほうはそうはいかないので、これを解決しようと修正する場所を探しにかかりました。

修正する箇所

自分のサイトをブラウザで開き、問題の所をクリックすると、ペイパルのトップページにリンクされていました。
次にブラウザの「ページのソース」で問題の所を見てみます。
「https://www.paypal.jp/uploadedImages/
wwwpaypaljp/Supporting_Content/jp/
contents/popup/logo/AM_190_65.png」
が問題の個所です。
URLの内容からみると、ペイパルのサイトでロゴが置かれているURLにリンクしていたようでしたが、URLの変更に伴ってリンクミスになっていると判断しました。


ペイパルロゴの修正方法(備忘録)

※以下のお話は自分の他のサイトで修正する場合の備忘録ですので、これを参考にする場合は各自の責任でどうぞお願い致します。

FTPサーバーでパッケージをインストールしたフォルダを開く。
修正するファイルにあたりを付けて探す。
上述した設定の時に表れた「○○○/plugin/paypalexpress/config」にヒントあり。
そして以下のようにフォルダを開く。

App / Plugin / PayPalExpress / Resource / config / constant.yml

はい、ありました。constant.yml内にリンクミスしているURLと同じURLが。
3つのURLがあり、自分では最も上のロゴを選択していたので(イメージが壊れているから実際のイメージは不明)、URLが3つあるうちの最初のものだけを修正。
残りの2つは使用する必要がないと思われるのでそのまま。
ペイパルの公式サイトのロゴを提供しているページで、HTMLからURLを参照して正しいものに修正。
ロゴは注文画面のもう一つのペイパルロゴと同じにならないよう、ペイパルのトップページを表すようなロゴを選択。

無事ペイパルロゴが表示されて解決

プラグインのアップデートが出ていないので、これはあくまでも応急的な処置ということを忘れずに。



2018.4.9追記
※4月4日にプラグインのアップデートがあり、ロゴが表示されない問題が解決されています。
管理者 : Masa
このエントリーをはてなブックマークに追加

人気の投稿