1

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:

  1. All CMS content disappears
  2. The footer renders above the header
  3. Some containers are missing or disorganized

With 1column layout (expected result)

enter image description here

With home layout (unexpected result) enter image description here

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 to custom_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.

Improve this question
2
  • rename 'home_page.xml' to 'custom_home.xml', since you have <layout id="custom_home">
    – subroutines
    Apr 24, 2017 at 5:17
  • Thank you for the quick reply. I changed to the layout to custom_home.xml. The layout is still experiencing the same issues.
    – MParsons
    Apr 24, 2017 at 11:41

1 Answer 1

Reset to default
0

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, including before.body.end. Simply removing the following code from the wrapper resolved most of my problems.

<referenceContainer name="before.body.end">
    <block class="Magento\Theme\Block\Html\Footer" name="absolute_footer" template="html/absolute_footer.phtml" />
</referenceContainer>

Issue 2

Out of ignorance that comes with learning Magento 2, I built the foundation of my layout with custom containers, then moved referenceBlock and referenceContainer 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 rewrite default.xml using only 4 <move>'s instead of the 17 <move>'s seen in my original code. In addition, the rewritten default.xml file is 40 lines smaller in length.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.