Magento meet up Tokyo#1 for Design

1. タイトル：
1.Magentoサイトにおける基本的なデザインカスタ
マイズ
2.Magentoで「 jQuery 」を使うためのポイント
(フラッシュに変わってjQueryを使おう！）

2. Magentoおけるデザインカスタマイズ
所属：スタイルチューン株式会社
名前：中野美穂
経歴：はじめはグラフィクデザイナーアシスタント
として広告制作会社で2年ほど広告デザインを
経験しました。
その後は長く通信販売会社で企画や広告・カタ
ログ制作などを担当していました。
その時の知識は大いにECサイトを構築する上で
役立っていると思います。

3. Magentoおけるデザインカスタマイズ
CMSとの出会い：
最初はDTPデザインから制限が少なく自由度の高い
Webデザインの世界へ・・・
デザインがある程度できてもコーディングや
システムが必要なものが難しい！！
CGI設置など色々試していた頃に最初のCMS
「Joomla」を知りともかくテストテストテストの日々。
モジュールやテンプレがたくさんあるのが楽しかった。
とういう訳で現在はMagentoに
魅了されています。

4. スピーチ内容：
a. まずは日本語化
b. カスタマイズテーマを作成する
c. ヘッダとフッタ、ロゴの部分はバックエンドで
d. レイアウトを選択する
e. モジュールのレイアウト(表示位置の移動）

5. Magentoインストール

6. バックエンドの日本語化
キャッシュ管理
https://github.com/rack990/Magento-Japanese-Translation
ここにzip形式の「ja_JP」フォルダがあるのでFTP経由で上記のディレク
トリにアップするだけ。

7. カスタマイズテーマを選択した後のデザイン

8. カスタマイズテーマのディレクトリ構成
テーマに不足なファイルがあると
そのパッケージの「default」を読みに行き
最終的には「base」の「default」を読み込む
Theme
variant

9. カスタマイズテーマのディレクトリ構成
「alex」の場合「blank」をコピー
「custompackages」の場合
「base」の「default」と上の
「blank」をコピー
コピーした後で不要なファイルは削除できる。
基本的に「default」ファイルを変更したものだ
け
がカスタマイズテーマフォルダにあればOK。

10. カスタマイズテーマのディレクトリ構成
「alex」の場合「blank」をコピー
「custompackages」の場合
「base」の「default」と上の
「blank」をコピー
-- CSS フォルダ
-- images フォルダ
Skinも同様なディレクトリに・・・・

11. カスタマイズテーマのバックエンド設定
default
default
alex
alex

12. カスタマイズテーマを選択する前のデザイン

13. カスタマイズテーマを選択した後のデザイン

14. レイアウトを選択する
基本的にヘッダとフッダ部分は固定
ヘッダ
左ナビ ホームページ
フッダ

15. レイアウトを選択する
基本的にヘッダとフッダ部分は固定
ヘッダ
ホームページ 右ナビ
フッダ

16. レイアウトを選択する
基本的にヘッダとフッダ部分は固定
ヘッダ
ホームページ
フッダ

17. レイアウトを選択する
基本的にヘッダとフッダ部分は固定
ヘッダ
左ナビ ホームページ 右ナビ
フッダ

18. レイアウトを選択する
ヘッダ ヘッダ
カテゴリーページ
左 右 右
ホームページ ホームページ
ナビ ナビ ナビ
商品説明ページ
フッダ フッダ
ヘッダ >> それぞれに各ページで設定できる
ホームページ
フッダ デモサイトで実際にやってみます。

19. レイアウトを選択する
main-container col1-layout
http://demo.magentocommerce.com/?___store=modern_theme2
main-container col3-layout
http://freedemo.templates-master.com/f002
col-2-right-layout
http://testing.magthemes.com/?___store=telescope

20. モジュールのレイアウト(表示位置の移動）
カテゴリーページ内の「マイカート」ボックスを
右列から左へ変更 Checkoutモジュールを含んだファイル
frontend/base/default/template/checkout/cart/sidebar.phtml
app/design/frontend/base/default/layout/checkout.xml
コピーする
app/design/frontend/alex/default/layout/checkout.xml
カスタマイズしたテーマの中

21. モジュールのレイアウト(表示位置の移動）
コピーした /checkout.xml ファイルを開く。
<default>
<!-- Mage_Checkout -->
ここの部分を書き換える
<reference name="top.links">
<block type="checkout/links" name="checkout_cart_link">
<action method="addCartLink"></action>
<action method="addCheckoutLink"></action>
</block>
</reference>
<reference name="right">
<block type="checkout/cart_sidebar" name="cart_sidebar" template="checkout/cart/sidebar.phtml" before="-">
<action method="addItemRender">
<type>simple</type><block>checkout/cart_item_renderer</block><template>checkout/cart/sidebar/default.phtml</template></action>
<action
method="addItemRender"><type>grouped</type><block>checkout/cart_item_renderer_grouped</block><template>checkout/cart/sidebar/default.p
html</template></action>
<action
method="addItemRender"><type>configurable</type><block>checkout/cart_item_renderer_configurable</block><template>checkout/cart/sidebar/
default.phtml</template></action>
<block type="core/text_list" name="cart_sidebar.extra_actions" as="extra_actions" translate="label" module="checkout">
<label>Shopping Cart Sidebar Extra Actions</label>
</block>
</block>
</reference>

22. モジュールのレイアウト(表示位置の移動）
コピーした /checkout.xml ファイルを開く。
<reference name="right">
「right」を「left」に書き換える
<reference name=“left"> アップロード

23. スピーチ内容：
<< フラッシュに変わってjQueryを使おう！ >>

24. jQuery を使うポイント
jQueryが影響しあって動かせない時が多々ある。
注意点：実際にjQueryをコーディングを
試みてチェックした限りでは問題はないように
見えるが完全ではないかもしれない。
jQuery を使用した場合、
Magentoサイトでの動作まわりを
チェックし注意する事が必要。

25. jQuery を使うポイント
FTPでMagentoの「piblic_html」を開き「js」フォルダ内に「 jQuery 」フォルダを作成する。
(名前はなんでもいいしディレクトリも任意だが....）
ここにわかりやすくする為に
フォルダを作成
アップロード
http://jquery.com/
から「jQuery」 のファイルを
ダウンロードしここにアップ
ロードする。
最新版：jquery-1.7.min.js
フル版とMinimum版があるので
「min」と付いた方をDL

26. jQuery を使うポイント
/public_html/app/design/frontend/base/default/layout/page.xml
に以下の記述をする。
default/layout/page.xml

27. <layout version="0.1.0">
<!--
Default layout, loads most of the pages
-->
<default translate="label" module="page">
<label>All Pages</label>
<block type="page/html" name="root" output="toHtml" template="page/3columns.phtml">
<block type="page/html_head" name="head" as="head">
<action method="addJs"><script>prototype/prototype.js</script></action>
prototype.js
<action method="addJs"><script>jquery/jquery-1.7.min.js</script></action> の下にjquery-1.7.min.jsに記述を追加
<action method="addJs"><script>twilight/twilight.js</script></action>
<action method="addJs"><script>twilight/jquery.js</script></action>
<action method="addJs"><script>twilight/twilight.min.js</script></action>
ここの3行はデモでトップページ表示し
<action method="addJs"><script>lib/ccard.js</script></action> たjqueryのサンプルに必要なファイル
<action method="addJs"><script>prototype/validation.js</script></action> を追加した
<action method="addJs"><script>scriptaculous/builder.js</script></action>
<action method="addJs"><script>scriptaculous/effects.js</script></action>
<action method="addJs"><script>scriptaculous/dragdrop.js</script></action>
<action method="addJs"><script>scriptaculous/controls.js</script></action>
<action method="addJs"><script>scriptaculous/slider.js</script></action>
<action method="addJs"><script>varien/js.js</script></action>
<action method="addJs"><script>varien/form.js</script></action>
<action method="addJs"><script>varien/menu.js</script></action>
<action method="addJs"><script>mage/translate.js</script></action>
<action method="addJs"><script>mage/cookies.js</script></action>
バックエンドでキャッシュをクリア

28. <action method="addJs">
<script>prototype/prototype.js</script></action>
この記述の後に・・・
リンクさせたいjsファイルを書く
<action method="addJs">
<script>jquery/jquery1.7.min.js</script></action>
バックエンドでキャッシュをクリア

29. jQuery を使うポイント
app/design/frontend/base/default/template/page/html/head.phtml に
以下以下の記述をする。
template/page/html/head.phtml

30. <meta http-equiv="Content-Type" content="<?php echo $this->getContentType() ?>" />
<title><?php echo $this->getTitle() ?></title>
<meta name="description" content="<?php echo htmlspecialchars($this->getDescription()) ?>" />
<meta name="keywords" content="<?php echo htmlspecialchars($this->getKeywords()) ?>" />
<meta name="robots" content="<?php echo htmlspecialchars($this->getRobots()) ?>" />
<link rel="icon" href="<?php echo $this->getFaviconFile(); ?>" type="image/x-icon" />
<link rel="shortcut icon" href="<?php echo $this->getFaviconFile(); ?>" type="image/x-icon" />
<!--[if lt IE 7]>
<script type="text/javascript">
//<![CDATA[
var BLANK_URL = '<?php echo $this->helper('core/js')->getJsUrl('blank.html') ?>'; <?php echo $this->getCssJsHtml() ?>
var BLANK_IMG = '<?php echo $this->helper('core/js')->getJsUrl('spacer.gif') ?>';
//]]>
の下に
</script>
<![endif]-->
<?php echo $this->getCssJsHtml() ?> <script type="text/javascript">
var $j = jQuery.noConflict();
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(function(){ ここの部分はそれぞれのjQueryのコードを記述する
$j(".open").click(function(){
$j("#slideBox").slideToggle("slow"); 1.#slideBox 2. twilight-show の2つのjQueryが記述されている
});
}); ※ $j(“#slideBox”)部分の「$j」に注意！全ての「$」の後に「j」
が必要
$j(document).ready(function() {
$j('.twilight-show').twilight(); .open{
}); background: #fc6;
color: #fff; CSSをここに記述しても
</script>
cursor: pointer; OK!!
<style> width:45px;
padding: 10px
</style>
}
#slideBox{
<?php echo $this->getChildHtml() ?> padding: 10px;
<?php echo $this->helper('core/js')->getTranslatorScript() ?> border: 1px #ccc solid;
<?php echo $this->getIncludes() ?> display:none;
}

31. <?php echo $this->getCssJsHtml() ?>
この記述の後に・・・
コードを書き足す
<script type="text/javascript">
var $j = jQuery.noConflict();
※ $j(“#slideBox”)部分の「$j」に注意！
全ての「$」の後に「j」が必要
$j(function(){
$j(".open").click(function(){
$j("#slideBox").slideToggle("slow");
});
<?php echo $this->getIncludes() ?>

32. jQuery を使うポイント
バックエンドの
CMS-静的ページ-ホーム-などにjQueryのコーディングを。
2つのjQueryのサンプルをコーディングしてみる

33. トップページにSlideBoxとtwilight-showが表示され、Magentoの機能と同時に動作する。
template/page/html/head.phtml
var $j = jQuery.noConflict(); が重要！！