Tutorials Magento 004 : Layout, Block và Template trong Magento có ý nghĩa gì?

Những nhà phát triển mới làm việc với magento thường bị nhầm nhọt 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ó công dụng 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 phối hợp cả mã html và php (có đuôi là phtml). Bên trong file template có sử dụng $this để reference tới đối tượng block của nó.

Các sản phẩm Magento của chúng tôi :

- Magento 2 Checkout

- Magento multi vendor

- online product designer

1. Block

Magento chia block thành 2 loại|kiểu: content block và structure block.

- Structural Block: đây là những block được tạo ra để định dạng địa điểm cho những block khác trong một page. Hãy lấy thí 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 content 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 kiến trúc

– Mỗi vùng cấu trúc có những content block. Magento sẽ tụ hội 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 system sẽ trả lại kết quả sau cùng cho trình duyệt web phần nội dung đã được định dạng địa điểm.

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:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="?php echo $this->getLang() ?>" lang="<?php echo $this->getLang() ?>">
  3. <head>
  4. <?php echo $this->getChildHtml('head') ?>
  5. </head>
  6. <body class="page-popup <?php echo $this->getBodyClass()?$this->getBodyClass():'' ?>">
  7. <?php echo $this->getChildHtml('content') ?>
  8. <?php echo $this->getChildHtml('before_body_end') ?>
  9. <?php echo $this->getAbsoluteFooter() ?>
  10. </body>
  11. </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

  1. <layout version="0.1.0">
  2. <default>
  3. <block type="page/html" name="root" output="toHtml" template="magentotutorial/helloworld/simple_page.phtml" />
  4. </default>
  5. </layout>

* Bước 2: tạo file template simple_page.phtml

app/design/frontend/base/default/template/magentotutorial/helloworld/simple_page.phtml

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>Hello World</title>
  6. <style type="text/css">
  7. body
  8. background-color:#f00;
  9. </style>
  10. </head>
  11. <body>
  12. </body>
  13. </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():

  1. public function indexAction()
  2. $this->loadLayout();
  3. $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?".2 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 sau.

Trong bài viết vẫn còn rất nhiều chỗ thiếu sót và mong được sự góp ý của tất cả các anh chị. Cảm ơn và hẹn gặp lại ở bài học tiếp theo. :)