イントロダクション
出典: Live Commerceドキュメント
目次 |
Live Commerceのデザインカスタマイズ前に最低限知っておくこと
このドキュメントページでは、Live Commerceのデザインカスタマイズについて解説します。 デザインのカスタマイズを行うにあたって必要な技術的なスキル、ソフトウェアを紹介します。
必須スキル
Live Commerceのデザインをカスタマイズするにあたっては次のスキルとソフトウェアが必要になります。
技術的な要件
- HTMLの編集スキル
- スタイルシートの編集スキル
推奨するオーサリングソフト
テーマという概念について
システム本体とデザインは分離されていること デザイン部分においてはテーマという概念で設計されており、１つのデザインを１テーマとして認識されます。テーマはシステム本体のコアスクリプトとは分離されており、HTMLの出力のみを行います。 テーマを複数システムにインストールすると、管理画面からテーマ１からテーマ２へと簡単に切り替えをすることができます。
新しいデザインを作成しようと思ったとき、既存のテーマを編集するのではなく、新しいテーマを追加するだけで簡単に既存のテーマから切り替えることができます。テーマは /resources/c_media/themes/テーマフォルダ名 にあります。
テーマを確認する
テーマの作成中に、開発中のテーマにアクセスを確認したい場合は次のURLをリクエストします。
http://yoursite.com/theme/テーマ名
URLの末尾に theme/テーマ名 を追加すると、現在のビューから切り替えできます。もし、現在 http://yoursite/com/login/theme/テーマ名 とした場合は、指定したテーマ名のログインページを表示します。
テーマを簡単に切り替えるには、テーマ切り替え用のテンプレートタグ c::getThemeList を現在利用中のテーマに設置してください。
テーマへの言語の記述
1言語しか扱わないウェブサイトならテーマファイルに直接記述してしまっても問題ないですが、2言語以上で運営するウェブサイトの場合はテーマに直接テキストを記述してはいけません。Live Commerceのシステムに搭載される翻訳機能を使ってテキストを配置します。翻訳機能で一度テキストを登録してから、登録した定数値をテーマに追記します。
テーマファイルが設置されているディレクトリ
テーマファイルは次のディレクトリにあります。
/resources/themes/
テーマは次のファイル、フォルダ構成になっています。
+はフォルダ、 -はファイル +css +image +include +js +lang -file1 -file2 ... 以下ファイルが続く ...
テーマファイル一覧
テーマファイルに含まれるファイルと、それぞれのファイルが行っている機能の一覧です。 (並び順: A-Z )
| ファイル名 | 機能 |
|---|---|
| 404.php | リクエストしたページが見つからないときにこのページが出力されます。 |
| account-close-success.php | アカウントの退会完了画面 |
| account-close.php | アカウントの退会手続き画面 |
| account-edit.php | アカウント情報の編集画面 |
| account_pageination.php | 注文履歴のページ送り部分のHTML |
| address-add.php | 配送先登録画面 |
| address.php | 配送先一覧画面 |
| brand.php | メーカー一覧画面 |
| cart-detail.php | ショッピングカート画面 |
| cart.php | 商品ページからカートに商品が入った場合の画面 |
| category.php | サブカテゴリページ画面 |
| checkout-confirmation.php | 支払手続き最終確認画面 |
| checkout-guest-billing-address.php | ゲスト購入者用の請求先住所編集画面 |
| checkout-guest-shipping-address.php | ゲスト購入者用の配送先住所編集画面 |
| checkout-login.php | 支払手続きログイン画面 |
| checkout-shipping.php | 支払手続き配送先選択、配送方法選択、決済方法選択画面 |
| checkout-success.php | 支払手続き完了画面 |
| config.php | テーマに関する設定ファイルです。出力はありません。 |
| contact.php | お問合せフォーム画面 |
| create-account-success.php | アカウント作成完了画面 |
| create-account.php | アカウント作成画面 |
| default.php | トップページ画面 |
| listing-default.php | 商品の一覧が表示される画面、縦一列に商品情報が表示されます。 |
| listing-window.php | listing-default.phpと同じ役割をします。マトリックス型（例として縦10、横３）に商品情報が表示されます。 |
| login.php | ログイン画面 |
| logoff.php | ログアウト画面 |
| myaccount.php | マイアカウントのトップページ画面 |
| new_page.php | 管理画面からページ登録を使って作成したページが出力されます。 |
| order-detail.php | 注文した履歴の注文詳細画面 |
| order.php | 注文した履歴一覧画面 |
| password.php | パスワード再発行ページ画面 |
| point.php | ポイントの使用履歴を表示する画面 |
| product-option.php | 商品オプション選択HTML |
| product.php | 商品詳細画面 |
| recommend_default.php | オススメ商品を表示する画面、縦一列に商品情報が表示されます。 |
| recommend_window.php | オススメ商品を表示する画面、マトリックス型（例として縦10、横３）に商品情報が表示されます。 |
| review-write.php | 商品レビューを書き込みする画面 |
| screenshot.png | テーマのスクリーンショット画像 |
| search-form.php | 商品検索結果ページ画面 |
| search.php | 商品検索結果ページ画面 |
| search_default.php | 商品検索結果ページ画面 |
| search_window.php | 商品検索結果ページ画面 |
| sitemap.php | 商品検索結果ページ画面 |
| tag.php | 商品検索結果ページ画面 |
| tell-friend.php | お友達に紹介するのソース単体画面product.phpから呼び出しされます。 |
| wishlist.php | 登録されている商品のうち、お気に入りの商品をブックマークしておき、ブックマークされた一覧画面 |
includeフォルダ内
| ファイル名 | 機能 |
|---|---|
| footer.php | 各ページのフッター部分画面 |
| header.php | 各ページのヘッダー部分画面 |
| sidebarL.php | 各ページの左側部分画面 |
| sidebarR.php | 各ページの右側部分画面 |
| sidebar_search_categories.php | 検索結果で使用されるキーワードに対するカテゴリを表示させるためのファイル |
その他のファイル、フォルダ
| ファイル名/フォルダ名 | 機能 |
|---|---|
| css | テンプレートで利用されているCSSファイルが格納されています。 |
| images | テンプレート内で利用されている画像ファイルが格納されています。 |
| js | テンプレート内で利用されているjsvascriptが格納されています。 |
| lang | テンプレート内で利用されているボタン画像が格納されています。言語別にフォルダ分けされています。 |
テーマを切り替える
Live Commerceはテーマの開発をサポートするタグに c::getThemeList があります。このタグをテーマ内に埋め込むと現在インストールされているテーマ一覧をセレクトボックスのフォームで表示してくれます。 一覧に表示された中から開発中のテーマを選択すると、開発中のテーマの該当するファイルにデザインを切り替えてくれます。デザインの開発にはこのタグを使うと便利です。
