Magento導入顛末記、その３
Posted by admin at 8:28 日時 2011/09/24
Magentoとは、オープンソースのECシステムです。これまでの経過はその１、その２へ。そんなこんなで回り道をしてきましたが、今回からデザインカスタマイズに入って行きます。
で、前回に引き続き作成したテーマに作成したレイアウトXMLをイジイジしていく。ついでだからxmlのソースを大公開しちゃう。
app/design/frontend/[自分のパッケージ名]/[自分のテーマ名]/layout.xml
<?xml version="1.0" ?> <layout> <default> <!-- remove blocks --> <remove name="left.permanent.callout" /> <remove name="right.permanent.callout" /> <remove name="paypal.partner.right.logo" /> <remove name="right.poll" /> <remove name="catalog.compare.sidebar" /> <remove name="cms_footer_links" /> <!-- footer links --> <remove name="footer_links" /> <reference name="footer"> <block type="page/template_links" name="my_footer_links" as="footer_links" template="page/template/links.phtml"> <action method="addLink" translate="label title" module="contacts" ifconfig="contacts/contacts/enabled"><label>Contact Us</label><url>contacts</url><title>Contact Us</title><prepare>true</prepare></action> <action method="addLink" translate="label title" module="catalog" ifconfig="catalog/seo/site_map"><label>Site Map</label><url helper="catalog/map/getCategoryUrl" /><title>Site Map</title></action> <action method="addLink" translate="label title" module="catalog" ifconfig="catalog/seo/site_map"> <label>特定商取引法に基づく表示</label> <url>tokutei</url> <title>特定商取引法に基づく表示</title> <prepare>true</prepare> </action> <action method="addLink" translate="label title" module="catalog" ifconfig="catalog/seo/site_map"> <label>プライバシーポリシー</label> <url>privacy</url> <title>プライバシーポリシー</title> <prepare>true</prepare> </action> </block> </reference> <!-- Mage_Newsletter --> <reference name="right"> <block type="newsletter/subscribe" name="right.newsletter" template="newsletter/subscribe.phtml" before="left.reports.product.viewed" /> <block type="cms/block" name="cms_side_banner"> <action method="setBlockId"><block_id>side_banner</block_id></action> </block> </reference> </default> <!-- Category default layout --> <catalog_category_default> <reference name="root"> <action method="setTemplate"><template>page/2columns-right.phtml</template></action> </reference> <reference name="content"> <reference name="category.products"> <reference name="product_list"> <action method="setColumnCount"><columns>4</columns></action> </reference> </reference> </reference> </catalog_category_default> <catalog_product_view> <reference name="content"> <block type="review/product_view_list" name="product.info.product_additional_data" as="reviews" template="review/product/view/review_summary.phtml" /> </reference> </catalog_product_view> <!-- Catalog search result --> <catalogsearch_result_index> <reference name="root"> <action method="setTemplate"><template>page/2columns-right.phtml</template></action> </reference> <reference name="content"> <reference name="search.result"> <reference name="search_result_list"> <action method="setColumnCount"><columns>4</columns></action> </reference> </reference> </reference> </catalogsearch_result_index> </layout>
<remove name=”hogehoge” />っていうタグは、hogehogeという名前のブロックは要らないから表示しないでね、という指定。要らないって言うけど、そもそもどこで追加されてるのさ？というと、だいたいbaseパッケージのdefaultテーマに入ってるxmlのどれかです。ブロック名はテンプレートパスヒントで探しました。
<reference name=”hogehoge” />っていうタグは、hogehogeという名前のブロックを参照するという指定。参照するっていうけれど、そもそもどこで定義されてるのさ？というと、以下同文。
冒頭の<default>タグの内部でだいたいサイト全体で要らないよっていうブロックと追加したオリジナルのフッターリンクを指定しています。あと、今回3カラムのデザインは使わず2カラムに統一したので、左サイドにあるニュースレターのブロックを右サイドに移動しています。
<catalog_category_default>タグと<catalogsearch_result_index>タグは、それぞれ商品一覧と検索結果に該当します。こちらも2カラムに変更したうえで、一列あたりの表示商品点数を4件に変更しています。これは、デフォルトでは3カラムだったのを2カラムにして商品一覧部分の表示上の幅が広がっているので、1件増やしたものです。
ただこうなると1ページあたりの商品表示数がデフォルトで9件なのですが、一列あたり4件にしたため1件あまってよろしくない。1ページあたりの商品表示数を8件にしたくてさんざん探したのですが、なんとこちらは管理画面の「システム->設定->カタログ->フロントエンド」に設定項目があった！なんで別なんだ、ややこしい。
さて、いらないブロックは<remove name=”hogehoge” />で消せたが、ブロック内の設定はこのような手段がないみたい。例えば、今回はダウンロード販売はしない予定だったので、顧客がログインしたときのダッシュボードからダウンロードのリンクを消したい。リンク自体は<action method=”addLink” />タグで追加されているのだが、どうもremoveLinkメソッドが無いみたい？なので、 app/design/frontend/base/default/layout/downlodable.xml をテーマの方に複製して、<action method=”addLink” />タグをコメントアウト。これでオーバーライドされてコメントアウトしたテーマの方のdownlodable.xmlが使われる。でもちょっとすっきりしない。見つけられなかっただけでremoveLinkメソッド、あるんじゃないかなぁ。
このあたりの、レイアウトXMLのメソッドの調べ方がよく分からなかったので今後の課題。
画面の要素ができてきたら、CSSで表示を調整する。これは作成したテーマのスキンディレクトリ内のスタイルシートをいじればOK。特に変わったことはない。
次に、表示が英語のままになっているところを翻訳していく。直訳機能を使って人に手伝ってもらった。フロントエンドから未翻訳箇所をクリックして訳文を入力するだけなので、手分けするにはありがたい。
それ以外は [自分のテーマ名]/locale/ja_JP/translate.csv にどんどん書いていく。この作業をしていて、翻訳がちゃんとできているテーマをベースにしたほうが作業時間が短縮できることに気づく。
ここまでの作業で大まかにサイトの形にはなっているので、細かいところをテンプレートファイルをつかって調整していく。表示の各部分でどのテンプレートファイルが読み込まれているのかはテンプレートパスヒントで分かるので、それを自分のテーマディレクトリにコピーして修正が基本の流れ。
あとMagentoのいいところとして商品属性を管理画面から自由に追加できるというのがある。WordPressで言うところのカスタムフィールドのようなものだが、入力欄をテキストフィールド・テキストエリア・日付・ドロップダウン・画像などから選べる親切設計。検索に引っ掛けるかどうかなども細かく設定できる。うーん、ということはインデックスの更新について考えなきゃいけないのか。まぁあとで。
表示側では [自分のテーマ名]/template/catalog/product/view.phtmlに
<?php echo $_product->getAttributeName() ?>
という形式でテンプレートに書けばOK。”getAttributeName”の部分は属性のハンドルに依存していて、たとえば”size”という商品属性を表示させたい場合は”getSize”というメソッドが勝手に作られるということだ。便利。
» Displaying Magento custom product attributes on the frontend
あと商品レビュー機能がせっかくあるので、このページの方法で表の画面に表示できるようにした。
» SHOW PRODUCT REVIEWS ON PRODUCT VIEW PAGE
まとめとしては、とにかく<reference>タグが超強力！既存のテーマの仕組みを極力残しながらのレイアウトの変更にも、かなり柔軟に対応できます。ただ、このレイアウトXMLの解説がどこにあるのかよく分からないのが困っているところ。
残り決済のモジュールのテストやメールテンプレートの修正、メルマガ機能の調整などが残っていますが、とりあえず見た目的にはショップだし買えるしという状態にたどり着きました。その２からその３までの期間は、主に商品情報の入力作業に時間がかかりました。その４でたぶん終わります。
