Magento meet up Tokyo#1 for Design

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

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

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

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

Magentoインストール

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

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

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

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

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

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

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

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

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

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

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

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

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

レイアウトを選択する 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

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

モジュールのレイアウト(表示位置の移動）コピーした /checkout.xml ファイルを開く。<default>  ここの部分を書き換える <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>

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

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

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

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

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

<layout version="0.1.0"> <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> バックエンドでキャッシュをクリア

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

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

<?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() ?>

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

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

Magento meet up Tokyo#1 for Design

by Miho Nakano on Nov 21, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 6

Statistics

Magento meet up Tokyo#1 for Design — Presentation Transcript