EC-CUBE3をやってみた

今回はECサイトでオンラインショップを作成したいと思います。簡単にオンラインショップが出来ると言うことでチャレンジ。

とりあえずやったことを記載していこうと思います。

 

環境

OS/ミドルウェア バージョン
CentOS 7.2.1511
Apache 2.4.6
PHP 7.0.22
MySQL 5.7.17
EC-CUBE 3.0.15

 

ページ内リンク

索引
EC-CUBE用のDB作成
EC-CUBEのインストール
初期設定
ロゴのデフォルト文字変更
ロゴの店名変更
親カテゴリー追加
子カテゴリー追加
子カテゴリー並び順変更
カテゴリの一括登録
商品の一括登録
新着商品部分の作成
新着情報部分の作成
ギャラリー部分の作成
フッター部分の変更
ログイン部分の作成
カゴの中部分の作成
ロゴ部分の作成
商品検索部分の作成

 

EC-CUBE用のDB作成

サーバにEC-CUBE用のデータベースを作成します。サーバによってデータベースの作成方法は異なります。
作成したデータベース名、データベースにアクセスするためのユーザ名とパスワードが後の作業で必要になりますのでメモしておきます。

 

EC-CUBEのインストール

EC-CUBE 開発ドキュメントの手順通りにします。私の場合は、「Webインストーラーを利用したインストール方法」でやりました。

EC-CUBE 開発ドキュメントはコチラ → インストール方法

 

EC-CUBEのインストーラーが実行される

EC-CUBEのインストーラーが実行されたら参考 コチラ → ネットショップ構築システムEC-CUBE Version3をインストールする

※権限チェックが行われたら、NGになります。なので、所有者とグループの変更。

後は手順通りにやればOKです。無事にインストール出来たらログインして管理画面とサイトをみてみましょう。

 

初期設定

サイトを参考 → EC-CUBE3を導入したらやっておきたい初期設定まとめ

 

ショップマスター

 

地図設定

まずは、「緯度」「経度」を調べます。URLにアクセス → Googleマップで緯度・経度を求める

検索フォームに入力し、[検索]をクリック。「緯度」「経度」が表示されます。コピーします。

管理画面に移動し、設定 → 基本情報設定 → ショップマスター

地図設定の「緯度」「経度」にペーストします。

 

Google Maps APIキー取得方法

サイトを参考 → 【2018年度版】Google Maps の APIキー を簡単に取得する

サイトの手順に沿って実行していきます。

 

APIキーの使い方

サイトを参考 → EC-CUBE「当サイトについて」などで、GoogleMapが表示されない。(管理画面では緯度・経度が登録されている)

私の場合は、「2 EC-CUBE3系」の設定です。

 

地図が表示されるか確認

サイトを表示します。フッターにある「当サイトについて」をクリック。

当サイトについての覧に地図が表示されました。

ロゴのデフォルト文字変更

 

ファイルの修正

管理画面 > コンテンツ管理 > ブロック管理 > ロゴ

[編集]をクリック

[変更前]

[変更後]

 

キャッシュのクリア

管理画面 > コンテンツ管理 > キャッシュ管理

[キャッシュ削除]をクリック

 

変更後の確認

「shift」を押しながらリロードして、確認。

[変更前]

[変更後]

 

ロゴの店名変更

 

店名の変更

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

店名に入力し、[登録]をクリック

 

変更後の確認

リロードして、確認。

[変更前]

[変更後]

 

親カテゴリー追加

 

カテゴリの追加

管理画面 > 商品管理 > カテゴリ登録

カテゴリを追加したい物をフォームに入力し、[カテゴリ作成]をクリック

カテゴリが追加されます。

 

変更後の確認

リロードして、確認。

[変更前]

[変更後]

 

子カテゴリー追加

 

カテゴリの追加

管理画面 > 商品管理 > カテゴリ登録

カテゴリをクリック。今回は生キャラメル

カテゴリを追加したい物をフォームに入力し、[カテゴリ作成]をクリック

カテゴリが追加されます。

 

変更後の確認

リロードして、確認。

[変更前]

[変更後]

 

子カテゴリー並び順変更

 

カテゴリの並び順変更

管理画面 > 商品管理 > カテゴリ登録

並び順を変更したいカテゴリにマウスを持っていきます。
カーソルの形が十字架みたいに変更されるので、左クリックしたまま移動したいとこに持っていきます。
そうすると移動が出来ます。

 

変更後の確認

リロードして、確認。

[変更前]

[変更後]

 

カテゴリの一括登録

参考URL → カテゴリCSV登録

 

商品の一括登録

参考URL → 商品CSV登録

 

新着商品部分の作成

 

新規ブロックを追加する

参考URL:ECCUBE3サイドブロックに独自メニューを設置する方法

管理画面 >コンテンツ管理 >ブロック管理

最下部の【新規入力】より新規ブロックを追加します。

[ブロック名]

[ファイル名]

[ブロックデータ]

ブロック名、ファイル名、ブロックデータを入力し[登録ボタン]をクリック。

新着商品(オリジナル)が追加されました。

 

データベースのロジックフラッグを変更する

ブロックを新規追加しただけでは実際にはまだ表示はされません。表示させるためには追加したブロックのロジックフラッグをデータベースで直接編集する必要があります。

テーブル名「dtb_block」「new_product_original」の「deletable_flg」を「1」から「0」へ変更します。

 

スタイルの変更

style.cssのファイルに下記を追記して下さい。

対象ファイル:/html/template/default/css/style.css

[ファイルの中身]

 

レイアウトの編集

管理画面 > コンテンツ管理 > ページ管理

ページ一覧にあるTOPページの「…」をクリック

ページ一覧にあるTOPページの「レイアウト編集」をクリック

新着商品と新着商品(オリジナル)を入れ替えます。

プレビューで確認し、OKならば[登録]をクリック。

 

キャッシュのクリア

管理画面 > コンテンツ管理 > キャッシュ管理

[キャッシュ削除]をクリック

 

変更後の確認

「shift」を押しながらリロードして、確認。

[変更前]

[変更後]

 

新着情報部分の作成

 

新規ブロックを追加する

参考URL:ECCUBE3サイドブロックに独自メニューを設置する方法

管理画面 >コンテンツ管理 >ブロック管理

最下部の【新規入力】より新規ブロックを追加します。

[ブロック名]

[ファイル名]

[ブロックデータ]

ブロック名、ファイル名、ブロックデータを入力し[登録ボタン]をクリック。

後で写真を追加

新着商品(オリジナル)が追加されました。

後で写真を追加

 

データベースのロジックフラッグを変更する

ブロックを新規追加しただけでは実際にはまだ表示はされません。表示させるためには追加したブロックのロジックフラッグをデータベースで直接編集する必要があります。

テーブル名「dtb_block」「news_original」の「logic_flg」を「0」から「1」「deletable_flg」を「1」から「0」へ変更します。

後で写真を追加

 

ECCUBE3構成ファイルよりコントローラーを登録

続いて追加した「メインメニューブロック」のコントローラーを登録します。

対象ファイル:/src/Eccube/ControllerProvider/FrontControllerProvider.php

FrontControllerProvider.phpに「//block」が定義されている箇所があるので以下の一文をブロック定義部の最下部に追加します。

 

ECCUBE3構成ファイルよりコントローラーを作成

コントローラーの登録ができたら続いてコントローラの作成を行います。今回は既存の新着情報メニューをコピーして新しいメニューを作るので以下のファイルをそのままコピーして「NewsOriginalController.php」リネームします。

/src/Eccube/Controller/Block/NewsController.php

リネームしたファイルの内容をリネームしたものに変更。

↓に変更

 

スタイルの変更

style.cssのファイルに下記を追記して下さい。

対象ファイル:/html/template/default/css/style.css

[ファイルの中身]

 

レイアウトの編集

管理画面 > コンテンツ管理 > ページ管理

ページ一覧にあるTOPページの「…」をクリック

ページ一覧にあるTOPページの「レイアウト編集」をクリック

新着情報と新着情報(オリジナル)を入れ替えます。

後で写真を追加

プレビューで確認し、OKならば[登録]をクリック。

後で写真を追加

 

キャッシュのクリア

管理画面 > コンテンツ管理 > キャッシュ管理

[キャッシュ削除]をクリック

 

変更後の確認

「shift」を押しながらリロードして、確認。

[変更前]

[変更後]

後で写真を追加

 

ギャラリー部分の作成

 

新規ブロックを追加する

参考URL:ECCUBE3サイドブロックに独自メニューを設置する方法

管理画面 >コンテンツ管理 >ブロック管理

最下部の【新規入力】より新規ブロックを追加します。

[ブロック名]

[ファイル名]

[ブロックデータ]

ブロック名、ファイル名、ブロックデータを入力し[登録ボタン]をクリック。

後で写真を追加

新着商品(オリジナル)が追加されました。

後で写真を追加

 

データベースのロジックフラッグを変更する

ブロックを新規追加しただけでは実際にはまだ表示はされません。表示させるためには追加したブロックのロジックフラッグをデータベースで直接編集する必要があります。

テーブル名「dtb_block」「new_product_original」の「deletable_flg」を「1」から「0」へ変更します。

後で写真を追加

 

スタイルの変更

style.cssのファイルに下記を追記して下さい。

対象ファイル:/html/template/default/css/style.css

[ファイルの中身]

 

FontAwesomeを導入

対象ファイル:/src/Eccube/Resource/template/default/default_frame.twig

45〜50行目付近

[ファイルの中身]

 

レイアウトの編集

管理画面 > コンテンツ管理 > ページ管理

ページ一覧にあるTOPページの「…」をクリック

ページ一覧にあるTOPページの「レイアウト編集」をクリック

ギャラリーとギャラリー(オリジナル)を入れ替えます。

後で写真を追加

プレビューで確認し、OKならば[登録]をクリック。

後で写真を追加

 

キャッシュのクリア

管理画面 > コンテンツ管理 > キャッシュ管理

[キャッシュ削除]をクリック

 

変更後の確認

「shift」を押しながらリロードして、確認。

[変更前]

後で写真を追加

[変更後]

後で写真を追加

 

 

ロゴの作成

下記URLからオリジナルのロゴを作成。

ロゴ及び画像ジェネレーター

私の場合は作成したロゴを、下記に格納

ディレクトリ:/html/template/default/img/top/

ファイル名:logo.png

 

新規ブロックを追加する

参考URL:ECCUBE3サイドブロックに独自メニューを設置する方法

管理画面 >コンテンツ管理 >ブロック管理

最下部の【新規入力】より新規ブロックを追加します。

[ブロック名]

[ファイル名]

[ブロックデータ]

ブロック名、ファイル名、ブロックデータを入力し[登録ボタン]をクリック。

後で写真を追加

フッター(オリジナル)が追加されました。

後で写真を追加

 

データベースのロジックフラッグを変更する

ブロックを新規追加しただけでは実際にはまだ表示はされません。表示させるためには追加したブロックのロジックフラッグをデータベースで直接編集する必要があります。

テーブル名「dtb_block」「footer_original」の「deletable_flg」を「1」から「0」へ変更します。

後で写真を追加

 

スタイルの変更

style.cssのファイルに下記を追記して下さい。

対象ファイル:/html/template/default/css/style.css

[ファイルの中身]

 

キャッシュのクリア

管理画面 > コンテンツ管理 > キャッシュ管理

[キャッシュ削除]をクリック

変更後の確認

「shift」を押しながらリロードして、確認。

[変更前]

後で写真を追加

[変更後]

後で写真を追加

 

ログイン部分の作成

 

新規ブロックを追加する

参考URL:ECCUBE3サイドブロックに独自メニューを設置する方法

管理画面 >コンテンツ管理 >ブロック管理

最下部の【新規入力】より新規ブロックを追加します。

[ブロック名]

[ファイル名]

[ブロックデータ]

ブロック名、ファイル名、ブロックデータを入力し[登録ボタン]をクリック。

後で写真を追加

ログイン(オリジナル)が追加されました。

後で写真を追加

 

データベースのロジックフラッグを変更する

ブロックを新規追加しただけでは実際にはまだ表示はされません。表示させるためには追加したブロックのロジックフラッグをデータベースで直接編集する必要があります。

テーブル名「dtb_block」「login_original」の「logic_flg」を「0」から「1」「deletable_flg」を「1」から「0」へ変更します。

後で写真を追加

 

ECCUBE3構成ファイルよりコントローラーを登録

続いて追加した「メインメニューブロック」のコントローラーを登録します。

対象ファイル:/src/Eccube/ControllerProvider/FrontControllerProvider.php

FrontControllerProvider.phpに「//block」が定義されている箇所があるので以下の一文をブロック定義部の最下部に追加します。

 

ECCUBE3構成ファイルよりコントローラーを作成

コントローラーの登録ができたら続いてコントローラの作成を行います。今回は既存の新着情報メニューをコピーして新しいメニューを作るので以下のファイルをそのままコピーして「LoginOriginalController.php」リネームします。

/src/Eccube/Controller/Block/LoginController.php

リネームしたファイルの内容をリネームしたものに変更。

↓に変更

 

スタイルの変更

style.cssのファイルに下記を追記して下さい。

対象ファイル:/html/template/default/css/style.css

[ファイルの中身]

 

レイアウトの編集

管理画面 > コンテンツ管理 > ページ管理

ページ一覧にあるTOPページの「…」をクリック

ページ一覧にあるTOPページの「レイアウト編集」をクリック

ログインとログイン(オリジナル)を入れ替えます。

後で写真を追加

プレビューで確認し、OKならば[登録]をクリック。

後で写真を追加

 

キャッシュのクリア

管理画面 > コンテンツ管理 > キャッシュ管理

[キャッシュ削除]をクリック

 

変更後の確認

「shift」を押しながらリロードして、確認。

[変更前]

後で写真を追加

[変更後]

後で写真を追加

 

カゴの中部分の作成

 

新規ブロックを追加する

参考URL:ECCUBE3サイドブロックに独自メニューを設置する方法

管理画面 >コンテンツ管理 >ブロック管理

最下部の【新規入力】より新規ブロックを追加します。

[ブロック名]

[ファイル名]

[ブロックデータ]

ブロック名、ファイル名、ブロックデータを入力し[登録ボタン]をクリック。

後で写真を追加

カゴの中(オリジナル)が追加されました。

後で写真を追加

 

データベースのロジックフラッグを変更する

ブロックを新規追加しただけでは実際にはまだ表示はされません。表示させるためには追加したブロックのロジックフラッグをデータベースで直接編集する必要があります。

テーブル名「dtb_block」「cart_original」の「logic_flg」を「0」から「1」「deletable_flg」を「1」から「0」へ変更します。

後で写真を追加

 

ECCUBE3構成ファイルよりコントローラーを登録

続いて追加した「メインメニューブロック」のコントローラーを登録します。

対象ファイル:/src/Eccube/ControllerProvider/FrontControllerProvider.php

FrontControllerProvider.phpに「//block」が定義されている箇所があるので以下の一文をブロック定義部の最下部に追加します。

ECCUBE3構成ファイルよりコントローラーを作成

コントローラーの登録ができたら続いてコントローラの作成を行います。今回は既存の新着情報メニューをコピーして新しいメニューを作るので以下のファイルをそのままコピーして「CartOriginalController.php」リネームします。

/src/Eccube/Controller/Block/CartController.php

リネームしたファイルの内容をリネームしたものに変更。

↓に変更

 

スタイルの変更

style.cssのファイルに下記を追記して下さい。

対象ファイル:/html/template/default/css/style.css

[ファイルの中身]

 

レイアウトの編集

管理画面 > コンテンツ管理 > ページ管理

ページ一覧にあるTOPページの「…」をクリック

ページ一覧にあるTOPページの「レイアウト編集」をクリック

カゴの中とカゴの中(オリジナル)を入れ替えます。

後で写真を追加

プレビューで確認し、OKならば[登録]をクリック。

後で写真を追加

 

キャッシュのクリア

管理画面 > コンテンツ管理 > キャッシュ管理

[キャッシュ削除]をクリック

 

変更後の確認

「shift」を押しながらリロードして、確認。

[変更前]

後で写真を追加

[変更後]

後で写真を追加

 

 

ロゴの作成

下記URLからオリジナルのロゴを作成。

ロゴ及び画像ジェネレーター

私の場合は作成したロゴを、下記に格納

ディレクトリ:/html/template/default/img/top/

ファイル名:logo.png

 

新規ブロックを追加する

参考URL:ECCUBE3サイドブロックに独自メニューを設置する方法

管理画面 >コンテンツ管理 >ブロック管理

最下部の【新規入力】より新規ブロックを追加します。

[ブロック名]

[ファイル名]

[ブロックデータ]

ブロック名、ファイル名、ブロックデータを入力し[登録ボタン]をクリック。

後で写真を追加

新着商品(オリジナル)が追加されました。

後で写真を追加

 

データベースのロジックフラッグを変更する

ブロックを新規追加しただけでは実際にはまだ表示はされません。表示させるためには追加したブロックのロジックフラッグをデータベースで直接編集する必要があります。

テーブル名「dtb_block」「new_product_original」の「deletable_flg」を「1」から「0」へ変更します。

後で写真を追加

 

スタイルの変更

style.cssのファイルに下記を追記して下さい。

対象ファイル:/html/template/default/css/style.css

[ファイルの中身]

 

レイアウトの編集

管理画面 > コンテンツ管理 > ページ管理

ページ一覧にあるTOPページの「…」をクリック

ページ一覧にあるTOPページの「レイアウト編集」をクリック

カゴの中とカゴの中(オリジナル)を入れ替えます。

後で写真を追加

プレビューで確認し、OKならば[登録]をクリック。

後で写真を追加

 

キャッシュのクリア

管理画面 > コンテンツ管理 > キャッシュ管理

[キャッシュ削除]をクリック

 

変更後の確認

「shift」を押しながらリロードして、確認。

[変更前]

後で写真を追加

[変更後]

後で写真を追加

 

カテゴリ部分の作成

 

新規ブロックを追加する

参考URL:ECCUBE3サイドブロックに独自メニューを設置する方法

管理画面 >コンテンツ管理 >ブロック管理

最下部の【新規入力】より新規ブロックを追加します。

[ブロック名]

[ファイル名]

[ブロックデータ]

ブロック名、ファイル名、ブロックデータを入力し[登録ボタン]をクリック。

後で写真を追加

新着商品(オリジナル)が追加されました。

後で写真を追加

 

データベースのロジックフラッグを変更する

ブロックを新規追加しただけでは実際にはまだ表示はされません。表示させるためには追加したブロックのロジックフラッグをデータベースで直接編集する必要があります。

テーブル名「dtb_block」「news_original」の「logic_flg」を「0」から「1」「deletable_flg」を「1」から「0」へ変更します。

後で写真を追加

 

ECCUBE3構成ファイルよりコントローラーを登録

続いて追加した「メインメニューブロック」のコントローラーを登録します。

対象ファイル:/src/Eccube/ControllerProvider/FrontControllerProvider.php

FrontControllerProvider.phpに「//block」が定義されている箇所があるので以下の一文をブロック定義部の最下部に追加します。

 

ECCUBE3構成ファイルよりコントローラーを作成

コントローラーの登録ができたら続いてコントローラの作成を行います。今回は既存の新着情報メニューをコピーして新しいメニューを作るので以下のファイルをそのままコピーして「CategoryOriginalController.php」リネームします。

/src/Eccube/Controller/Block/CategoryController.php

リネームしたファイルの内容をリネームしたものに変更。

↓に変更

 

スタイルの変更

style.cssのファイルに下記を追記して下さい。

対象ファイル:/html/template/default/css/style.css

[ファイルの中身]

 

レイアウトの編集

管理画面 > コンテンツ管理 > ページ管理

ページ一覧にあるTOPページの「…」をクリック

ページ一覧にあるTOPページの「レイアウト編集」をクリック

カゴの中とカゴの中(オリジナル)を入れ替えます。

後で写真を追加

プレビューで確認し、OKならば[登録]をクリック。

後で写真を追加

 

キャッシュのクリア

管理画面 > コンテンツ管理 > キャッシュ管理

[キャッシュ削除]をクリック

 

変更後の確認

「shift」を押しながらリロードして、確認。

[変更前]

後で写真を追加

[変更後]

後で写真を追加
 

商品検索部分の作成

 

新規ブロックを追加する

参考URL:ECCUBE3サイドブロックに独自メニューを設置する方法

管理画面 >コンテンツ管理 >ブロック管理

最下部の【新規入力】より新規ブロックを追加します。

[ブロック名]

[ファイル名]

[ブロックデータ]

ブロック名、ファイル名、ブロックデータを入力し[登録ボタン]をクリック。

後で写真を追加

新着商品(オリジナル)が追加されました。

後で写真を追加

 

データベースのロジックフラッグを変更する

ブロックを新規追加しただけでは実際にはまだ表示はされません。表示させるためには追加したブロックのロジックフラッグをデータベースで直接編集する必要があります。

テーブル名「dtb_block」「news_original」の「logic_flg」を「0」から「1」「deletable_flg」を「1」から「0」へ変更します。

後で写真を追加

 

ECCUBE3構成ファイルよりコントローラーを登録

続いて追加した「メインメニューブロック」のコントローラーを登録します。

対象ファイル:/src/Eccube/ControllerProvider/FrontControllerProvider.php

FrontControllerProvider.phpに「//block」が定義されている箇所があるので以下の一文をブロック定義部の最下部に追加します。

 

ECCUBE3構成ファイルよりコントローラーを作成

コントローラーの登録ができたら続いてコントローラの作成を行います。今回は既存の新着情報メニューをコピーして新しいメニューを作るので以下のファイルをそのままコピーして「search_productOriginalController.php」リネームします。

/src/Eccube/Controller/Block/search_productController.php

リネームしたファイルの内容をリネームしたものに変更。

↓に変更

 

スタイルの変更

style.cssのファイルに下記を追記して下さい。

対象ファイル:/html/template/default/css/style.css

[ファイルの中身]

 

レイアウトの編集

管理画面 > コンテンツ管理 > ページ管理

ページ一覧にあるTOPページの「…」をクリック

ページ一覧にあるTOPページの「レイアウト編集」をクリック

カゴの中とカゴの中(オリジナル)を入れ替えます。

後で写真を追加

プレビューで確認し、OKならば[登録]をクリック。

後で写真を追加

 

キャッシュのクリア

管理画面 > コンテンツ管理 > キャッシュ管理

[キャッシュ削除]をクリック

 

変更後の確認

「shift」を押しながらリロードして、確認。

[変更前]

後で写真を追加

[変更後]

後で写真を追加
 
 

 

投稿者: samancha