Weitere ähnliche Inhalte
Ähnlich wie Magento meet up Tokyo#1 for Design (20)
Magento meet up Tokyo#1 for Design
- 4. スピーチ内容:
a. まずは日本語化
b. カスタマイズテーマを作成する
c. ヘッダとフッタ、ロゴの部分はバックエンドで
d. レイアウトを選択する
e. モジュールのレイアウト(表示位置の移動)
- 6. バックエンドの日本語化
キャッシュ管理
https://github.com/rack990/Magento-Japanese-Translation
ここにzip形式の「ja_JP」フォルダがあるのでFTP経由で上記のディレク
トリにアップするだけ。
- 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も同様なディレクトリに・・・・
- 14. レイアウトを選択する
基本的にヘッダとフッダ部分は固定
ヘッダ
左ナビ ホームページ
フッダ
- 15. レイアウトを選択する
基本的にヘッダとフッダ部分は固定
ヘッダ
ホームページ 右ナビ
フッダ
- 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"> アップロード
- 24. jQuery を使うポイント
jQueryが影響しあって動かせない時が多々ある。
注意点:実際にjQueryをコーディングを
試みてチェックした限りでは問題はないように
見えるが完全ではないかもしれない。
jQuery を使用した場合、
Magentoサイトでの動作まわりを
チェックし注意する事が必要。
- 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>
バックエンドでキャッシュをクリア
- 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() ?>