Tạo mới magento page layout

Tạo mới magento page layout

Tạo mới magento page layout

Thỉnh thoảng chúng ta cần tạo 1  page layout mới, như layout Fullwidth. Pagelayout giúp chỉnh sửaCMS page đơn giản thuận tiện hơn

1- Tạo layouts.xml

app/design/frontend/Vendor/yourtheme/Magento_Theme/layouts.xml

File layouts.xml sẻ tạo 1 layout mới có tên test

<?xml version="1.0" encoding="UTF-8"?>
<page_layouts xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/PageLayout/etc/layouts.xsd">
    <layout id="test">
        <label translate="true">test layout</label>
    </layout>
</page_layouts>

After creating above file you can check your test layout in admin panel.

2 – Tạo test.xml

app/design/frontend/Vendor/yourtheme/Magento_Theme/page_layout/test.xml

File test.xml quản lý, cấu hình các thành phần trong layout

<?xml version="1.0"?>
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
    <update handle="empty"/>
    <referenceContainer name="page.wrapper">
        <container name="header.container" as="header_container" label="Page Header Container" htmlTag="header" htmlClass="page-header" before="main.content"/>
        <container name="page.top" as="page_top" label="After Page Header" after="header.container"/>
        <container name="footer-container" as="footer" before="before.body.end" label="Page Footer Container" htmlTag="footer" htmlClass="page-footer"/>
    </referenceContainer>
</layout>