OSC2010Kansai@Kobeで使用したMagentoのデザインカスタマイズ資料です

1. Magento
2010/03/13
Magento-JP User Group
2010 3 14

2. •
• Magento
• Twitter@hirokazu_nishi
2010 3 14

3. • Magento
• Magento
• XML
• Block
•
• Tips
2010 3 14

4. Magento
2010 3 14

5. app code core
community
local
design frontend
adminhtml
etc
locale
lib
js javascript
skin frontend
adminhtml
2010 3 14

6. 2010 3 14

7. design frontend default default layout XML
locale
template
foo bar
2010 3 14

8. design frontend default default layout XML
locale
template
foo bar
2010 3 14

9. design frontend default default layout XML
locale
template
foo bar
2010 3 14

10. Magento
2010 3 14

11. •
•
•
2010 3 14

12. -Scalena News-
2010 3 14

13. <?php $collection = $this->getItems(3); ?>
<?php if ( count($collection) == 0 ) : ?>
<p><?php echo $this->__('No news yet...'); ?></p>
<?php else : ?>
<dl>
<?php foreach ( $collection as $_item ) : ?>
<dt><a href="<?php echo Mage::helper('snews')->getUrl($_item['identifier']); ?>"><?php
echo $_item['title']; ?></a></dt>
<dd><?php echo $_item['date']; ?></dd>
<dd>
<?php if ( Mage::helper('snews')->getListLimitDescription() == 0 || strlen($_item
['description']) < Mage::helper('snews')->getListLimitDescription() ) : ?>
<?php echo $_item['description']; ?>
<?php else : ?>
<?php echo substr($_item['description'], 0, Mage::helper('snews')-
>getListLimitDescription()); ?>...
<?php endif; ?>
</dd>
<dd><a href="<?php echo Mage::helper('snews')->getUrl($_item['identifier']); ?>"><?php
echo $this->__('Learn more...'); ?></a></dd>
<?php endforeach; ?>
</dl>
<?php endif; ?>
2010 3 14

14. • if endif;
• foreach endforeach;
• $this->hogehoge
• PHP
2010 3 14

15. •
• XML
2010 3 14

16. • page
•
•
2010 3 14

17. XML
2010 3 14

18. XML
• XML
•
•
• XML
2010 3 14

19. 2010 3 14

20. 2010 3 14

21. XML
2010 3 14

22. XML
-Scalena News-
2010 3 14

23. <?xml version="1.0"?>
<layout version="0.1.0">
! <default>
! ! <!--
! ! <reference name="right">
! ! ! <block type="snews/block" name="snews.block" as="newsBlock" template="scalena/
news/block.phtml"/>
! ! </reference>
! ! -->
! </default>
! <snews_index_index>
<reference name="root">
<action method="setTemplate"><template>page/2columns-right.phtml</
template></action>
</reference>
<reference name="content">
<block type="snews/items" name="snews.news" template="scalena/news/
news.phtml">
! <block type="snews/pagination" name="snews.pagination" as="pagination"
template="scalena/news/pagination.phtml"/>
</block>
</reference>
</snews_index_index>
<snews_index_view>
<reference name="root">
<action method="setTemplate"><template>page/2columns-right.phtml</
template></action>
</reference>
<reference name="content">
<block type="snews/item" name="snews.detail" template="scalena/news/news-
detail.phtml" />
</reference>
</snews_index_view>
</layout>
2010 3 14

24. • block
• reference
• action
• remove
2010 3 14

25. block
•
•
• <block type=”foo” name=”foo”
template=”foo.phtml” />
2010 3 14

26. <?xml version="1.0"?>
<layout version="0.1.0">
! <default>
! ! <!--
! ! <reference name="right">
! ! ! <block type="snews/block" name="snews.block" as="newsBlock" template="scalena/
news/block.phtml"/>
! ! </reference>
! ! -->
! </default>
! <snews_index_index>
<reference name="root">
<action method="setTemplate"><template>page/2columns-right.phtml</
template></action>
</reference>
<reference name="content">
<block type="snews/items" name="snews.news" template="scalena/news/
news.phtml">
! <block type="snews/pagination" name="snews.pagination" as="pagination"
template="scalena/news/pagination.phtml"/>
</block>
</reference>
</snews_index_index>
<snews_index_view>
<reference name="root">
<action method="setTemplate"><template>page/2columns-right.phtml</
template></action>
</reference>
<reference name="content">
<block type="snews/item" name="snews.detail" template="scalena/news/news-
detail.phtml" />
</reference>
</snews_index_view>
</layout>
2010 3 14

27. reference
• name=”foo”
• <reference name=”foo”>
2010 3 14

28. <?xml version="1.0"?>
<layout version="0.1.0">
! <default>
! ! <!--
! ! <reference name="right">
! ! ! <block type="snews/block" name="snews.block" as="newsBlock" template="scalena/
news/block.phtml"/>
! ! </reference>
! ! -->
! </default>
! <snews_index_index>
<reference name="root">
<action method="setTemplate"><template>page/2columns-right.phtml</
template></action>
</reference>
<reference name="content">
<block type="snews/items" name="snews.news" template="scalena/news/
news.phtml">
! <block type="snews/pagination" name="snews.pagination" as="pagination"
template="scalena/news/pagination.phtml"/>
</block>
</reference>
</snews_index_index>
<snews_index_view>
<reference name="root">
<action method="setTemplate"><template>page/2columns-right.phtml</
template></action>
</reference>
<reference name="content">
<block type="snews/item" name="snews.detail" template="scalena/news/news-
detail.phtml" />
</reference>
</snews_index_view>
</layout>
2010 3 14

29. action
• block
• block
•
• <action method=”foo”> </
action>
2010 3 14

30. <?xml version="1.0"?>
<layout version="0.1.0">
! <default>
! ! <!--
! ! <reference name="right">
! ! ! <block type="snews/block" name="snews.block" as="newsBlock" template="scalena/
news/block.phtml"/>
! ! </reference>
! ! -->
! </default>
! <snews_index_index>
<reference name="root">
<action method="setTemplate"><template>page/2columns-right.phtml</
template></action>
</reference>
<reference name="content">
<block type="snews/items" name="snews.news" template="scalena/news/
news.phtml">
! <block type="snews/pagination" name="snews.pagination" as="pagination"
template="scalena/news/pagination.phtml"/>
</block>
</reference>
</snews_index_index>
<snews_index_view>
<reference name="root">
<action method="setTemplate"><template>page/2columns-right.phtml</
template></action>
</reference>
<reference name="content">
<block type="snews/item" name="snews.detail" template="scalena/news/news-
detail.phtml" />
</reference>
</snews_index_view>
</layout>
2010 3 14

31. remove
•
• <remove name=”foo”/>
•
2010 3 14

32. • CMS
•
•
• XML
2010 3 14

33. Block
2010 3 14

34. Block
• XML block
• .phtml
• XML public
• XML
2010 3 14

35. Block
<block type="foo/foo" name="foo.foo">
<block type="foo/bar" name="foo.bar" as="bar"/>
</block>
2010 3 14

36. • $this->getChildHtml(‘foo’);
•
2010 3 14

37. • Mage_Core_Model_Layout
createBlock
• core grep
• XML
2010 3 14

38. • CMS XML
•
• Free_CMS
2010 3 14

39. • 1.3
{{block type=”cms/block” block_id=”hoge”
template=”cms/content.phtml”}}
• 1.4
{{widget type="cms/widget_block"
template="cms/widget/static_block/
default.phtml" block_id="5"}}
2010 3 14

40. • <block type=”cms/block”
name=”hoge” (before|after)=”foo”>
<action method=”setBlockId”>
hoge
</action>
</block>
2010 3 14

41. 2010 3 14

42. • HTML
• JS CSS
•
2010 3 14

43. •
OK
•
• CSS JS
2010 3 14

44. Tips
2010 3 14

45. <remove name=”breadcrumbs” />
<reference name=”breadcrumbs”>
<action method=”addCrumnb”>
<label>home</label>
<params>
<label>home</label>
<title> </title>
<link>home</link>
<first>true</first>
</params>
</action>
<action method=”addCrumnb”>
<label>foofoo</label>
<params>
<label> </label>
<title> </title>
<link/>
<last>true</last>
</params>
</action>
</reference>
2010 3 14

46. <reference name=”top.links”>
<action method=”addLink” translate=”label title” module=”customer”>
<label> </label>
<url>/hogehoge</url>
<title> </title>
<prepare/>
<urlParams/>
<position>90</position>
</action>
<action method=”addLink” translate=”label title” module=”customer”>
<label> </label>
<url>/fugefuge</url>
<title> </title>
<prepare/>
<urlParams/>
<position>100</position>
</action>
</reference>
2010 3 14

47. 2010 3 14