Magento 2 - Layout Blocks Template - Phần 2

Trong bài viết trên blog này, chúng tôi sẽ xem làm thế nào để thêm file layout và block vào module của bạn

Trong blog trước đó, chúng tôi tạo ra một module Abc_Hello. Sử dụng các module tương tự, chúng tôi sẽ hiển thị “hello world” một lần nữa nhưng lần này sử dụng block, layout với một cấu trúc trang thích hợp.

Bước 1: Tạo controller

Trong tập tin action World.php trước, chúng tôi đã chỉ đơn giản hiển thị ‘Hello World’. Chúng tôi sẽ loại bỏ và sử dụng hệ thống layout của magento. File World.php action sẽ có nội dung như sau:

<?php
namespace Abc\Hello\Controller\Hello;
 
 
class World extends \Magento\Framework\App\Action\Action
{
    protected $resultPageFactory;
    public function __construct(
        \Magento\Framework\App\Action\Context $context,
        \Magento\Framework\View\Result\PageFactory $resultPageFactory)
    {
        $this->resultPageFactory = $resultPageFactory;       
        return parent::__construct($context);
    }
     
    public function execute()
    {
        return $this->resultPageFactory->create(); 
    } 
}

Ở đây, chúng tôi dùng injected ‘PageFactory’ vào constructor của controller và được tiếp tục sử dụng để khởi tạo các layout trong execute(). Dependency Injection là một trong những thay đổi lớn trong magento 2 và sẽ thảo luận chi tiết sau. Để bây giờ, chỉ cần sử dụng mã này trực tiếp.

Step 2: Layout

Bây giờ chúng ta sẽ thiết lập các tập tin layout cho controller/action của chúng ta. Trong magento 2 tất cả các file layout của một module được đặt tại thư mục view/frontend/layout của một module, chúng tôi cần phải tạo ra một tập tin layout khác nhau. Trong trường hợp này các file của bạn sẽ là

Abc/Hello/view/frontend/layout/abc_hello_world.xml

và nội dung:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">        
    <referenceContainer name="content">
        <block
            template="content.phtml"
            class="Abc\Hello\Block\Main"
            name="abc_test"/>
    </referenceContainer>
</page>

thêm chi tiết về làm thế nào để sử dụng bố trí, khuôn mẫu và ngăn chặn, kiểm tra phát triển hàng loạt chủ đề.

magento 2 cũng hỗ trợ một file layout default.xml, mà được nạp cho tất cả các action của các module

Step 3: Blocks

Bây giờ chúng tôi đã thiết lập các tập tin bố trí, tiếp theo chúng ta cần phải thiết lập tập tin khối. Theo định nghĩa trong cách bố trí của chúng tôi, tập tin khối của chúng tôi sẽ được đặt tại Abc\Hello\Block\Main thư mục.

Các nội dung cho tập tin block sẽ là:

<?php
namespace Abc\Hello\Block;
  
class Main extends \Magento\Framework\View\Element\Template
{   
    public function __construct(
        \Magento\Framework\View\Element\Template\Context $context
    )
    {
        parent::__construct($context);
    }
    protected function _prepareLayout()
    {
         
    }
}

đây là một đơn giản, khối trống rỗng không có chức năng.

Step 4: Template

Bây giờ tập tin khối của chúng tôi được thiết lập, tiếp theo chúng ta cần phải thiết lập các tập tin mẫu. Bản mẫu cho một module một nằm trong “xem / frontend / mẫu” thư mục như vậy chúng ta cần phải tạo ra các tập tin Abc/Hello/view/frontend/templates/content.phtml

Chúng tôi sẽ đoạn code:

<h1><?php echo __('Hello World'); ?></h1>

Bây giờ khi bạn mở url /abc/hello/world, bạn sẽ thấy “Hello world” nhưng với cách bố trí đầy đủ trang (header, footer, vv)

Lưu ý: __()i18n (đa ngôn ngữ) chức năng cho magento 2. Chúng ta nên luôn luôn sử dụng này và không bao giờ trực tiếp hiển thị một câu từ.

Sử lý dữ liệu Template/Block

Truyền dữ liệu từ khối để mẫu, được sử dụng rất thường xuyên. Nó rất đơn giản để làm. Sửa đoạn code sau:

<?php
namespace Abc\Hello\Block;
  
class Main extends \Magento\Framework\View\Element\Template
{   
    public function __construct(
        \Magento\Framework\View\Element\Template\Context $context
    )
    {
        parent::__construct($context);
    }
    protected function _prepareLayout()
    {
        $this->setText('Testing');
    }
}

Như bạn có thể thấy chúng tôi đã thực hiện $this->setText() trong tập tin khối của chúng tôi.

Để truy cập vào này trong file mẫu của chúng tôi, chúng tôi cần phải

<?php echo $block->getText(); ?>

Có một sự khác biệt lớn trong cách thức thực hiện của nó trong magento1. Trong magento1 chúng tôi sử dụng ($ này) biến trong các tập tin mẫu, nhưng trong magento2 chúng tôi đang sử dụng $ khối

Mục đích của Block / Template

Khối tập tin nên chứa yêu cầu tất cả các logic xem, nó không chứa bất kỳ loại html hay css. tập tin khối được cho là có tất cả các logic xem ứng dụng.

Các tập tin mẫu, mặt khác chủ yếu nên chứa tất cả các kịch bản html. Nó sẽ chứa ít logic xem càng tốt. Đây là một thực tế rất quan trọng để làm theo.

Comments