Layout - Tìm hiểu về thiết kế layout trong Magento

Layout - Tìm hiểu về thiết kế layout trong Magento

  01:27    Võ Quốc Duy

---

- Layout trong magento được định nghĩa trong các file .xml chứa trong thư mục /frontend/.../layout/

- Layout trong Magento là sự kết hợp của default layout và layout updates.

- Mỗi module trong Magento cũng có 1 file layout.xml riêng, bên trong mỗi file này chứa các thẻ handle khác nhau, trong đó có handle <default> sẽ luôn được load.

Default layout: gồm page.xml và local.xml

- page.xml : chứa một block root mà tất cả các trang phải load đó là:

<block type="page/html" name="root" output="toHtml" template="page/3columns.phtml">

</block>

page/html : còn gọi là root block, các block khác đều là con trong block này.

Bên trong Block root này chứa các block structure:

- Block structure ( block cấu trúc ) sẽ chứa các block con bên trong, các block này cũng được <reference name=""> đến thông qua name="", as="" từ các nơi khác ( layout update cho block ), nội dung của block thể hiện trong file .phtml tương ứng của block đó:
- Nếu 1 Block cha được khai báo trong file layout, cùng với việc khai báo các Blocks con bên trong block cha đó, thì file template quy định nội dung .phtml của Block cha sẽ gọi các block con đã khai báo bằng hàm là: <?php echo $this->getChildHtml('ten_block_con') ?>
Sau đây là một số Structure Block và vai trò của chúng:

<block type="page/html_head" name="head" as="head">

</block> => Chứa các file CSS và JS

<block type="core/text_list" name="after_body_start" as="after_body_start" translate="label">

</block> => Các block con trong core/text_list sẽ tự nhiên được load mà không cần gọi hàm getChildHTML('block_name');

<block type="page/html_notices" name="global_notices" as="global_notices" template="page/html/notices.phtml" />

 <block type="page/html_header" name="header" as="header">

</block>

 <block type="page/html_breadcrumbs" name="breadcrumbs" as="breadcrumbs"/>

 <block type="core/text_list" name="left" as="left" translate="label">

</block>

<block type="core/messages" name="global_messages" as="global_messages"/> 

<block type="core/messages" name="messages" as="messages"/>

<block type="core/text_list" name="content" as="content" translate="label">

</block>

<block type="core/text_list" name="right" as="right" translate="label">

</block>

<block type="page/html_footer" name="footer" as="footer" template="page/html/footer.phtml">

</block>

<block type="core/text_list" name="before_body_end" as="before_body_end" translate="label">

</block>

 <block type="core/profiler" output="toHtml" name="core_profiler"/>