cs -cart勉強会
DESCRIPTION
CS-Cart第一回勉強会の発表資料です。TRANSCRIPT
#001
2011年12月13日火曜日
CSSだけでショップフロントをカスタマイズ
CS-CartのCMS機能
ブロック機能Tips
テンプレートフックとは？
2011/12/10
2011年12月13日火曜日
CSSだけでショップフロントをカスタマイズ
2011/12/10
2011年12月13日火曜日
CS-Cartをバージョンアップ
2011/12/10
テンプレートファイルが上書きされる
オワタ＼(^o^)／
2011年12月13日火曜日
テンプレートに手を入れるのは最後の手段
2011/12/10
（tplファイルを直接編集する）
というくらいの感覚で。
2011年12月13日火曜日
スキンのディレクトリ構成2011/12/10
2011年12月13日火曜日
スキンのディレクトリ構成2011/12/10
skins
2011年12月13日火曜日
スキンのディレクトリ構成2011/12/10
skins
basic
スキン名
2011年12月13日火曜日
スキンのディレクトリ構成2011/12/10
skins
basic
スキン名
customer
ショップフロント用
Wordpressのテーマフォルダのような構成です。
2011年12月13日火曜日
スキンのディレクトリ構成２2011/12/10
customer
addons
common_templates
views
アドオンで使用するテンプレート
共通部品
特定のページ用
2011年12月13日火曜日
日本語版アドオンの中身2011/12/10
addons
localization_jp
日本語版アドオン
2011年12月13日火曜日
日本語版アドオンの中身2011/12/10
addons
localization_jp
日本語版アドオン
styles.css必ず最後に読み込まれるCSS
2011年12月13日火曜日
localization_jpのstyle.css2011/12/10
styles.css
2011年12月13日火曜日
localization_jpのstyle.css2011/12/10
styles.css•必ず最後に読み込まれるCSS•このファイルでスタイルを上書き出来る•Wordpressの子テーマ感覚で！
2011年12月13日火曜日
localization_jpのstyle.css2011/12/10
styles.css•必ず最後に読み込まれるCSS•このファイルでスタイルを上書き出来る•Wordpressの子テーマ感覚で！
&
firefox firebug2011年12月13日火曜日
実際にやってみましょう。
2011年12月13日火曜日
CS-CartのCMS機能
2011/12/10
2011年12月13日火曜日
CS-CartのCMS機能
2011/12/10
“M”するのは商品だけじゃない！
2011年12月13日火曜日
ウェブサイトメニュー＞コンテンツ＝CS-CartのCMS機能2011/12/10
page
link
form
静的コンテンツ会社概要、利用規約、プライバシーポリシー etc.
リンク
フォームお問い合せフォームビルダー
メニューで利用する。
2011年12月13日火曜日
実際にやってみましょう。
2011年12月13日火曜日
ブロック機能を使いこなす
2011/12/10
ページ内の構成を管理する
2011年12月13日火曜日
ブロック機能を使いこなす2011/12/10
header
footer
left rightcenter
全ページ/商品/カテゴリー/ページ/トップページ/カート/購入手続き/注文完了ページ
2011年12月13日火曜日
ブロック機能を使いこなす2011/12/10
header
footer
left rightcenter
全ページ/商品/カテゴリー/ページ/トップページ/カート/購入手続き/注文完了ページ
2011年12月13日火曜日
ブロックの種類2011/12/10
【一覧用オブジェクト】商品・・・商品やそのリストを表示します。カテゴリー・・・カテゴリーのリストを表示します。ページ・・・ページのリストを表示します。商品フィルタ・・・商品フィルターに基づくリスト表示を行います。支払方法・・・支払い方法のアイコンを表示します。配送方法・・・配送方法のアイコンを表示します。メールマガジン・・・購読可能なメールマガジンのリストを表示します。タグ（タグアドオン有効時）・・・タグクラウドなどを表示します。アンケート（アンケートアドオン有効時）・・・アンケートを表示します。バナー（バナー管理アドオン有効時）・・・バナーを表示します。
【標準サイドボックス】商品比較・・・商品比較リストを表示します。マイアカウント・・・アカウントへのリンクを表示します。検索・・・検索窓を表示します。送料見積もり店舗所在地（店舗所在地アドオン有効時）・・・店舗所在地の検索窓を表示します。お客様の声（コメントとレビューアドオン有効時）・・・お客様からのレビューを表示します。
【スペシャル】 HTMLブロック・・・自由にHTMLを記述できるブロックです。 個別のHTMLブロック・・・ページ別にHTMLを記述出来るブロック RSSフィード・・・RSSフィードをリスト化して表示します。
2011年12月13日火曜日
実際にやってみましょう。
2011年12月13日火曜日
テンプレートフック
2011/12/10
2011年12月13日火曜日
フック（Hook）は、プログラム中の特定の箇所に、利用者が独自の処理を追加できるようにする仕組みである。また、フックを利用して独自の処理を追加することを「フックする」という。
処理を追加できる箇所は、元のプログラムの開発者によって、あらかじめ決められている。初期化処理や入出力処理などの直前・直後が対象としてよく選ばれる。
2011年12月13日火曜日
CS-Cartテンプレートフック＝
命名規則による処理の追加や変更
2011年12月13日火曜日
テンプレートフック
{hook name="index:footer"}{/hook}
{hook name="index:jp_html_xmlns"}<html xmlns="http://www.w3.org/1999/xhtml" lang="{$smarty.const.CART_LANGUAGE|lower}">
{/hook}
hookポイントの中に処理が書いてある場合もある
テンプレートの中に書かれているこのような記述を「hookポイント」と呼びます。
2011年12月13日火曜日
テンプレートフック
"index:footer"
indexセクションのfooterという名前のフックポイント
命名規則について
2011年12月13日火曜日
pre フックポイントが読み込まれる直前に変更内容を表示する
post フックポイントが読み込まれた直後に変更内容を表示する
override フックポイント内をオーバーライド（上書き）する
テンプレートフック
フックのタイミング
2011年12月13日火曜日
テンプレートフック
フックを司るアドオン
My changes addon
customer
addons
my_changes
無効にすればテンプレートフックが無効になる
2011年12月13日火曜日
テンプレートフック
フックポイントで使うテンプレートファイルを作成する
my_changes
hooks
index
{hook name="index:footer"}{/hook}
セクション名でフォルダを作成する！
作成する
2011年12月13日火曜日
テンプレートフック
フックポイントで使うテンプレートファイルを作成する
index
footer.post.tpl
{hook name="index:footer"}{/hook}
フック名
処理のタイミング
tplという拡張子
セクション名
2011年12月13日火曜日
テンプレートフック
フックポイントが無いときは？
2011年12月13日火曜日
テンプレートフック
フックポイントが無いときは？
作ればいいさぁ
2011年12月13日火曜日
テンプレートフック
フックポイントが無いときは？
作ればいいさぁテンプレートに手を入れるorz...
2011年12月13日火曜日
テンプレートフック
フックポイントが無いときは？
作ればいいさぁテンプレートに手を入れるorz...
CSS >> HOOK >> テンプレートカスタマイズ
2011年12月13日火曜日
実際にやってみましょう。
2011年12月13日火曜日
•jQueryプラグインを導入してみる•Googleカスタム検索を導入してみる•ソーシャルボタンを導入してみる
2011年12月13日火曜日