EC-CUBE3 フロント機能

ブロック機能

EC-CUBE3もVer.2系同様に機能も持つブロックやデザインしたブロックなどを管理画面で各ページに配置して画面表示が構成されています。

EC-CUBE3ブロック

EC-CUBE3デフォルトではトップページは以下ブロックの配置でデザインが構成されています。

  • 1.ロゴ ブロック
  • 2.カゴの中 ブロック
  • 3.商品検索 ブロック
  • 4.ログイン ブロック
  • 5.カテゴリ ブロック
  • 6.新着商品 ブロック
  • 7.新着情報 ブロック
  • 8.フリーエリア ブロック
  • 9.ギャラリー ブロック
  • 10.フッター ブロック

具体的なブロックの配置方法は「コンテンツ管理>ページ詳細設定」で説明します。

1.ロゴ ブロック

EC-CUBEかごの中ブロック

ページヘッダの左上に表示されるショップ名です。

管理画面>基本情報設定>ショップマスター

の店舗名項目に入力した店舗名が自動的にヘッダーロゴ部分に表示されます。

2.カゴの中ブロック

EC-CUBEかごの中ブロック

ユーザーがカゴに入れた商品数と商品の合計金額がリアルタイムに表示されるブロックです。「カートアイコン」をクリックすると、カゴの中に投入した商品情報がドロップダウンで表示されます。

カゴに何も商品が無い時は「現在カート内に商品は御座いません。」の表示となります。

EC-CUBEかごの中ブロック


EC-CUBEかごの中ブロック

カゴに商品が入っている場合は、カゴの中にある商品数量と合計金額が表示され、「カートアイコン」をクリックすると商品情報がドロップダウン表示されます。


EC-CUBEかごの中ブロック

カゴの中に投入した商品を注文する場合、このカゴの中ブロックのドロップダウン表示にある「カートへ進む」ボタンをクリックすることで、ショッピングカート画面(カゴの中画面)へと移動する事が出来ます。

3.商品検索 ブロック

EC-CUBE3商品検索 ブロック

商品検索ブロックは登録されている全商品の中から、キーワード検索が出来るブロックです。

キーワード検索の条件は「AND検索」です。

4.ログイン ブロック

EC-CUBE3のログインブロックは「新規会員登録/マイページ」「お気に入り」「ログイン/ログアウト」の3つのリンクが並んだブロックとなっています。

会員登録をしているユーザーがマイページを見たり、お買い物をしたりする場合にログインする入り口です。

会員IDは登録したメールアドレス。パスワードは会員登録の際にユーザーが入力したパスワードになります。

非ログイン時

EC-CUBE3ログインブロック

非ログイン時は「新規会員登録・お気に入り・ログイン」の表示となります。


ログイン時

EC-CUBE3ログイン

ログインすると「マイページ・お気に入り・ログアウト」の表示に切り替わります。


ログインページ

EC-CUBE3ログイン

ログインブロックの「ログイン」をクリックして、下記のログインページからログインします。


新規会員登録

EC-CUBE3新規会員登録

会員登録しておくと、買い物のフローでお届け先の住所や氏名、電話番号などが自動的に会員情報から入力された状態になります。

ワンポイント

EC-CUBE3のログイン画面には、もう一つカートの中から、買い物を進もうとした際に、ログインして買い物をするか、ログインせずにゲストのまま購入手続きをするかを分岐するログインページがあります。

お買い物の流れページでのログイン分岐ページは、次項で説明します。

パスワードの再発行

EC-CUBE3パスワードの再発行

ログイン情報を忘れた時は、ログイン画面の「ログイン情報をお忘れですか?」のテキストリンクから、パスワードの再発行手続きが出来ます。ユーザーがパスワードを忘れた場合、このパスワード再発行の手続きをして頂くようにアナウンスするのが良いでしょう。

パスワードの再発行に必要な情報として、登録した際のメールアドレスを入力して「次のページへ」ボタンをクリックすると、


EC-CUBEログインパスワード再発行

登録したメールアドレス宛に「[ショップ名] パスワード変更のご確認」のタイトル名でパスワード再発行手続き用のランダム変数のURLリンクが送信されるので、10分以内にメール内のリンクにアクセスしてパスワードを再発行します。


EC-CUBEパスワード変更(完了ページ)

メールに記載のURLをクリックしてアクセスすると、「パスワード変更(完了ページ)」画面が開きます。

「[ショップ名] パスワード変更のお知らせ」のタイトル名でメールが送信されるので、受信したメールに記載されているパスワードを利用して、ログインします。ユーザーは表示された仮パスワードを利用して、再度ログインすることが出来るようになります。ログインした後はMYページの「会員情報編集」画面でパスワードの変更をします。

ワンポイント

EC-CUBE3でシステムが管理するパスワードは、データベースに登録される時から暗号化されていますので、サイト管理者であってもユーザーが登録したパスワードを知る事はできません。したがって、ユーザーからサイト管理者へ直接パスワードの問い合わせを受けても答える事は出来ません。

データの移転

EC-CUBE2系からEC-CUBE3系、ZenCart、oScommerceやCS-CARTからEC-CUBE3へ乗り換えなど、システムの乗り換えの際、悩み処となるのが既存システムに登録されている会員データの移転です。

商品データや売り上げデータなどは割と簡単に移転できますが、会員データとなると登録されている情報の取り扱いに気をつけなければなりませんし、それぞれのシステムで暗号化されたパスワードをそのまま移転させる事が少し難しくなります。

200~300人程度の会員登録数でしたら、ユーザーの手を煩わせるのは少々バツが悪いですが、登録会員宛てに新システム移行連絡などで再登録やパスワードの再発行手続きをお願い出来ないこともないかもしれませんが・・・

会員数が5000人、10000人・・・ともなると到底個別対応はやってられません。

シロハチでは、LAMP(MySQL)やLAPP(PostgreSQL)の環境で動作しているオープンソースのデータを一括して異なるシステム間で移転させるサービスも承っておりますので、お困りの際はご相談ください。

データベース内データ一括移転概要

EC-CUBE3/ZenCart/osCommerce間でパスワードを含め全データをそのまま引き継いで移転可能です。(事前調査要)

※旧システムで登録していたユーザーはそのままのIDとPASSで新システム側にログイン可能です。新旧システムのパスワードロジックの一部を移植カスタマイズなどでワンタイムパス発行の様にして一回目のログインで旧システムの登録ユーザーであったかどうかを識別させ、既存会員であった場合パスワードのみ再登録画面へ誘導するような方法もあります。

WordPressとEC-CUBE3間など全く異なったシステムからのデータ移行も可能です。

ただし、旧システム側に存在して、新システム側には存在しない登録データ項目については、物理的に移転は不可能です。

旧システムで登録されているデータをどうしても新システムで使いたい場合、新システム側にそのデータを取り扱う為のカスタマイズが必要になります。

尚、EC-CUBE2とEC-CUBE3ではパスワードの桁数も異なります。

5.カテゴリ ブロック

EC-CUBE3カテゴリブロック

カテゴリブロックはサイト管理者が管理画面から登録したカテゴリが自動的に表示されます。カテゴリの登録は、EC-CUBE2系では最大5階層までのカテゴリ登録でしたが、EC-CUBE3では無制限に登録が可能です。

カテゴリ階層は一般的には2階層~3階層程度までの商品グループ分けとなります。

商品ジャンルが多岐に渡る場合などは、多階層のグループ分けが必要ですが、あまり階層を深くし過ぎるとユーザーがその商品にたどり着きにくくなってしまうので、極力階層は深くしない方が良いかもしれません。

EC-CUBE3のデフォルトでは、階層を持たせた運用の場合、第一カテゴリのみの表示となり、第二階層以下はカテゴリをホバーすることで表示されます。

EC-CUBE3カテゴリブロック

ワンポイント

・EC-CUBE3のデフォルトカテゴリブロックはやや操作しにくい感じがするのと、下階層にどのようなカテゴリがあるのかが分かりにくいかもしれません。下階層にあるカテゴリを折りたたまずに、常時全てのカテゴリを展開した状態にするカスタマイズなども良いかもしれません。

・商品登録の際に、複数のカテゴリに重複して登録させることもデフォルトのままで可能です。

・カテゴリブロックはデフォルトでは1つだけです。2つ以上のジャンルから商品へのアプローチが必要な場合はカスタマイズが必要になります。

例)

カテゴリブロック1・・・・・・商品種類でのジャンル分け名称(バッグ、財布、ジャケット、パンツ・・・)など。

カテゴリブロック2・・・・・・ブランド毎のジャンル分け名称(ブランドA、ブランドB、ブランドC、ブランドD・・・)など。

この場合のように、ブランドAをクリックすると、ブランドAの「バッグ、財布、ジャケット、パンツ」を抽出して一覧表示するようにする為にはカスタマイズが必要になります。

デフォルト機能のまま、カテゴリ重複を流用することで、近いようなカテゴリ分けをさせる運用方法もあります。

例)

カテゴリブロック1・・・・・・商品種類、ブランドの両方を1つのカテゴリブロックに並べます(バッグ、財布、ジャケット、パンツ・・・ブランドA、ブランドB、ブランドC、ブランドD・・・)

そして、商品を登録する際に、両方の関連するカテゴリへ重複登録します。商品が「ブランドAのバッグ」の場合、「バッグ」と「ブランドA」の両方に登録することで、どちらのカテゴリ名をクリックした場合でも「ブランドAのバッグ」という商品が表示されるようになります。

また、子階層、孫階層のカテゴリ一覧を表示するブロック追加プラグインもありますので、ご参考ください。

子カテゴリ一覧表示プラグインの詳細はEC-CUBEオーナーズストアから

6.新着商品 ブロック

EC-CUBE3新着商品ブロック

EC-CUBE3デフォルトにあらかじめ用意されているブロックです。

画像のエリア全域が一つのブロック内でレイアウトデザインのコーディングがされていますので、この部分を編集するには、HTMLとCSSの知識が必要になります。

まずは、各画像を全く同じサイスにして画像を差し替え、コメント、価格などを書き直すだけで、とりあえずのトップ画面は飾れると思います。

弊社販売のテンプレートでは、このエリアを3つに分割したブロック構成にしていますので、それだけでもかなりレイアウト変更の敷居は下がるのではないかと思いますので、CSSがあまり分からないけど、このエリア内の構成を変更したいという場合はテンプレートの導入をご検討ください。

7.新着情報 ブロック

EC-CUBE3新着情報ブロック

新着情報ブロックは、管理画面のコンテンツ管理>新着情報管理で登録したタイトル、記事が自動的にフロントのブロック内に表示されます。


EC-CUBE3新着情報ブロック

通常は閉じて、タイトルのみの一覧が表示していますが、タイトル部分をクリックすると、記事本文が展開するようになっています。また、URLを登録していると、「詳しくはこちら」のテキストリンクが自動的に表示されるようになっています。

ワンポイント

新着情報は追加で登録していくようになりますが、デフォルトのままだとタイトルがどんどん増えて行き、新着情報ブロックが縦に長くなりトップページのエリアを変な形で占有して行ってしまいます。

少し難しいですが、ページネーションをさせるカスタマイズを施工したり・・・という方法もありますね。

また、プラグインで置き換える方法でも良いかもしれません。

例えば、

新着カレンダーブラグインだと、登録した新着情報がカレンダーブロックに表示するカレンダーの日付にリンク形式で連動しますので、フロント画面上のエリアを占有していくということは無くなります。

8.フリーエリア ブロック

EC-CUBE3フリーエリアブロック

EC-CUBE3デフォルトに付属しているフリーエリアブロックはサンプル的に同梱されているブロックだと思いますが、デフォルトでは、画像の通り、配送料無料の案内が書かれたブロックになっています。

ブロック編集で記述されている金額部分を変更して登録することで、表示の金額などを変更する事ができます。

ワンポイント

EC-CUBE3には「基本情報設定>ショップマスター」の登録項目で、配送料を無料とする条件を設定できる仕組みがあります。これは実際のお買い物で注文する商品金額、または、注文個数に応じて、ユーザーに送料を課金しないようにする設定なのですが、この設定を自動で読み取り配送無料条件のフロント表示を行えるようにした配送無料表示バナーブロックのプラグインを配布していますので、デフォルトのフリーエリアブロックと差し替えて利用されるととても便利です。

配送料無料バナーブロックプラグインは、EC-CUBE3管理画面で登録した注文金額、注文個数の送料無料設定を自動的に表示できるバナーブロックです。ブロックを配置しておくだけで、送料条件設定の変更などでブロック内の表示文言の変更などを意識する必要が無くなります。

9.ギャラリー ブロック

EC-CUBE3ギャラリーブロック

ギャラリーブロックもEC-CUBE3に付属しているサンプル的なブロックのようですが、サーバー上に画像を準備して画像へのリンクを貼ったうえで、商品詳細ページなどにリンクをしておくと、それっぽいサイトイメージが出来上がってくるのではないかと思いますね。

このブロックも、他のプラグインで、おすすめ商品ブロックのプラグインなどを導入して、ブロック毎置き換えてしまうと、都度ブロック内の編集の手間が省けてサイト運用は楽になりそうです。

そんなに商品ボリュームが無い!という場合は、ブロックを外しておくだけで、ギャラリーブロックアエリアはフロント側に表示しなくなりますので、それでも良いかと思います。何かのキャンペーンの時だけに利用するなども、アリですね。

10.フッター ブロック

EC-CUBE3フッターブロック

各コンテンツページへのテキストリンクが配置されたフッターブロックです。ここもブロック内の編集でリンク先などを書き換えたり、表示文言を増やしたりする事が出来ますが、装飾などは多少のCSSの知識が必要になります。

また、ショップ名やコピーライトの社名などは「基本情報設定>ショップマスター」で登録したショップ名が自動的に参照表示されるようになります。

ワンポイント

よくあるフッターのコピーライト表示について

実はこのコピーライトについては、一応規定された表記ルールがあるのをご存知ですか?

「(C)マーク」「年号」「社名」の3つの記載が必要です。

(C)マークは「Copyright」の事ですので、そのまま文字で書けば、マークでなくても構いません。マークか文字かどちらか一つで良いのですが、よく見かけるのは「Copyright(C)」という書き方ですね。何となく格好が良いというだけで、とりあえず右に倣えしているだけなのでしょうね。

年号については、表記は必須なのですが、ココで良く勘違いするのが、いつの年数を表示させておくか、という点です。

正しくは、その記事、画像、コンテンツを掲載した日付。というのが正解です。

よくあるのは、年が変わるたびに、今現時点の年に書き換えてしまう。という事がありそうですね。特にサーバー時間を取得して自動で書き換わるようにしている場合、そうなりがちですよね。

つまりは、厳密に解釈すると、その記事コンテンツの著作がいつ時点から発生しているのか?という事を謳うのがコピーライトなのでしょう。

従って、2000年にアップした公開記事であれば、そのページはずっと「(C)2000」と記述されているのが正しいのでしょう。

ただ、2000年から放置しているページと勘違いされたくないという心理が働きそうな場合「(C)2000-2017」という風に記述してくのが良いかもしれませんね。

そして、社名ですが、これはそうですね、所謂そのコンテンツの「著作者」という感じのものになりそうです。

ですので「(C)2000-2017 社名屋合名」という感じでしょうか。

ちなみに「All Rights Reserved.」という書き方は本来は不要です。単に見栄え的なバランスが良い、つまり恰好が良いというこれも右に倣えの習慣なのでしょうね。まぁ英語で何か言ってるよっハイカラでしょ?的な(笑)

という事に照らし合わせてEC-CUBE3を見てみると・・・年号が入っていませんね。

こちらもなるべくブロック編集で年号を入れておくようにしましょう。

※EC-CUBEの2系まではデフォルトで年号もきちんと入っていたと思います。

PAGE TOP