Magento cafe tokyo2~デザイナー向けMagentoの歩き方

デザイナー向けMagentoの歩き方

2011/10/22Magento-JP User Group　西　宏和

Agenda

•Magentoのデザインアーキテクチャ

•レイアウトXMLを理解する

•テンプレートの仕組み

•その他Tips

Magentoのデザインアーキテクチャ

Magentoのディレクトリ構造

app code core コアコード

community コミュニティコード

local ローカルコード

design frontend 公開側テンプレート等

adminhtml 管理側テンプレート等

etc 設定ファイル

locale ロケールファイル

lib 共通ライブラリ

js 共通javascriptファイル

skin frontend 公開側スキン

adminhtml 管理側スキン

design frontend base default layout レイアウトXML

locale 公開側ロケール

template テンプレートファイル

default default ・・・ 以下略

foo foo ・・・ 以下略

リクエスト受付からHTML出力まで

Controller

Mage_Core_Model_Layout

Mage_Core_Block_Abstract

Template files

レイアウトXMLを理解する

レイアウトXMLとは

•Magentoで表示する画面の定義

•Controllerのアクションと関連

•理解することがデザイン改造への近道

レイアウトXMLの書き方

•最上位要素は”<layout>”

•第2階層は”<module_controller_action>”

•第3階層以降は各ページのレイアウト内容

レイアウトXMLで使用できるタグ

タグ名 解説 例

block ブロックを定義するタグ。これを定義しないと何も始まらない。

<block type=”foo/bar” name=”foo_bar” />

reference 定義済みのブロックを参照するタグ。 <reference name=”foo”/>

remove 定義済みのブロックを削除するタグ。 <remove name=”foo” />

action ブロックに対して所定のメソッドを実行させるタグ。

<action method=”foo”>...

</action>

詳説・blockタグの属性

属性名 解説 例

type Blockクラス名を指定します。 type=”cusotmer_form/login”

class Blockクラス名を指定します。 class=”customer_form/login”

name Blockのハンドル名を指定します。 name=”customer_form_login”

asハンドル名の別名を指定します。getChildHtmlメソッドではname属性より優先されます。

as=”form_login”

before Blockを追加する直前のハンドル名を指定します。 before=”foo”

after Blockを追加する直後のハンドル名を指定します。 after=”bar”

template Blockで使用するテンプレートファイルを指定します。 template=”foo/bar.phtml”

output Blockの出力先を指定します。 output=”toHtml”

actionタグ

•Blockオブジェクトのpublicメソッドを指定

•子要素のタグでパラメータ指定が可能

•ifconfig属性で設定値によるオンオフが可能

removeタグ

•特定のBlockをレイアウト上から取り除く

•削除後に再定義というテクニックも使える

•特定のページだけバナーを消したいとかいう時に便利

テンプレートの仕組み

Magentoのテンプレート

•ただのPHPスクリプトファイル

•拡張子が .phtml なだけ

•ifやfor、foreachの構文がちょっと違う（でも通常のも使える）

•要するにPHPわかれば構文覚える必要なし

Fallbackとは

•テンプレートをさかのぼって適用する仕組み

•標準は base/default に戻る

•必要なファイルだけ修正すれば良い仕組み

図解：Fallback

base/default

default/blue

default/default

メールテンプレート・CMSタグの仕組み

使えるパラメータなどタグ名 解説 例

var 変数を表示します {{var foo}}

htmlescape いわゆるHTML用のエスケープ処理を行います {{htmlescape var=$foo}}

config 設定パラメータを表示します {{config path=‘foo/bar/foo’}}

depend パラメータに応じて処理するかしないかを分岐させます {{depend foo}}...{{/depend}}

layout レイアウトブロックを呼び出します {{layout handle=”foo” bar=$bar}}

store 今現在の店舗に依存した処理をします {{store url=”foo”}}

skin skin関連のURLの処理をします。 {{skin url=”foo”}}

block ブロックを呼び出します{{block type='core/template' area='frontend' template='email/order/shipment/track.phtml' shipment=$shipment order=$order}}

widget ウィジェットを呼び出します {{widget type="sales/widget_guest_form"}}

media 画像を挿入します {{media url=”foo/bar.jpg”}}