Logo

Logo

ECcube基本①

ECcube基本①

Division: 解説

Subject: ECCUBE

ECcubeの基本

管理画面

【ページ管理】

新規ページの作成・既存ページの編集、カート画面のカスタマイズ

【ブロック管理】

新着情報や各エリアの編集、ヘッダーやフッター、全ページで共通するものの管理

【CSS・JS管理】

管理画面からの編集が可能、デフォルトのテンプレートのclassやidを変更し、CSSを当てることが可能

【ファイル管理】

画像やpdf、新規css.jsファイルのアップロードが可能。faviconもここで変更可能

ディレクトリについて

ページの情報は【サイト名/app/template/テーマ名】の中に格納される

TOPページ…/index.twig

商品一覧…/ptoduct/list.twig

など、全てtwigで保存されている。

ページ追加はtemplate/user_dataに、ブロック追加はtemplate/テンプレート名に生成される。

cssやjsは、/サイト名/html/user_data/assetsに格納されている。

 

【ディレクトリ構造】

[app]カスタマイズ用PHPコード

[bin]開発用実行ファイル

[html]リソース(js,cssファイル )

[src]EC-CUBE本体コード(編集しない)

 

カスタマイズの際は、srcの中にある本体コードをappへコピーし編集する事。srcをいじるとECCUBEのアップデート時にエラーが起こる。

src/Eccube/Resource/template/admin 管理画面のコード

src/Eccube/Resource/template/default フロント画面のコード(index.twig、topic.twigなど)

尚テンプレートを使用する際はそちらに準拠させる。読み込み優先順位はsrc<app。

 

【テンプレート構造】

template/defaultで確認。

default_frame.twig 線ページ用フレーム

index.twig TOPページ

[Block]各種ブロック

[Product]商品一覧と詳細

 

 

ライブラリ

【標準ライブラリ】

・Bootstrap3 (管理画面は4)

・jQuery3

・FontAwsome5

参考サイト

類似記事