0

I've just started on magento 2, read (most) of the documentation and started my project. I want to create custom homepage first with my own header/section/footer (NOT the one that comes by default). I already have it done through html&css like static stuff so I "just" need to make it Magento 2 way.

Untill now I have created a theme, registered it, chose it and in my theme folder I have Magento_Theme folder which contains page_layout folder and layouts.xml. Page_layouts folder contains homepage.xml

so my homepage.xml looks like this

<?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>

and my layouts.xml looks like this:

<?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="homepage">
        <label translate="true">Custom Homepage</label>
    </layout>
</page_layouts>

When I navigate to admin / content / pages I can set my layout to Home page, but when i comment out <container name="footer-container" as="footer" before="before.body.end" label="Page Footer Container" htmlTag="footer" htmlClass="page-footer" /> from homepage.xml it changes nothing. I also tried adding remove="true", nothing changed.. I also tried to edit htmlClass name and check it out in inspector - nothing changed.

How can I remove magento header/footer content on homepage.xml and add my own html&css? Would be awesome if someone can give me a simplest example that will add a <div>test</div> to my homepage.xml so when I go to localhost I only get that div, without Magento header/footer.

1

There is already a footer container being added by a higher level xml, you need to remove or hide this:

<referenceContainer name="footer-container" remove="true" />

If you want to add a block with html in you can do this:

<block class="Magento\Framework\View\Element\Template" name="header.wrapper" template="Magento_Theme::home/test.phtml">

Choose a container to put this inside Creating "home/test.phtml" in:

theme/Magento_Theme/templates/

"home" and "test" can be whatever you like.

Check this file for the basic structure:

/vendor/magento/module-theme/view/base/page_layout/empty.xml
  • I'm sorry for dumb question, but what is the use of homepage.xml in my case if when I'm making changes there they do not reflect? Also how can I know which higher level xml is adding the footer, I only have that xml file inside my magento theme – Marko Niciforovic Sep 6 '16 at 14:24
  • The xml does have an effect, but multiple xml files are having an effect. The footer is being added by /vendor/magento/module-theme/view/frontend/layout/default.xml this and the empty.xml I already mentioned are the main ones you need to know. – William Oakley Sep 6 '16 at 14:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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