1. [Đánh giá] OPPO Find X8: Đỉnh nóc kịch trần flagship Android giá dưới 20 triệu đồng
    Dismiss Notice
  2. [So sánh TV] Sony Bravia 7 vs. Samsung Q90D – Ai mới xứng danh anh tài?
    Dismiss Notice
cr SS

Nơi khác Tutorials Magento 004 : Layouts, Block & Template trong Magento có vai trò gì?

Thảo luận trong 'Dịch vụ - Tiện ích' bắt đầu bởi elise261092, 19/4/16.

Trạng thái chủ đề:
Không mở trả lời sau này.
  1. elise261092

    elise261092 New Member

    Tham gia ngày:
    21/10/15
    Bài viết:
    13
    Đã được cảm ơn:
    0
    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.
    Bên 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ó.
    Các sản phẩm Magento của chúng tôi :
    - one step checkout magento 2
    - Multi vendor magento
    1. Block

    Magento tách block thành hai loại|kiểu: structure block và content 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 ví dụ với trang chủ của magento default dùng three column layout:
    • Head
    • Left
    • Content
    • Right
    • Footer
    [​IMG]
    - 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 sử dụng để hiển thị 1 trang:
    – Magento sẽ tải những vùng cấu trúc
    – Mỗi vùng kiến trúc có những content block. Magento sẽ hội tụ 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 web phần nội dung đã được định dạng vị trí. ( magento t shirt design tool )
    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' ?>">
    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" 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. Mã:
      <!DOCTYPE html PUBLIC
      Mã:
      "-//W3C//DTD XHTML 1.0 Strict//EN"
    2. Mã:
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
      Mã:
      >
    3. Mã:
      <html xmlns=
      Mã:
      "http://www.w3.org/1999/xhtml"
      Mã:
      >
    4. Mã:
      <head>
    5. Mã:
      <title>Hello World</title>
    6. Mã:
      <style type=
      Mã:
      "text/css"
      Mã:
      >
    7. Mã:
      body
    8. Mã:
      background-color:#f00;
    9. Mã:
      

      10. 

    10. 

      
	
      Mã:
      
	
      </style>
      

      11. 

    11. 

      
	
      Mã:
      
	
      </head>
      

      12. 

    12. 

      
	
      Mã:
      
	
      <body>
      

      13. 

    13. 

    14. 

      
	
      Mã:
      
	
      </body>
      

      15. 

    15. 

      
	
      Mã:
      
	
      </html>
      

      16. 

    * 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. 

    2. $this->loadLayout();
      3. 

    3. $this->renderLayout();
      4. 

    4. 

    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 page 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ứ 3 mình sẽ giải đáp cho 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 bạn. Cảm ơn và hẹn gặp lại ở bài học sau. :)

					
     
    
				
    
			
    
			
			

		
    
		
		
		
		
		
		
		
				
		
    
			
			
    
				
				
					elise261092,
					19/4/16
				
				
				
				
				
				
				
				
				
				
                                
				
				
			
    
			
			
    
				#1
				
				
				
				
			
    
		
    
	
		
		
    
	
    

	
	
	
	

    2. 
			
		
		
	


	

	




	

			
				

					
						
					
				

			
			

			
	











	
		

			
Trạng thái chủ đề:

			
				
	
				
					

						
							Không mở trả lời sau này.

				
			
		

	



	

	

		
Chia sẻ  trang này