Download - Magento meet up Tokyo#1 for Design
![Page 1: Magento meet up Tokyo#1 for Design](https://reader035.vdocuments.site/reader035/viewer/2022062616/5498d216b479592c408b456b/html5/thumbnails/1.jpg)
タイトル:
1.Magento サイトにおける基本的なデザインカスタマイズ
2.Magento で「 jQuery 」を使うためのポイント ( フラッシュに変わって jQuery を使おう!)
Magento デザインのヒント
![Page 2: Magento meet up Tokyo#1 for Design](https://reader035.vdocuments.site/reader035/viewer/2022062616/5498d216b479592c408b456b/html5/thumbnails/2.jpg)
所属:スタイルチューン株式会社
名前:中野美穂
経歴:はじめはグラフィクデザイナーアシスタント として広告制作会社で 2 年ほど広告デザインを 経験しました。 その後は長く通信販売会社で企画や広告・カタ ログ制作などを担当していました。 その時の知識は大いに EC サイトを構築する上で 役立っていると思います。
Magento おけるデザインカスタマイズ 自己紹介
![Page 3: Magento meet up Tokyo#1 for Design](https://reader035.vdocuments.site/reader035/viewer/2022062616/5498d216b479592c408b456b/html5/thumbnails/3.jpg)
CMS との出会い:
最初は DTP デザインから制限が少なく自由度の高いWeb デザインの世界へ・・・
デザインがある程度できてもコーディングやシステムが必要なものが難しい!!CGI 設置など色々試していた頃に最初の CMS「 Joomla 」を知りともかくテストテストテストの日々。
モジュールやテンプレがたくさんあるのが楽しかった。
とういう訳で現在は Magento に魅了されています。
Magento おけるデザインカスタマイズ 自己紹介
![Page 4: Magento meet up Tokyo#1 for Design](https://reader035.vdocuments.site/reader035/viewer/2022062616/5498d216b479592c408b456b/html5/thumbnails/4.jpg)
スピーチ内容:
a. まずは日本語化
b. カスタマイズテーマを作成する
c. ヘッダとフッタ、ロゴの部分はバックエンドで
d. レイアウトを選択する
e. モジュールのレイアウト ( 表示位置の移動)
Magento1.デザインカスタマイズ
![Page 5: Magento meet up Tokyo#1 for Design](https://reader035.vdocuments.site/reader035/viewer/2022062616/5498d216b479592c408b456b/html5/thumbnails/5.jpg)
インストール
Magento インストール
![Page 6: Magento meet up Tokyo#1 for Design](https://reader035.vdocuments.site/reader035/viewer/2022062616/5498d216b479592c408b456b/html5/thumbnails/6.jpg)
とりあえずは「日本語化」する
https://github.com/rack990/Magento-Japanese-Translation
ここに zip 形式の「 ja_JP 」フォルダがあるので FTP 経由で上記のディレクトリにアップするだけ。
キャッシュ管理
アップ後キャッシュをクリア
バックエンドの日本語化
![Page 7: Magento meet up Tokyo#1 for Design](https://reader035.vdocuments.site/reader035/viewer/2022062616/5498d216b479592c408b456b/html5/thumbnails/7.jpg)
バックエンドが日本語表記に変わるカスタマイズテーマを選択した後のデザイン
![Page 8: Magento meet up Tokyo#1 for Design](https://reader035.vdocuments.site/reader035/viewer/2022062616/5498d216b479592c408b456b/html5/thumbnails/8.jpg)
Themevariant
基本的にどちらかのディレクトリにカスタマイズした「テーマ」を入れる
テーマに不足なファイルがあるとそのパッケージの「 default 」を読みに行き最終的には「 base 」の「 default 」を読み込む
カスタマイズテーマのディレクトリ構成
READ
![Page 9: Magento meet up Tokyo#1 for Design](https://reader035.vdocuments.site/reader035/viewer/2022062616/5498d216b479592c408b456b/html5/thumbnails/9.jpg)
実際のディレクトリ「 alex 」の場合「 blank 」をコピー「 custompackages 」の場合「 base 」の「 default 」と上の「 blank 」をコピー
コピーした後で不要なファイルは削除できる。基本的に「 default 」ファイルを変更したものだけがカスタマイズテーマフォルダにあれば OK 。
カスタマイズテーマのディレクトリ構成
![Page 10: Magento meet up Tokyo#1 for Design](https://reader035.vdocuments.site/reader035/viewer/2022062616/5498d216b479592c408b456b/html5/thumbnails/10.jpg)
スキン (css + images)のディレクトリ「 alex 」の場合「 blank 」をコピー「 custompackages 」の場合「 base 」の「 default 」と上の「 blank 」をコピー-- CSS フォルダ-- images フォルダ
カスタマイズテーマのディレクトリ構成
Skin も同様なディレクトリに・・・・
![Page 11: Magento meet up Tokyo#1 for Design](https://reader035.vdocuments.site/reader035/viewer/2022062616/5498d216b479592c408b456b/html5/thumbnails/11.jpg)
バックエンドでの操作 (テーマ選択)
default
default
alex
パッケージ名
テンプレ名
テーマ名
カスタマイズテーマのバックエンド設定
alex
![Page 12: Magento meet up Tokyo#1 for Design](https://reader035.vdocuments.site/reader035/viewer/2022062616/5498d216b479592c408b456b/html5/thumbnails/12.jpg)
デフォルトのテーマはこれ!カスタマイズテーマを選択する前のデザイン
![Page 13: Magento meet up Tokyo#1 for Design](https://reader035.vdocuments.site/reader035/viewer/2022062616/5498d216b479592c408b456b/html5/thumbnails/13.jpg)
「 alex (blank)」を設定すると・・・カスタマイズテーマを選択した後のデザイン
![Page 14: Magento meet up Tokyo#1 for Design](https://reader035.vdocuments.site/reader035/viewer/2022062616/5498d216b479592c408b456b/html5/thumbnails/14.jpg)
レイアウトを選択する
ヘッダ
フッダ
左ナビ ホームページ
2カラム左ナビ付き 基本的にヘッダとフッダ部分は固定
![Page 15: Magento meet up Tokyo#1 for Design](https://reader035.vdocuments.site/reader035/viewer/2022062616/5498d216b479592c408b456b/html5/thumbnails/15.jpg)
レイアウトを選択する
ヘッダ
フッダ
右ナビホームページ
2カラム右ナビ付き 基本的にヘッダとフッダ部分は固定
![Page 16: Magento meet up Tokyo#1 for Design](https://reader035.vdocuments.site/reader035/viewer/2022062616/5498d216b479592c408b456b/html5/thumbnails/16.jpg)
レイアウトを選択する
ヘッダ
フッダ
ホームページ
1カラムレイアウト 基本的にヘッダとフッダ部分は固定
![Page 17: Magento meet up Tokyo#1 for Design](https://reader035.vdocuments.site/reader035/viewer/2022062616/5498d216b479592c408b456b/html5/thumbnails/17.jpg)
レイアウトを選択する
ヘッダ
フッダ
ホームページ
3カラムレイアウト 基本的にヘッダとフッダ部分は固定
右ナビ左ナビ
![Page 18: Magento meet up Tokyo#1 for Design](https://reader035.vdocuments.site/reader035/viewer/2022062616/5498d216b479592c408b456b/html5/thumbnails/18.jpg)
レイアウトを選択する
レイアウトは個別ページに設定可能
>> それぞれに各ページで設定できる
ヘッダ
フッダ
ホームページ 右ナビ
左ナビ
ヘッダ
フッダ
ホームページ
ヘッダ
フッダ
右ナビホームページ
・ホームページ・カテゴリーページ・商品ページ・その他のページ ( 会社概要など)
商品説明ページ
カテゴリーページ
デモサイトで実際にやってみます。
![Page 19: Magento meet up Tokyo#1 for Design](https://reader035.vdocuments.site/reader035/viewer/2022062616/5498d216b479592c408b456b/html5/thumbnails/19.jpg)
レイアウトを選択する
レイアウトサンプルサイト
http://demo.magentocommerce.com/?___store=modern_theme2
http://freedemo.templates-master.com/f002
main-container col1-layout
main-container col3-layout
col-2-right-layouthttp://testing.magthemes.com/?___store=telescope
![Page 20: Magento meet up Tokyo#1 for Design](https://reader035.vdocuments.site/reader035/viewer/2022062616/5498d216b479592c408b456b/html5/thumbnails/20.jpg)
モジュールのレイアウト ( 表示位置の移動)
「マイカート」表示を移動してみるカテゴリーページ内の「マイカート」ボックスを右列から左へ変更1.
frontend/base/default/template/checkout/cart/sidebar.phtml
app/design/frontend/base/default/layout/checkout.xml
app/design/frontend/alex/default/layout/checkout.xml
Checkout モジュールを含んだファイル
カスタマイズしたテーマの中
コピーする
![Page 21: Magento meet up Tokyo#1 for Design](https://reader035.vdocuments.site/reader035/viewer/2022062616/5498d216b479592c408b456b/html5/thumbnails/21.jpg)
モジュールのレイアウト ( 表示位置の移動)
「マイカート」表示を移動してみるコピーした2. /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.phtml</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>
ここの部分を書き換える
![Page 22: Magento meet up Tokyo#1 for Design](https://reader035.vdocuments.site/reader035/viewer/2022062616/5498d216b479592c408b456b/html5/thumbnails/22.jpg)
モジュールのレイアウト ( 表示位置の移動)
「マイカート」表示を移動してみるコピーした2. /checkout.xml ファイルを開く。
<reference name="right">
<reference name=“left">
「 right 」を「 left 」に書き換える
アップロード
![Page 23: Magento meet up Tokyo#1 for Design](https://reader035.vdocuments.site/reader035/viewer/2022062616/5498d216b479592c408b456b/html5/thumbnails/23.jpg)
スピーチ内容:
<< フラッシュに変わって jQuery を使おう! >>
Magento2. jQuery を使うポイント
![Page 24: Magento meet up Tokyo#1 for Design](https://reader035.vdocuments.site/reader035/viewer/2022062616/5498d216b479592c408b456b/html5/thumbnails/24.jpg)
jQuery を使うポイント jQuery
jQuery が影響しあって動かせない時が多々ある。
注意点:実際に jQuery をコーディングを試みてチェックした限りでは問題はないように見えるが完全ではないかもしれない。
jQuery を使用した場合、Magento サイトでの動作まわりをチェックし注意する事が必要。
![Page 25: Magento meet up Tokyo#1 for Design](https://reader035.vdocuments.site/reader035/viewer/2022062616/5498d216b479592c408b456b/html5/thumbnails/25.jpg)
FTP で Magento の「 piblic_html 」を開き「 js 」フォルダ内に「 jQuery 」フォルダを作成する。( 名前はなんでもいいしディレクトリも任意だが .... )
ここにわかりやすくする為にフォルダを作成
http://jquery.com/から「 jQuery 」 のファイルをダウンロードしここにアップロードする。
最新版: jquery-1.7.min.js
フル版と Minimum 版があるので「 min 」と付いた方を DL
アップロード
1.jQueryjQuery を使うポイント
![Page 26: Magento meet up Tokyo#1 for Design](https://reader035.vdocuments.site/reader035/viewer/2022062616/5498d216b479592c408b456b/html5/thumbnails/26.jpg)
/public_html/app/design/frontend/base/default/layout/page.xmlに以下の記述をする。2.
default/layout/page.xml
jQuery を使うポイント jQuery
![Page 27: Magento meet up Tokyo#1 for Design](https://reader035.vdocuments.site/reader035/viewer/2022062616/5498d216b479592c408b456b/html5/thumbnails/27.jpg)
<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>
<action method="addJs"><script>jquery/jquery-1.7.min.js</script></action>
<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>
<action method="addJs"><script>lib/ccard.js</script></action> <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>
prototype.jsの下に jquery-1.7.min.js に記述を追加
ここの 3 行はデモでトップページ表示した jquery のサンプルに必要なファイルを追加した
バックエンドでキャッシュをクリア3.
![Page 28: Magento meet up Tokyo#1 for Design](https://reader035.vdocuments.site/reader035/viewer/2022062616/5498d216b479592c408b456b/html5/thumbnails/28.jpg)
バックエンドでキャッシュをクリア3.
<action method="addJs"><script>prototype/prototype.js</script></action>
<action method="addJs"><script>jquery/jquery1.7.min.js</script></action>
この記述の後に・・・リンクさせたい js ファイルを書く
![Page 29: Magento meet up Tokyo#1 for Design](https://reader035.vdocuments.site/reader035/viewer/2022062616/5498d216b479592c408b456b/html5/thumbnails/29.jpg)
4. app/design/frontend/base/default/template/page/html/head.phtml に以下以下の記述をする。
template/page/html/head.phtml
jQuery を使うポイント jQuery
![Page 30: Magento meet up Tokyo#1 for Design](https://reader035.vdocuments.site/reader035/viewer/2022062616/5498d216b479592c408b456b/html5/thumbnails/30.jpg)
<?php echo $this->getCssJsHtml() ?>
の下に
<script type="text/javascript"> var $j = jQuery.noConflict();
<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') ?>'; 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();
$j(function(){ $j(".open").click(function(){ $j("#slideBox").slideToggle("slow"); }); });
$j(document).ready(function() {$j('.twilight-show').twilight();
});</script>
<style> </style>
<?php echo $this->getChildHtml() ?><?php echo $this->helper('core/js')->getTranslatorScript() ?><?php echo $this->getIncludes() ?>
ここの部分はそれぞれの jQuery のコードを記述する
1.#slideBox 2. twilight-show の 2 つの jQuery が記述されている
※ $j(“#slideBox”) 部分の「 $j 」に注意!全ての「 $ 」の後に「 j 」が必要
.open{ background: #fc6; color: #fff; cursor: pointer; width:45px; padding: 10px } #slideBox{ padding: 10px; border: 1px #ccc solid; display:none; }
CSS をここに記述してもOK!!
![Page 31: Magento meet up Tokyo#1 for Design](https://reader035.vdocuments.site/reader035/viewer/2022062616/5498d216b479592c408b456b/html5/thumbnails/31.jpg)
<?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() ?>
![Page 32: Magento meet up Tokyo#1 for Design](https://reader035.vdocuments.site/reader035/viewer/2022062616/5498d216b479592c408b456b/html5/thumbnails/32.jpg)
5. バックエンドのCMS- 静的ページ - ホーム - などに jQuery のコーディングを。
2 つの jQuery のサンプルをコーディングしてみる
jQuery を使うポイント jQuery
![Page 33: Magento meet up Tokyo#1 for Design](https://reader035.vdocuments.site/reader035/viewer/2022062616/5498d216b479592c408b456b/html5/thumbnails/33.jpg)
トップページに SlideBox と twilight-show が表示され、 Magento の機能と同時に動作する。
template/page/html/head.phtml
var $j = jQuery.noConflict(); が重要!!