Embed Size (px)
Citation preview
ハンズオンセミナー 2014.01.18
Menu
• テーマ・プリセット・レイアウト
• フォルダ構造を知ろう
• 市販のテーマの構造
• カスタマイズTips
テーマ・プリセット レイアウト
CS.Cart4 Hands-on
テーマ• Wordpressのように複数のテーマをインストールし、選択可能。
• インストールしたテーマは複製が可能。
プリセット• テーマごとにカラースキームなどを複数保存できる。
• プリセット対応のテーマはテーマエディターからライブで調整可能。
• ロゴなどはこのエディターを利用して設定（アップロード）する。
レイアウト• グリッドシステムのルールに沿ってグリッドやブロックを簡単に配置できるブロックマネージャーの提供
• ロケーション毎にレイアウトを設定可能。
• 複数のレイアウト構成を切り替えて運用できる。
CS.Cartのレイアウトの基本• コンテンツを16または12分割したグリッドシステムに添って配置を行う。
• ロケーション（トップページ、商品一覧、商品詳細）ごとにレイアウト構成を変更可能
• 横幅960px以外にも指定できる※ →レイアウト編集 960 or XXXX→YYYYY or Liquid
10
ブロックマネージャーに慣れる
ブロックマネージャーの基本• 新）グリッドの幅を指定可能。
• 新）特定の商品・ページ毎にロケーションを 作成できる
• グリッドの上部にグリッドは後から追加不可能。
• ひとつのグリッドの中にグリッドとブロックは混在できない。
• 「デフォルト」のみヘッダー／フッターを変更可能
ブロックをいろいろ置いてみる
ブロックのまとめ• ブロックは自作可能
• アドオンが提供するブロックなどがある
• 「メインコンテンツ」ブロックは必須！ ※コントローラーのVIEWを表示するから
おまけ：ロケーション部分でタイトルタグを指定できる
フォルダ構造CS.Cart4 Hands-on
app コアファイルやアドオン本体
design 使用中のテンプレートファイル
images アップロードした画像等
js javascript（アドオン使用分含む）
var リポジトリ等
design
backend 管理パネル用テンプレート
themes フロント用テンプレート
themes
basic デフォルトのテンプレート
your-tpl 自作のテンプレート
your-tpl2
your-tpl3
basic
css CSS
mail メールテンプレート
media フォントや画像ファイル
presets プリセット関連ファイル
templates 各種テンプレート
templates
addons アドオンのテンプレート
blocks ブロックのテンプレート
buttons 各種ボタン用テンプレート
common commonテンプレート
pickers ピッカー用テンプレート
views コントローラーに対応した テンプレート
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
主なもの
blocks
list_templates
static_templates
product_list_templates
wrappers
主なもの
フォルダ構造まとめ• 見るべきフォルダは多くない
• 構造がきちんとしている
• dispach=XXXX でみつける
市販テーマの構造CS.Cart4 Hands-on
basic
HiTech
HiTechテンプレートのファイル数画像24個 CSS1個 TPL2個
!
その他3個
なぜ少ないファイル数で見た目が変えられるのか？
A.差分のファイルだけ作れば その他はメインのリポジトリから ファイルがコピーされるから。
My changes アドオンを使う
My changesアドオン フック（Hook）を利用した簡単な
カスタマイズを実装するためのアドオン
テンプレート・フックを使えば コアファイルを改変せずに
好きな処理を割り込ませたり、上書きできる。
テンプレート・フックとは？• あらかじめ用意されたフック・ポイントをみつける • フック方法は3種類 • 命名規則に沿ったファイルを用意する • テンプレートキャッシュをクリアする
フック・ポイントとは？
{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}
/public_html/design/themes/basic/templates/meta.tpl
3種類のフック
• pre 先に。。 • post 後に。。。 • override 上書き！
命名規則とは？{hook name="index:meta"} （・・・・省略・・・・） {/hook}
/public_html/design/themes/ basic/templates/addons/my_changes/hooks/
index/meta.post.tplディレクトリ 種類（先述）
緑のフックポイントの後に処理を入れるファイルとなる。• • • • • • • • • • • • • • • • • • • • • • • • •
テンプレートキャッシュのクリア
処理高速化のためにテンプレートファイルは キャッシュされます。
!テンプレートファイルをそのまま
アップロードしただけでは、変更箇所が反映されない ことがあります。
!
管理画面のURLに?ctplをつけてアクセス しましょう。
カスタマイズTipsCS.Cart4 Hands-on
static templatesが便利
一番簡単に作ることの出来る 独自のブロック
/public_html/design/themes/ basic/templates/blocks/static_templates
１行目に以下のようなコメントを入れる
{** block-description:tmpl_copyright **}
static templatesが便利この中のリストに 表示される！
