19 August 2014

Block - Liệt kê một số loại Block thường sử dụng trong Magento

Có 2 loại Block cơ bản trong Magento theo chức năng: 
1. Structure Block (Block cấu trúc)
- Hiểu nôm na cho dễ hình, bạn có thể xem block cấu trúc như bộ khung cho hầu hết các trang trong website Magento. Mỗi Block cấu trúc này sẽ chứa nhiều Block con bên trong nó, gọi là Block nội dung.
- Một Block cấu trúc sẽ không là Block con của một Block nào khác, ngoài trừ Block root.
2. Content Block ( Block nội dung )
- Hiểu đơn giản, Block nội dung sẽ là con của một Block cấu trúc nào đó, hay là con của một Block nội dung khác. Đến lược nó có thể là cha của Block nội dung khác nữa, cứ thế cho đến vô tận ( trên lý thuyết ).
- Vậy một trang trong Magento được tạo ra là kết quả của:
+ Số lượng Block cấu trúc được hiển thị hay ẩn đi
+ Vị trí của các Block nội dung bên trong các Block cấu trúc nào mà nó cầu hiển thị
+ Sự sắp xếp vị trí của các Block nội dung trong cùng 1 Block cấu trúc.
+ Sự sắp xếp vị trí các Block nội dung con bên trong một Block nội dung khác.
+ Ẩn hay hiện của một Block nội dung.


Nếu phân cấp Block theo Class ( lớp ) mà Block sử dụng, hay Block Type, thì trong Magento ta có các loại Block sau:

core/template: 
This block renders a template defined by its template attribute. The majority of blocks defined in the layout are of type or subtype of core/template.

page/html: 
This is a subtype of core/template and defines the root block. All other blocks are child blocks of this block.

page/html_head: 
Defines the HTML head section of the page which contains elements for including JavaScript, CSS etc.

page/html_header:
Defines the header part of the page which contains the site logo, top links, etc.

page/template_links: 
This block is used to create a list of links. Links visible in the footer and header area use this block type.

core/text_list: 
Các Block như content, left, right đều là core/text_list. Khi Block này được render, tất cả các block con của nó ( bên trong trực tiếp hay <reference> đến nó ) cũng được render ra tự động mà không cần gọi method  getChildHtml().
Ví dụ: tạo một Block core/text_list tên "postscript" rỗng trong tất cả các trang website
<reference name="root">
<block type="core/text_list" name="postscript" as="postscript" translate="label">
<label>Page Postscript</label>
</block>
</reference>
Tại một trang cms page <cms_index_index> ta tham chiếu đến Block core/text_list "postscript" ở trên, và thêm vào đó 1 Static Block tên "block_home_postscript". Và một Block page/html_wrapper bao ngoài Static Block này dược render ra thành <div class="block_home_postscript std"></div>
<cms_index_index>
  <reference name="postscript">
<block type="page/html_wrapper" name="i_block_home_postscript">
<action method="setElementClass"><value>block_home_postscript std</value></action>
<block type="cms/block" name="block_home_postscript">
<action method="setBlockId"><block_id>block_home_postscript</block_id></action>
</block>
</block>
  </reference>

</cms_index_index>

page/html_wrapper: 
Block này sẽ tạo 1 <div></div> (default) bao lấy các Block con được render bên trong nó. Có thể dùng Tag name khác ngoài <div> tag thông qua <action> setHtmlTagName
Ví dụ: thực hiện code này trong file  layout_name.xml
<block type="page/html_wrapper" name="i_block_cms_page_top" before="-">
<action method="setElementClass"><value>block_cms_page_top std</value></action>
<block type="cms/block" name="block_cms_page_top">
<action method="setBlockId"><block_id>block_cms_page_top</block_id></action>
</block>
</block>
Kết quả sẽ tạo <div class="block_cms_page_top std"> </div> bao lấy Block name="block_cms_page_top" bên trong

page/html_breadcrumbs: 
This block defines breadcrumbs on the page.

page/html_footer: 
Defines footer area of page which contains footer links, copyright message etc.

core/messages: 
This block renders error/success/notice messages.

page/switch:
This block can be used for the language or store switcher.

This is a list of only commonly used block types. There are many other block types which are used in advanced theme implementations.

No comments:

Post a Comment

Hãy thoải mái khi gửi nhận xét và câu hỏi cho Quốc Duy. Chân thành cảm ơn