cscart4のhands-onセミナー 20140118

ハンズオンセミナー　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が便利この中のリストに 表示される！