Kinh nghiệm lập trình website mã nguồn mở PHP

Layout, Block và Template trong Magento 2

Hôm nay chúng ta sẽ cùng tìm hiểu về Layout, Block, Template trong Magento 2, sau đó thực hành tạo 1 theme (giao diện) thực tế. Bài viết cung cấp các kỹ năng cần thiết cho cả Frontend lẫn Backend Developer Magento.

Bài này nằm trong loạt bài xây dựng website TMDT Magento 2.

Layout

Khái niệm

Layout là những tập tin có tác dụng khai báo, thiết kế, tập hợp nhiều thành phần (block và template) lại để tạo thành trang web hoàn chỉnh.
Ví dụ: Layout giống như 1 bản vẽ thiết kế ngôi nhà, nó sẽ miêu tả nền móng, vị trí của các thành phần (cánh cổng, cửa sổ, mái nhà…) và nguyên liệu (cổng dùng sắt, cửa sổ dùng gỗ…)
Layout, Block và Template trong Magento 2

Đặc tính

– Layout là file .xml
– Layout có mối liên kết với controller và action, ví dụ như layout catalog_product_view.xml sẽ chịu trách nhiệm bố cục cho trang web của module catalog, controller category, action view: là trang hiển thị nội dung của 1 danh mục sản phẩm. Layout thậm chí còn có thể chỉ định chính xác đối tượng, ví dụ file layout catalog_product_view_type_simple_id_128.xml để xử lý sản phẩm kiểu là simple và có id là 128.
– Trong nhiều module có thể cùng sử dụng trên chung 1 file layout. Sẽ nói kỹ hơn trong phần override layout.
– Sự khác biệt của layout giữa Magento 1 và Magento 2:

Magento 1Magento 2
Magento 1, tên trang cần xử lý là một node nằm trong 1 root node của file layout.xml

<catalog_category_view>
    <block ...>
        <!-- ... -->
    </block>
</catalog_category_view>
Magento 2, thay vì các node nằm chung 1 file, thì tên trang cần xử lý chính là file name. Vd: catalog_category_view:

module-catalog/view/frontend/
layout/catalog_category_view.xml

– 1 layout mẫu:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd" layout="1column" >
    <head>
        <css src="Sample_Module::css/style.css"/>
    </head>
    <body >
        <referenceContainer name="content">
            <block class="Sample\Module\Block\Custom\Form" name="custom_form" template="Sample_Module::custom_form.phtml">
            </block>
        </referenceContainer>
    </body>
</page>

Ta có thể gắn 1 file css vào trang ()
Để thêm nội dung HTML vào trang, bạn sẽ khai báo 1 block class với template file cần thiết.
referenceContainer có thể là vị trí sidebar, header, footer… ngoài content

Có bao nhiêu container ta có thể reference?
Mỗi trang đều có cấu trúc container khác nhau:

After Page Header > page.top

After Page Header Top > top.container

Before Main Columns > columns.top

Before Page Footer > page.bottom

Before Page Footer Container > page.bottom.container

CMS Footer Links > cms_footer_links_container

Compare Link Wrapper > compare-link-wrapper

Main Content Area > content

Main Content Aside > content.aside

Main Content Bottom > content.bottom

Main Content Container > main

Main Content Top > content.top

Mini-cart promotion block > minicart.addons

Page Bottom > before.body.end

Page Footer > footer

Page Footer Container > footer-container

Page Header > header-wrapper

Page Header Container > header.container

Page Header Panel > header.panel

Page Top > after.body.start

Sidebar Additional > sidebar.additional

Sidebar Main > sidebar.main

Trước đây khi mới làm việc với Magento, layout là thứ tôi ghét nhất, vì tự nhiên đang code file PHP, tự nhiên bay qua code XML, rồi PHTML tùm lum, cảm thấy code Mage như mớ hỗn độn cám lợn. Nhưng thật ra đó mới chính là điểm hay của Mage hơn các framework khác. Bởi vì nhờ hệ thống layout này mà bạn có thể sửa bất cứ trang web có sẵn nào mà không phải sửa core, nếu không thì sửa template bắt buộc phải sửa file gốc. Đó chính là kiểu thiết kế dành cho end-user là các developers.

Tùy biến layout

Trong Magento, khi muốn tùy biến trang bằng layout, bạn không nên sửa core, cũng không cần copy nguyên layout core ra ngoài để chỉnh sửa, bạn chỉ cần tạo 1 file mới và gắn thêm đoạn code của bạn, ví dụ:
Default Magento có file layout: vendor\magento\module-catalog\view\frontend\layout\catalog_product_view.xml
Khi cần custom chúng ta sẽ tạo 1 theme mới và thêm: app\design\frontend\ \Magento_Catalog\layout\catalog_product_view.xml

1. Đổi cấu trúc của trang
Ví dụ thay đổi layout của trang Tìm Kiếm từ mặc định “1-column” thành “2-column with left bar”. Để làm vậy ta tạo 1 file tên là catalogsearch_advanced_index.xml trong theme với nội dung:

<page layout="2columns-left" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
...
</page>

2. Thêm file thư viện: CSS, JS, Font
JavaScript, CSS và các file static được gắn vào thẻ, trong Magento thẻ được sử lý bởi:
vendor\magento\module-theme\view\frontend\layout\default_head_blocks.xml.
Vậy để tự add file static ta cần tạo file giống vậy trong theme của mình:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <!-- Add local resources -->
    	<css src="css/my-styles.css"/>
    
        <!-- The following two ways to add local JavaScript files are equal -->
        <script src="Magento_Catalog::js/sample1.js"/>
        <link src="js/sample.js"/>
		
    	<!-- Add external resources -->
	<css src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" src_type="url" />
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" src_type="url" />
        <link rel="stylesheet" type="text/css" src="http://fonts.googleapis.com/css?family=Montserrat" src_type="url" />
    </head>
</page>

Ngoài ra bạn còn có thể kham khảo thêm nhiều chiêu với layout tại https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/layouts/xml-manage.html

Block

Khái niệm

Các Block (khối) là nơi viết các hàm, phương thức sử dụng nhiều lần hoặc các logic phức tạp thay vì viết ngoài template, giúp template đảm nhiệm vai trò hiển thị ra trình duyệt rõ ràng và đơn giản hơn.
Block được khai báo trong layout và có dạng là 1 class PHP.

<block cacheable="false" class="My\Subscription\Block\Frontend\Profile\Edit" template="My_Subscription::profile/subscription-profile-edit.phtml" />

Custom block và core block

Default Magento đã có sẵn vài class Block đơn giản, ta có thể sữ dụng ngay mà không cần tạo 1 class Block mới:

\Magento\Framework\View\Element\Text

Renders a simple text

\Magento\Framework\View\Element\Text\ListText

Renders a list of child blocks

Messages

 

Redirect

 

\Magento\Framework\View\Element\Template

phtml

\Magento\Framework\View\Element\Html\Links

link

\Magento\Framework\View\Element\AbstractBlock

render auto method _toHtml()

Ví dụ khi ta muốn thêm 2 cái link vào footer cho toàn bộ các trang.
# app\design\frontend\Packt\cookbook\Magento_Theme\layout\default.phtml

<referenceBlock name="footer">
    <block class="Magento\Framework\View\Element\Html\Links" name="footer_links_account" after="footer_links">
        <arguments>
            <argument name="css_class" xsi:type="string">footer_links</argument>
            <block class="Magento\Framework\View\Element\Html\Link\Current" name="my-account-link">
                <arguments>
                    <argument name="label" xsi:type="string">My account</argument>
                    <argument name="path" xsi:type="string">customer/account</argument>
                <arguments>
            </block>
            <block class="Magento\Framework\View\Element\Html\Link\Current" name="my-cart-link">
                <arguments>
                    <argument name="label" xsi:type="string">My cart</argument>
                    <argument name="path" xsi:type="string">checkout/cart</argument>
                <arguments>
            </block>
        </arguments>
    </block>
</referenceBlock>

Tạm thời hết phần 1…

Mục lục loạt bài Magento 2

Layout, Block và Template trong Magento 2
Đánh giá bài viết

Gửi phản hồi

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