Magento meet up Tokyo#1 for Design

タイトル：

1.Magento サイトにおける基本的なデザインカスタマイズ

2.Magento で「 jQuery 」を使うためのポイント ( フラッシュに変わって jQuery を使おう！）

Magento デザインのヒント

所属：スタイルチューン株式会社

名前：中野美穂

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

Magento おけるデザインカスタマイズ自己紹介

CMS との出会い：

最初は DTP デザインから制限が少なく自由度の高いWeb デザインの世界へ・・・

デザインがある程度できてもコーディングやシステムが必要なものが難しい！！CGI 設置など色々試していた頃に最初の CMS「 Joomla 」を知りともかくテストテストテストの日々。

モジュールやテンプレがたくさんあるのが楽しかった。

とういう訳で現在は Magento に魅了されています。

Magento おけるデザインカスタマイズ自己紹介

スピーチ内容：

a. 　まずは日本語化

b. 　カスタマイズテーマを作成する

c. 　ヘッダとフッタ、ロゴの部分はバックエンドで

d. 　レイアウトを選択する

e. 　モジュールのレイアウト ( 表示位置の移動）

Magento1.デザインカスタマイズ

インストール

Magento インストール

とりあえずは「日本語化」する

https://github.com/rack990/Magento-Japanese-Translation

ここに zip 形式の「 ja_JP 」フォルダがあるので FTP 経由で上記のディレクトリにアップするだけ。

キャッシュ管理

アップ後キャッシュをクリア

バックエンドの日本語化



バックエンドが日本語表記に変わるカスタマイズテーマを選択した後のデザイン

Themevariant

基本的にどちらかのディレクトリにカスタマイズした「テーマ」を入れる

テーマに不足なファイルがあるとそのパッケージの「 default 」を読みに行き最終的には「 base 」の「 default 」を読み込む

カスタマイズテーマのディレクトリ構成

READ

実際のディレクトリ「 alex 」の場合「 blank 」をコピー「 custompackages 」の場合「 base 」の「 default 」と上の「 blank 」をコピー

コピーした後で不要なファイルは削除できる。基本的に「 default 」ファイルを変更したものだけがカスタマイズテーマフォルダにあれば OK 。


スキン (css + images)のディレクトリ「 alex 」の場合「 blank 」をコピー「 custompackages 」の場合「 base 」の「 default 」と上の「 blank 」をコピー-- CSS フォルダ-- images フォルダ


Skin も同様なディレクトリに・・・・

バックエンドでの操作 (テーマ選択）

default

default

alex

パッケージ名

テンプレ名

テーマ名

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

alex

デフォルトのテーマはこれ！カスタマイズテーマを選択する前のデザイン

「 alex (blank)」を設定すると・・・カスタマイズテーマを選択した後のデザイン

レイアウトを選択する

ヘッダ

フッダ

左ナビホームページ

2カラム左ナビ付き基本的にヘッダとフッダ部分は固定


ヘッダ

フッダ

右ナビホームページ

2カラム右ナビ付き基本的にヘッダとフッダ部分は固定


ヘッダ

フッダ

ホームページ

1カラムレイアウト基本的にヘッダとフッダ部分は固定


ヘッダ

フッダ

ホームページ

3カラムレイアウト基本的にヘッダとフッダ部分は固定

右ナビ左ナビ


レイアウトは個別ページに設定可能

>> それぞれに各ページで設定できる

ヘッダ

フッダ

ホームページ右ナビ

左ナビ

ヘッダ

フッダ

ホームページ

ヘッダ

フッダ

右ナビホームページ

・ホームページ・カテゴリーページ・商品ページ・その他のページ ( 会社概要など）

商品説明ページ

カテゴリーページ

デモサイトで実際にやってみます。


レイアウトサンプルサイト

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

モジュールのレイアウト ( 表示位置の移動）

「マイカート」表示を移動してみるカテゴリーページ内の「マイカート」ボックスを右列から左へ変更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 モジュールを含んだファイル

カスタマイズしたテーマの中

コピーする

「マイカート」表示を移動してみるコピーした2. /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> <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>

ここの部分を書き換える


「マイカート」表示を移動してみるコピーした2. /checkout.xml ファイルを開く。

<reference name="right">

<reference name=“left">

「 right 」を「 left 」に書き換える

アップロード

スピーチ内容：

<< フラッシュに変わって jQuery を使おう！ >>

Magento2. jQuery を使うポイント

jQuery を使うポイント jQuery

jQuery が影響しあって動かせない時が多々ある。

注意点：実際に jQuery をコーディングを試みてチェックした限りでは問題はないように見えるが完全ではないかもしれない。

jQuery を使用した場合、Magento サイトでの動作まわりをチェックし注意する事が必要。

FTP で Magento の「 piblic_html 」を開き「 js 」フォルダ内に「 jQuery 」フォルダを作成する。( 名前はなんでもいいしディレクトリも任意だが .... ）

ここにわかりやすくする為にフォルダを作成

http://jquery.com/から「 jQuery 」のファイルをダウンロードしここにアップロードする。

最新版： jquery-1.7.min.js

フル版と Minimum 版があるので「 min 」と付いた方を DL

アップロード

1.jQueryjQuery を使うポイント

http://jquery.com/

http://jquery.com/

/public_html/app/design/frontend/base/default/layout/page.xmlに以下の記述をする。2.

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>

<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.

バックエンドでキャッシュをクリア3.

<action method="addJs"><script>prototype/prototype.js</script></action>

<action method="addJs"><script>jquery/jquery1.7.min.js</script></action>

この記述の後に・・・リンクさせたい js ファイルを書く

4. 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();

<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" /><?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!!

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

5. バックエンドのCMS- 静的ページ - ホーム - などに jQuery のコーディングを。

2 つの jQuery のサンプルをコーディングしてみる


トップページに SlideBox と twilight-show が表示され、 Magento の機能と同時に動作する。

template/page/html/head.phtml

var $j = jQuery.noConflict(); 　が重要！！

Magento meet up Tokyo#1 for Design

Design

Transcript of Magento meet up Tokyo#1 for Design