1. ハンズオンセミナー 2014.01.18

2. Menu
•
テーマ・プリセット・レイアウト
•
フォルダ構造を知ろう
•
市販のテーマの構造
•
カスタマイズTips

3. テーマ・プリセット
レイアウト
CS.Cart4 Hands-on

5. テーマ
•
Wordpressのように複数のテーマをインストー
ルし、選択可能。
•
インストールしたテーマは複製が可能。

7. プリセット
•
テーマごとにカラースキームなどを複数保存でき
る。
•
プリセット対応のテーマはテーマエディターから
ライブで調整可能。
•
ロゴなどはこのエディターを利用して設定（アッ
プロード）する。

9. レイアウト
•
グリッドシステムのルールに沿ってグリッドやブ
ロックを簡単に配置できるブロックマネージャー
の提供
•
ロケーション毎にレイアウトを設定可能。
•
複数のレイアウト構成を切り替えて運用できる。

10. CS.Cartのレイアウトの基本
•
コンテンツを16または12分割したグリッドシス
テムに添って配置を行う。
•
ロケーション（トップページ、商品一覧、商品詳
細）ごとにレイアウト構成を変更可能
•
横幅960px以外にも指定できる
※ →レイアウト編集
960 or XXXX→YYYYY or Liquid
10

11. ブロックマネージャーに慣れる

12. ブロックマネージャーの基本
•
新）グリッドの幅を指定可能。
•
新）特定の商品・ページ毎にロケーションを
作成できる
•
グリッドの上部にグリッドは後から追加不可能。
•
ひとつのグリッドの中にグリッドとブロックは
混在できない。
•
「デフォルト」のみヘッダー／フッターを変更可能

13. ブロックをいろいろ置いてみる

14. ブロックのまとめ
•
ブロックは自作可能
•
アドオンが提供するブロックなどがある
•
「メインコンテンツ」ブロックは必須！
※コントローラーのVIEWを表示するから
おまけ：ロケーション部分でタイトルタグを指定できる

15. フォルダ構造
CS.Cart4 Hands-on

16. app
コアファイルやアドオン本体
design
使用中のテンプレートファイル
images
アップロードした画像等
js
javascript（アドオン使用分含む）
var
リポジトリ等

17. design
backend
管理パネル用テンプレート
themes
フロント用テンプレート

18. themes
basic
デフォルトのテンプレート
your-tpl
自作のテンプレート
your-tpl2
your-tpl3

19. basic
css
CSS
mail
メールテンプレート
media
フォントや画像ファイル
presets
プリセット関連ファイル
templates
各種テンプレート

20. templates
addons
アドオンのテンプレート
blocks
ブロックのテンプレート
buttons
各種ボタン用テンプレート
common
commonテンプレート
pickers
ピッカー用テンプレート
views
コントローラーに対応した
テンプレート

21. views
auth
index.php?dispatch=auth.login_form
categories
index.php?dispatch=categories.view&category_id=210
checkout
index.php?dispatch=checkout.cart
orders
index.php?dispatch=orders.search
products
index.php?dispatch=products.view&product_id=160
主なもの

22. blocks
list_templates
static_templates
product_list_templates
wrappers
主なもの

23. フォルダ構造まとめ
•
見るべきフォルダは多くない
•
構造がきちんとしている
•
dispach=XXXX でみつける

24. 市販テーマの構造
CS.Cart4 Hands-on

25. HiTech
basic

26. HiTechテンプレートのファイル数
画像24個
CSS1個
TPL2個
!
その他3個

27. なぜ少ないファイル数で見た目が変えられるのか？
A.差分のファイルだけ作れば
その他はメインのリポジトリから
ファイルがコピーされるから。

28. My changes アドオンを使う
My changesアドオン
フック（Hook）を利用した簡単な
カスタマイズを実装するためのアドオン
テンプレート・フックを使えば
コアファイルを改変せずに
好きな処理を割り込ませたり、上書きできる。

29. テンプレート・フックとは？
•
あらかじめ用意されたフック・ポイントをみつける
•
フック方法は3種類
•
命名規則に沿ったファイルを用意する
•
テンプレートキャッシュをクリアする

30. フック・ポイントとは？
/public_html/design/themes/basic/templates/meta.tpl
{hook name="index:meta"}
{if $display_base_href}
<base href="{$config.current_location}/" />
{/if}
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta http-equiv="Content-Type" content="text/html; charset={$smarty.const.CHARSET}" />
{hook name="index:meta_description"}
<meta name="description" content="{$meta_description¦html_entity_decode:
$smarty.const.ENT_COMPAT:"UTF-8"¦default:$location_data.meta_description}" />
{/hook}
<meta name="keywords" content="{$meta_keywords¦default:$location_data.meta_keywords}" />
<meta name="mode" content="{$store_trigger}" />
{/hook}

31. 3種類のフック
•
pre
先に。。
•
post 後に。。。
•
override 上書き！

32. 命名規則とは？
{hook name="index:meta"}
（・・・・省略・・・・）
{/hook}
/public_html/design/themes/
basic/templates/addons/my_changes/hooks/
種類（先述）
ディレクトリ
index/meta.post.tpl
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
緑のフックポイントの後に処理を入れるファイルとなる。

33. テンプレートキャッシュのクリア
処理高速化のためにテンプレートファイルは
キャッシュされます。
!
テンプレートファイルをそのまま
アップロードしただけでは、変更箇所が反映されない
ことがあります。
!
管理画面のURLに?ctplをつけてアクセス
しましょう。

34. カスタマイズTips
CS.Cart4 Hands-on

35. static templatesが便利
一番簡単に作ることの出来る
独自のブロック
/public_html/design/themes/
basic/templates/blocks/static_templates
１行目に以下のようなコメントを入れる
{** block-description:tmpl_copyright **}

36. static templatesが便利
この中のリストに
表示される！