0
タイトル:1.Magentoサイトにおける基本的なデザインカスタマイズ2.Magentoで「 jQuery 」を使うためのポイント (フラッシュに変わってjQueryを使おう!)
Magentoおけるデザインカスタマイズ所属:スタイルチューン株式会社名前:中野美穂経歴:はじめはグラフィクデザイナーアシスタント   として広告制作会社で2年ほど広告デザインを   経験しました。   その後は長く通信販売会社で企画や広告・カ...
MagentoおけるデザインカスタマイズCMSとの出会い:最初はDTPデザインから制限が少なく自由度の高いWebデザインの世界へ・・・デザインがある程度できてもコーディングやシステムが必要なものが難しい!!CGI設置など色々試していた頃に最初の...
スピーチ内容:  a. まずは日本語化  b. カスタマイズテーマを作成する  c. ヘッダとフッタ、ロゴの部分はバックエンドで  d. レイアウトを選択する  e. モジュールのレイアウト(表示位置の移動)
Magentoインストール
バックエンドの日本語化                                                          キャッシュ管理https://github.com/rack990/Magento-Japanese-Tr...
カスタマイズテーマを選択した後のデザイン
カスタマイズテーマのディレクトリ構成                 テーマに不足なファイルがあると                 そのパッケージの「default」を読みに行き                 最終的には「base」の「de...
カスタマイズテーマのディレクトリ構成         「alex」の場合「blank」をコピー         「custompackages」の場合         「base」の「default」と上の         「blank」をコピ...
カスタマイズテーマのディレクトリ構成          「alex」の場合「blank」をコピー          「custompackages」の場合          「base」の「default」と上の          「blank...
カスタマイズテーマのバックエンド設定                            default                            default                     alex         ...
カスタマイズテーマを選択する前のデザイン
カスタマイズテーマを選択した後のデザイン
レイアウトを選択する                      基本的にヘッダとフッダ部分は固定        ヘッダ 左ナビ         ホームページ        フッダ
レイアウトを選択する               基本的にヘッダとフッダ部分は固定         ヘッダ     ホームページ    右ナビ         フッダ
レイアウトを選択する                基本的にヘッダとフッダ部分は固定        ヘッダ       ホームページ        フッダ
レイアウトを選択する                基本的にヘッダとフッダ部分は固定        ヘッダ 左ナビ   ホームページ   右ナビ        フッダ
レイアウトを選択する      ヘッダ                               ヘッダ                   カテゴリーページ 左             右                          ...
レイアウトを選択する main-container col1-layout http://demo.magentocommerce.com/?___store=modern_theme2 main-container col3-layoutht...
モジュールのレイアウト(表示位置の移動)       カテゴリーページ内の「マイカート」ボックスを       右列から左へ変更  Checkoutモジュールを含んだファイルfrontend/base/default/template/chec...
モジュールのレイアウト(表示位置の移動)             コピーした                          /checkout.xml ファイルを開く。<default>    <!-- Mage_Checkout --> ...
モジュールのレイアウト(表示位置の移動)   コピーした   /checkout.xml ファイルを開く。<reference name="right">           「right」を「left」に書き換える<reference nam...
スピーチ内容: << フラッシュに変わってjQueryを使おう! >>
jQuery を使うポイント                 jQueryが影響しあって動かせない時が多々ある。                 注意点:実際にjQueryをコーディングを                 試みてチェックした限り...
jQuery を使うポイント FTPでMagentoの「piblic_html」を開き「js」フォルダ内に「 jQuery 」フォルダを作成する。 (名前はなんでもいいしディレクトリも任意だが....)                     ...
jQuery を使うポイント /public_html/app/design/frontend/base/default/layout/page.xml に以下の記述をする。                            default...
<layout version="0.1.0"><!--Default layout, loads most of the pages-->  <default translate="label" module="page">    <labe...
<action method="addJs"><script>prototype/prototype.js</script></action>                    この記述の後に・・・                    リ...
jQuery を使うポイント app/design/frontend/base/default/template/page/html/head.phtml に 以下以下の記述をする。  template/page/html/head.phtml
<meta http-equiv="Content-Type" content="<?php echo $this->getContentType() ?>" /><title><?php echo $this->getTitle() ?></...
<?php echo $this->getCssJsHtml() ?>                 この記述の後に・・・                 コードを書き足す <script type="text/javascript"> va...
jQuery を使うポイント バックエンドの CMS-静的ページ-ホーム-などにjQueryのコーディングを。2つのjQueryのサンプルをコーディングしてみる
トップページにSlideBoxとtwilight-showが表示され、Magentoの機能と同時に動作する。template/page/html/head.phtml                    var $j = jQuery.noC...
Upcoming SlideShare
Loading in...5
×

Magento meet up Tokyo#1 for Design

5,614

Published on

Magento meet up Tokyo#1 for Design

Published in: Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,614
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
24
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Magento meet up Tokyo#1 for Design"

  1. 1. タイトル:1.Magentoサイトにおける基本的なデザインカスタマイズ2.Magentoで「 jQuery 」を使うためのポイント (フラッシュに変わってjQueryを使おう!)
  2. 2. Magentoおけるデザインカスタマイズ所属:スタイルチューン株式会社名前:中野美穂経歴:はじめはグラフィクデザイナーアシスタント として広告制作会社で2年ほど広告デザインを 経験しました。 その後は長く通信販売会社で企画や広告・カタ ログ制作などを担当していました。 その時の知識は大いにECサイトを構築する上で 役立っていると思います。
  3. 3. MagentoおけるデザインカスタマイズCMSとの出会い:最初はDTPデザインから制限が少なく自由度の高いWebデザインの世界へ・・・デザインがある程度できてもコーディングやシステムが必要なものが難しい!!CGI設置など色々試していた頃に最初のCMS「Joomla」を知りともかくテストテストテストの日々。モジュールやテンプレがたくさんあるのが楽しかった。とういう訳で現在はMagentoに魅了されています。
  4. 4. スピーチ内容: a. まずは日本語化 b. カスタマイズテーマを作成する c. ヘッダとフッタ、ロゴの部分はバックエンドで d. レイアウトを選択する e. モジュールのレイアウト(表示位置の移動)
  5. 5. Magentoインストール
  6. 6. バックエンドの日本語化 キャッシュ管理https://github.com/rack990/Magento-Japanese-Translation ここにzip形式の「ja_JP」フォルダがあるのでFTP経由で上記のディレク トリにアップするだけ。
  7. 7. カスタマイズテーマを選択した後のデザイン
  8. 8. カスタマイズテーマのディレクトリ構成 テーマに不足なファイルがあると そのパッケージの「default」を読みに行き 最終的には「base」の「default」を読み込む Theme variant
  9. 9. カスタマイズテーマのディレクトリ構成 「alex」の場合「blank」をコピー 「custompackages」の場合 「base」の「default」と上の 「blank」をコピー コピーした後で不要なファイルは削除できる。 基本的に「default」ファイルを変更したものだ け がカスタマイズテーマフォルダにあればOK。
  10. 10. カスタマイズテーマのディレクトリ構成 「alex」の場合「blank」をコピー 「custompackages」の場合 「base」の「default」と上の 「blank」をコピー -- CSS フォルダ -- images フォルダ Skinも同様なディレクトリに・・・・
  11. 11. カスタマイズテーマのバックエンド設定 default default alex alex
  12. 12. カスタマイズテーマを選択する前のデザイン
  13. 13. カスタマイズテーマを選択した後のデザイン
  14. 14. レイアウトを選択する 基本的にヘッダとフッダ部分は固定 ヘッダ 左ナビ ホームページ フッダ
  15. 15. レイアウトを選択する 基本的にヘッダとフッダ部分は固定 ヘッダ ホームページ 右ナビ フッダ
  16. 16. レイアウトを選択する 基本的にヘッダとフッダ部分は固定 ヘッダ ホームページ フッダ
  17. 17. レイアウトを選択する 基本的にヘッダとフッダ部分は固定 ヘッダ 左ナビ ホームページ 右ナビ フッダ
  18. 18. レイアウトを選択する ヘッダ ヘッダ カテゴリーページ 左 右 右 ホームページ ホームページナビ ナビ ナビ 商品説明ページ フッダ フッダ ヘッダ >> それぞれに各ページで設定できる ホームページ フッダ デモサイトで実際にやってみます。
  19. 19. レイアウトを選択する main-container col1-layout http://demo.magentocommerce.com/?___store=modern_theme2 main-container col3-layouthttp://freedemo.templates-master.com/f002 col-2-right-layouthttp://testing.magthemes.com/?___store=telescope
  20. 20. モジュールのレイアウト(表示位置の移動) カテゴリーページ内の「マイカート」ボックスを 右列から左へ変更 Checkoutモジュールを含んだファイルfrontend/base/default/template/checkout/cart/sidebar.phtmlapp/design/frontend/base/default/layout/checkout.xml コピーする app/design/frontend/alex/default/layout/checkout.xml カスタマイズしたテーマの中
  21. 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> <actionmethod="addItemRender"><type>grouped</type><block>checkout/cart_item_renderer_grouped</block><template>checkout/cart/sidebar/default.phtml</template></action> <actionmethod="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. 22. モジュールのレイアウト(表示位置の移動) コピーした /checkout.xml ファイルを開く。<reference name="right"> 「right」を「left」に書き換える<reference name=“left"> アップロード
  23. 23. スピーチ内容: << フラッシュに変わってjQueryを使おう! >>
  24. 24. jQuery を使うポイント jQueryが影響しあって動かせない時が多々ある。 注意点:実際にjQueryをコーディングを 試みてチェックした限りでは問題はないように 見えるが完全ではないかもしれない。 jQuery を使用した場合、 Magentoサイトでの動作まわりを チェックし注意する事が必要。
  25. 25. jQuery を使うポイント FTPでMagentoの「piblic_html」を開き「js」フォルダ内に「 jQuery 」フォルダを作成する。 (名前はなんでもいいしディレクトリも任意だが....) ここにわかりやすくする為に フォルダを作成 アップロード http://jquery.com/ から「jQuery」 のファイルを ダウンロードしここにアップ ロードする。 最新版:jquery-1.7.min.js フル版とMinimum版があるので 「min」と付いた方をDL
  26. 26. jQuery を使うポイント /public_html/app/design/frontend/base/default/layout/page.xml に以下の記述をする。 default/layout/page.xml
  27. 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. 28. <action method="addJs"><script>prototype/prototype.js</script></action> この記述の後に・・・ リンクさせたいjsファイルを書く<action method="addJs"><script>jquery/jquery1.7.min.js</script></action> バックエンドでキャッシュをクリア
  29. 29. jQuery を使うポイント app/design/frontend/base/default/template/page/html/head.phtml に 以下以下の記述をする。 template/page/html/head.phtml
  30. 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. 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. 32. jQuery を使うポイント バックエンドの CMS-静的ページ-ホーム-などにjQueryのコーディングを。2つのjQueryのサンプルをコーディングしてみる
  33. 33. トップページにSlideBoxとtwilight-showが表示され、Magentoの機能と同時に動作する。template/page/html/head.phtml var $j = jQuery.noConflict(); が重要!!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×