Tut Magento 004: Layouts, Blocks và Templates trong Magento
Blanka Phạm
Posted On March 19, 2014
Những developer mới làm việc với magento thường bị nhầm lẫn layout với hệ thống hiển thị. Bài viết này sẽ cho chúng ta biết chúng kết nối với nhau như thế nào và chúng có vai trò gì trong cái mô hình MVC.
Trong Magento thì tầng View bao gồm có Block và Template. Block là những đối tượng PHP còn Template là những file kết hợp cả mã html và php (có đuôi là phtml). Bên trong file template có sử dụng $this để reference đến đối tượng block của nó.
1. Block
Magento chia block thành hai loại: structure block và content block.
– Structural Block: đây là những block được tạo ra để định dạng vị trí cho những block khác trong một page. Hãy lấy ví dụ với trang chủ của magento default sử dụng three column layout:
- Head
- Left
- Content
- Right
- Footer
– Content Block: Đây là những block nội dung, chúng được hiển thị bên trong những structure block. Mỗi content block thường hiển thị một khối nội dung nào đó thông qua những file template và chèn vào những block cha là structure block.. Hãy em right column trog hình trên có những content blocks nào:
- Minicart
- Recently viewed product
- Newsletter subsription block
- Poll
Khi nhận được 1 request từ người dùng để hiển thị 1 page:
– Magento sẽ load những vùng cấu trúc
– Mỗi vùng cấu trúc có những content block. Magento sẽ tập hợp những block này lại và gán cho các structure block tương ứng theo layout để xử lý đầu ra.
– Cuối cùng hệ thống sẽ trả lại kết quả sau cùng cho trình duyệt phần nội dung đã được định dạng vị trí.
2. Template
Template là những file phtml được đặt trong thư mục design. Chúng bao gồm cả code php và mã html nên có phần mở rộng là phtml. Những file template có tác dụng lấy dữ liệu từ file block và hiển thị.
Ví dụ về file template:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="?php echo $this->getLang() ?>" lang="<?php echo $this->getLang() ?>">
<head>
<?php echo $this->getChildHtml('head') ?>
</head>
<body class="page-popup <?php echo $this->getBodyClass()?$this->getBodyClass():'' ?>">
<?php echo $this->getChildHtml('content') ?>
<?php echo $this->getChildHtml('before_body_end') ?>
<?php echo $this->getAbsoluteFooter() ?>
</body>
</html>
3. Layout
Qua hai phần đầu chúng ta đã hình dung được block là gì và template là gì, chúng có tác dụng gì nhưng vẫn còn có một số vấn đề mà chúng ta chưa hề biết về chúng:
– Làm thế nào để cho magento biết rằng tôi sẽ sử dụng block này trên cái page này?
– Làm thế nào để cho magento biết block nào sẽ được rendering đầu tiên?
– Làm thế nào để có thể gọi hàm getChildHtml trong khi tham số truyền vào không phải là tên của block.
Để các bạn có thể hình dung được dễ dàng hơn mình sẽ đi vào một ví dụ cụ thể, đó là action in “Hello World” ra trình duyệt.
* Bước 1: tạo 1 file layout với tên local.xml
app/design/frontend/base/default/layout/local.xml
<layout version="0.1.0"> <default> <block type="page/html" name="root" output="toHtml" template="magentotutorial/helloworld/simple_page.phtml" /> </default> </layout>
* Bước 2: tạo file template simple_page.phtml app/design/frontend/base/default/template/magentotutorial/helloworld/simple_page.phtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello World</title>
<style type="text/css">
body {
background-color:#f00;
}
</style>
</head>
<body>
</body>
</html>
* Bước 3: trong bước cuối cùng này ta sẽ xem được thành quả bằng cách tạo một action trong một controller bất kỳ và trong đó có gọi hai phương thức loadLayout() và renderLayout():
public function indexAction() {
$this->loadLayout();
$this->renderLayout();
}
Sau khi kết thúc hãy clear cache và refresh lại action vừa viết để thấy kết quả hiển thị.
Trong ví dụ trên thì file layout đã map block page/html với template simple_page.phtml để hiển thị trên tất cả các trang của magento (thẻ default của file layout). Như vậy ta đã trả lời được câu hỏi thứ nhất ở trên “Làm thế nào để cho magento biết rằng tôi sẽ sử dụng block này trên cái page này?”.Hai câu hỏi thứ hai và thứ ba mình sẽ trả lời các bạn trong những bài học tiếp theo.
Trong bài viết vẫn còn rất nhiều chỗ thiếu xót và mong được sự góp ý của tất cả các bạn. Cảm ơn và hẹn gặp lại ở bài học tiếp theo. 🙂
Tham khảo: magestore.com, magentoecommerce.com
