I'm developing an e-commerce application for a client in Magento 2.1.5. Though this is my first experience with the platform, I have successfully built out a default layout and a handful of application layouts (product view, account pages, etc.). Development was going well until I attempted to make a custom home page layout, which has a different header than the rest of the site.
The Problem
The CMS content works great when I assign one of the default layouts, such as 1column
or 2columns
, to the home page. When I apply my custom layout, a couple issues occur:
- All CMS content disappears
- The footer renders above the header
- Some containers are missing or disorganized
With 1column layout (expected result)
With home layout (unexpected result)
Sanity checks
I don't have enough reputation to post more links, so I've listed the titles of stack exchange questions and docs I've used for research.
- Creating a custom homepage template in Magento2
- Magento 2 - Custom Page Layout
- Magento 2: Creating a custom layout
- Official Docs -
/guides/v2.1/frontend-dev-guide/layouts/layout-types.html
Helpful Information
app/design/frontend/{Vendor}/{Theme}/Magento_Theme/layouts.xml
<?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="custom_home">
<label translate="true">Home Page Layout</label>
</layout>
app/design/frontend/{Vendor}/{Theme}/Magento_Theme/page_layout/custom_home.xml
<?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="default"/>
<!-- changes to layout here -->
</layout>
app/design/frontend/{Vendor}/{Theme}/Magento_Theme/layout/default.xml
<?xml version="1.0"?>
<page layout="3columns" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<!-- wrapper -->
<move element="bmg-wrapper" destination="page.wrapper"/>
<move element="page.top" destination="bmg-wrapper"/>
<!-- header -->
<move element="header.container" destination="bmg-wrapper"/>
<move element="bmg-header-wrapper" destination="header-wrapper"/>
<move element="bmg-header" destination="header.container"/>
<move element="header-wrapper" destination="bmg-header"/>
<!-- header > top header -->
<move element="bmg-top-bar" destination="header.container"/>
<move element="header.panel" destination="bmg-top-nav"/>
<!-- header > header content -->
<move element="logo" destination="bmg-logo"/>
<move element="minicart" destination="bmg-minicart-nav-item" />
<move element="top.search" destination="bmg-search-nav-item" />
<move element="navigation.sections" destination="store-nav" />
<move element="wish-list-link" destination="bmg-wish-list-nav-item"/>
<!--<referenceBlock name="wish-list-link" remove="true"/>-->
<!-- content -->
<move element="bmg-content-container" destination="bmg-wrapper"/>
<move element="main.content" destination="bmg-content-container"/>
<move element="breadcrumbs" destination="bmg-content-container" before="-"/>
<!-- footer -->
<move element="footer" destination="bmg-footer"/>
<referenceBlock name="footer_links" remove="true"/>
<!-- elements to be removed -->
<referenceBlock name="skip_to_content" remove="true"/>
<referenceBlock name="catalog.compare.link" remove="true"/>
<referenceBlock name="report.bugs" remove="true"/>
<referenceBlock name="copyright" remove="true"/>
<!-- wrapper -->
<container name="bmg-wrapper" htmlTag="div" htmlClass="bmg-wrapper">
<!-- top bar -->
<container name="bmg-top-bar" htmlTag="div" htmlClass="bmg-top-bar">
<container htmlTag="div" htmlClass="container">
<!-- top bar nav -->
<container name="bmg-top-nav" htmlTag="nav" htmlClass="bmg-top-nav">
<referenceBlock name="top.links">
<block class="Magento\Customer\Block\Account\RegisterLink" name="register-link">
<arguments>
<argument name="label" xsi:type="string" translate="true">Create an Account</argument>
</arguments>
</block>
<block class="Magento\Customer\Block\Account\AuthorizationLink" name="authorization-link"
template="Magento_Customer::account/link/authorization.phtml"/>
</referenceBlock>
</container>
<!-- /top bar nav -->
</container>
</container>
<!-- /top bar -->
<!-- header -->
<container name="bmg-header" htmlTag="div" htmlClass="bmg-header">
<container name="bmg-header-wrapper" htmlTag="div" htmlClass="container">
<container name="bmg-header-content" htmlTag="div" htmlClass="row">
<container name="bmg-header-nav-container" htmlTag="div" htmlClass="col-xs-9">
<!-- logo -->
<container name="bmg-logo" htmlTag="div" htmlClass="bmg-logo" before="store-nav">
<referenceBlock name="logo">
<arguments>
<argument name="logo_file" xsi:type="string">images/logo_dark.png</argument>
<argument name="logo_img_width" xsi:type="number">164</argument>
<argument name="logo_img_height" xsi:type="number">59</argument>
</arguments>
</referenceBlock>
</container>
<!-- /logo -->
<!-- store nav -->
<container name="store-nav" htmlTag="div" htmlClass="store-nav" after="bmg-logo">
<referenceBlock name="store.menu">
<block class="Ves\Megamenu\Block\Menu" name="catalog.topnav" template="Ves_Megamenu::topmenu.phtml" ttl="3600">
<arguments>
<argument name="alias" xsi:type="string">header-nav</argument>
</arguments>
</block>
</referenceBlock>
</container>
<!-- /store nav -->
</container>
<container htmlTag="div" htmlClass="col-xs-3">
<container name="bmg-nav" htmlTag="nav" htmlClass="bmg-nav">
<!-- header nav -->
<referenceContainer name="header.panel">
<block class="Magento\Framework\View\Element\Html\Links" name="header.links">
<arguments>
<argument name="css_class" xsi:type="string">header links</argument>
</arguments>
</block>
</referenceContainer>
<!-- /header nav -->
<container name="bmg-wish-list-nav-item" htmlTag="div" htmlClass="bmg-nav-item">
<referenceBlock name="wish-list-link"/>
</container>
<container name="bmg-minicart-nav-item" htmlTag="div" htmlClass="bmg-nav-item">
<referenceBlock name="minicart"/>
</container>
<container name="bmg-search-nav-item" htmlTag="div" htmlClass="bmg-nav-item">
<referenceBlock name="top.search"/>
</container>
</container>
</container>
</container>
</container>
<!-- /mobile menu -->
</container>
<!-- /header -->
<container name="bmg-content-container" htmlTag="section" htmlClass="bmg-content container" after="bmg-header">
<!-- {{ main content }} -->
</container>
<!-- footer -->
<referenceContainer name="footer-container">
<container name="footer" as="footer" label="Page Footer" htmlTag="div" htmlClass="bmg-footer">
<container htmlTag="div" htmlClass="container">
<container htmlTag="div" htmlClass="row">
<container htmlTag="div" htmlClass="col-md-3">
<!-- logo -->
<block class="Magento\Theme\Block\Html\Header\Logo" name="footer-logo">
<arguments>
<argument name="logo_file" xsi:type="string">images/logo_dark.png</argument>
<argument name="logo_img_width" xsi:type="number">164</argument>
<argument name="logo_img_height" xsi:type="number">59</argument>
</arguments>
</block>
<!-- /logo -->
</container>
<container htmlTag="div" htmlClass="col-md-3">
<block class="Ves\Megamenu\Block\Menu" name="footer-nav-stores" template="Ves_Megamenu::topmenu.phtml" ttl="3600">
<arguments>
<argument name="alias" xsi:type="string">footer-stores</argument>
</arguments>
</block>
</container>
<container htmlTag="div" htmlClass="col-md-3">
<block class="Ves\Megamenu\Block\Menu" name="footer-nav-account" template="Ves_Megamenu::topmenu.phtml" ttl="3600">
<arguments>
<argument name="alias" xsi:type="string">footer-account</argument>
</arguments>
</block>
</container>
<container htmlTag="div" htmlClass="col-md-3">
<block class="Ves\Megamenu\Block\Menu" name="footer-nav-bmg" template="Ves_Megamenu::topmenu.phtml" ttl="3600">
<arguments>
<argument name="alias" xsi:type="string">footer-bmg</argument>
</arguments>
</block>
</container>
</container>
<block class="Magento\Theme\Block\Html\Footer" name="copyright" template="html/copyright.phtml"/>
</container>
</container>
</referenceContainer>
<referenceContainer name="before.body.end">
<block class="Magento\Theme\Block\Html\Footer" name="absolute_footer" template="html/absolute_footer.phtml" />
</referenceContainer>
<!-- /footer -->
</container>
</body>
Any help with this would be greatly appreciated!
Update
- Changed
home_page.xml
tocustom_home.xml
I discovered similar behavior on the checkout page. Though the checkout page content still renders, the header, footer, and content area are completely out of position.
<layout id="custom_home">
custom_home.xml
. The layout is still experiencing the same issues.