Giáo trình magento part 6- Magento Layouts, Blocks and Templates

 

Khác với nhiều hệ thống MVC nổi tiếng. Magento action controller ko truyền đối tượng data sang view . Thay vào đó , view trực tiếp quan hệ với system models để lấy các thông tin nó cần để hiển thị

View sẽ được chia thành nhiều block và template. Block là PHP object và template là file raw PHP. Mỗi block lien kết với 1 file template.

A quick example

Tìm file dưới đây

app/design/frontend/base/default/template/catalog/product/list.phtml

 <?php $_productCollection=$this->getLoadedProductCollection() ?>
<?php if(!$_productCollection->count()): ?> <div class=”note-msg”>
<?php echo $this->__(“There are no products matching the selection.”) ?>
</div> <?php else: ?>

Với đoạn code trên method getLoadedProductCollection được tìm thấy trong block Mage_Catalog_Block_Product_List

File: app/code/core/Mage/Catalog/Block/Product/List.php

 

Nesting Blocks ( Nest là cấu trúc dạng cây phức tạp, trong mảng chứa nhiều mảng khác và trong các mảng khác đấy có thể chứa nhiều mảng khác nữa) 

File: app/design/frontend/base/default/template/page/one-column.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” 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>

 

Trong file trên có đoạn code và bạn thấy getChildHtml method . Method này sẽ render ra các block con của block có template là file này one-column.phtml

Trong ví dụ này các đồng chí đã thấy 3 block con là head, content và before_body_end. Trong các block con đó có thể còn nhiều block con khác và file template của nó cũng gọi getChildHtml. Bằng cách gọi như thế toàn bộ giao diện web được tạo ra

The Layout

Tôi sẽ đi vào 1 ví dụ cụ thể giống để bạn có thể hiểu rõ thêm về layout trong magento lúc đầu tôi thấy khó hiểu sau làm 1 hồi là tự ngộ ra nguyện lý của nó

Tạo file

app/design/frontend/base/default/layout/local.xml

với nội dung

<layout version=”0.1.0″>
<default>
<block type=”page/html” name=”root” output=”toHtml” template=”magentotutorial/helloworld/simple_page.phtml” />
</default>
</layout>

sau đó tạo file này

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

với nội dung sau

<!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>

Tiếp theo sửa action indexAction bài trước đã làm

public function indexAction() {
//remove our previous echo
//echo ‘Hello Index!';
$this->loadLayout();
$this->renderLayout();
}

Clear cache và load lại ví dụ hello world các bạn sẽ thấy giao diện mới cả site đỏ lòm như tiết canh

Vậy Chuyện gì đã xảy ra ; các bạn cố gắng clear từng dòng code 

Bạn nên cài thêm extension Layoutviewer để có thể hiểu được rõ hơn magento làm gì với layout

Khi chạy url :

http://example.com/helloworld/index/index?showLayout=page

Nó sẽ show cho bạn 1 file XML layout của request trên. Đó là file layout config mà magento sẽ căn cứ vào đó để tạo ra giao diện nó dùng làm gì tí nữa tính sau giờ quay lại đoạn code trên

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>

– thẻ <default> là tên handle ; handle và url có quan hệ với nhau. handle default là handle mặc định cho tất cả .

-Nếu layout chỉ cho 1url http://example.com/helloworld/index/index thì thẻ </default> phải chuyển thành <helloworld_index_index>

Các thẻ này gọi là handles

khi bạn cài extension ở trên thì chạy

http://example.com/helloworld/index/index?showLayout=handles sẽ thấy các handle của 1 request

  1. default
  2. STORE_bare_us
  3. THEME_frontend_default_default
  4. helloworld_index_index
  5. customer_logged_out

Có dạng kiểu này thôi còn sẽ khác tùy config của bạn cái số 4 là handle của 1 request duy nhất

<layout version=”0.1.0″>
<helloworld_index_index>
<block type=”page/html” name=”root” output=”toHtml” template=”magentotutorial/helloworld/simple_page.phtml” />
</helloworld_index_index>
</layout>

 

Nếu file layout như thế này thì chỉ duy nhất 1 link sẽ có giao diện là trang simple_page.phtml .

=> giờ thì bạn đã biết cách sửa layout cho trang nay và giữ nguyên cho trang khác rồi nhé

 

Đây là 1 cách để update 2 cái handle dùng chung 1 layout

<customer_account_index>
<!– … –>
<update handle=”customer_account”/>
<!– … –>
</customer_account_index>

Nó nói rằng request với customer_account_index Handle sẽ được add trong blocks từ <customer_account /> Handle.

=> nghe khó hiểu không. Code thử đi để biết thằng nào là con thằng nào và nó hoạt động thế nào ?

 

Ví dụ áp dụng

làm thêm controller actionGoodbye cũng render ra layout như actionHello

http://example.com/helloworld/index/goodbye

update thêm vào  local.xml

<layout version=”0.1.0″>
<!– … –>
<helloworld_index_goodbye>
<update handle=”helloworld_index_index” />
</helloworld_index_goodbye>
</layout>

=> ví dụ để test đoạn ở trên đây nhé

clearcache rồi chạy 2 cái này xem

http://example.com/helloworld/index/index

http://example.com/helloworld/index/goodbye

**** Chú ý đang dùng theme nào thì phải viết template vào folder tương ứng của theme đó

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

Khi theme mặc định là default thì file có đường dẫn như này .

 

Thêm content block

<helloworld_index_index>
<block type=”page/html” name=”root” output=”toHtml” template=”magentotutorial/helloworld/simple_page.phtml”>
<block type=”customer/form_register” name=”customer_form_register” template=”customer/form/register.phtml”/>
</block>
</helloworld_index_index>

=> block  có dạng cha con rồi đấy thằng con được bọc bởi thằng cha

Trong template của thằng cha simple_page.phtml gọi

<?php echo $this->getChildHtml(‘customer_form_register’); ?> thì sẽ in ra template của thằng con ở nơi gọi

Cách khác để sửa template 

<layout version=”0.1.0″>
<helloworld_index_index>
<reference name=”root”>
<action method=”setTemplate”>
<template>magentotutorial/helloworld/simple_page.phtml</template>
</action>
<block type=”page/template_links” name=”top.links”/>
<block type=”customer/form_register” name=”customer_form_register” template=”customer/form/register.phtml”/>
</reference>
</helloworld_index_index>
</layout>

 

Chú ý có tag <action> tag này gọi ra 1 public Method là setTemplate và param ở dưới để chỉ ra tên template sẽ thay thế template gốc

 

Bắt đầu từ đây là khó hơn nhiều rồi. Bạn nên làm theo các ví dụ. Mình sẽ update video hướng dẫn sau. Nếu học trực tiếp mình chỉ cần chỉ 15 phút là bạn sẽ làm được tốt ví dụ này .Nhưng tự học thì các bạn phải vất vả hơn thôi.

 

You may also like...

2 Responses

  1. Hoàng says:

    <!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”>

    Hello World

    body {
    background-color:#f00;
    }

    đoạn này có đôi chút vấn đề. do nó mà mất cả tiêng đồng hồ. sửa lại bỏ bớt cả đống mới ra
    dù sao cũng cám ơn bài viết, dù là bài dịch từ bên alanstorm nhưng a nói hay và dễ hiểu hơn là đọc tiếng anh thuần

  2. Cảnh says:

    skype của bạn là gì thế? Mình hỏi 1 chỗ . mình cũng mới học thôi

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">