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.
Best Answer
After experimenting with the code for a while, I was able to fix the broken theme.
Issue 1
I wrapped all content into the
bmg-wrapper
container, includingbefore.body.end
. Simply removing the following code from the wrapper resolved most of my problems.Issue 2
Out of ignorance that comes with learning Magento 2, I built the foundation of my layout with custom containers, then moved
referenceBlock
andreferenceContainer
elements into them. Moving common elements around too much caused my theme to break.I figured out that I can replace the CSS classes of
referenceContainer
's with my own, which removed the need to create so many custom containers. I was able to rewritedefault.xml
using only 4<move>'s
instead of the 17<move>'s
seen in my original code. In addition, the rewrittendefault.xml
file is 40 lines smaller in length.