0

I am developing a custom theme which inherits from Magento/blank. I am attempting to develop a CMS homepage layout within a custom module.

I have created the module and successfully applied the layout to the homepage.

When I visit the homepage I should see a header and footer, and an empty container for the content.

Instead, I see an entirely blank page with the styles loaded from my custom theme.

My first thought is that my module is not able to fall back to the layouts contained within the Magento_Theme module and so the container "page.wrapper" cannot be referenced because it does not exist within my custom module. I'm just not certain what the solution would be.

My module is written as follows:

CatalogFilter  
    ├── composer.json  
    ├── etc  
    │   └── module.xml  
    ├── README.md  
    ├── registration.php  
    └── view  
        └── frontend  
            ├── layouts.xml  
            └── page_layout  
                └── cms_page_view_id_catalogfilter.xml  

app/code/JcfTools/CatalogFilter/composer.json

{
    "name": "jcftools/module-catalogfilter",
    "description": "",
    "type": "magento2-module",
    "version": "1.0.0",
    "license": "Private License",
    "authors": [
        {
          "name": "Joshua Flood",
          "email": "info@joshuaflood.com",
          "homepage": "https://www.joshuaflood.co.uk",
          "role": "Owner"
        }
    ],
    "autoload": {
        "files": [
            "registration.php"
        ],
        "psr-4": {
            "JcfTools\\CatalogFilter\\": ""
        }
    }

}

app/code/JcfTools/CatalogFilter/registration.php

<?php
/**
 * Copyright © Joshua Flood. All rights reserved.
 * See COPYING.txt for license details.
 */

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'JcfTools_CatalogFilter',
    __DIR__
);

app/code/JcfTools/CatalogFilter/etc/module.xml

<?xml version="1.0"?>
<!--
  /**
   * Copyright © Joshua Flood. All rights reserved.
   * See COPYING.txt for license details.
   */
-->

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="JcfTools_CatalogFilter" setup_version="1.0.0">
    </module>
</config>

app/code/JcfTools/CatalogFilter/view/frontend/layouts.xml

<page_layouts xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/PageLayout/etc/layouts.xsd">
    <layout id="jcftools-catalogfilter">
        <label translate="true">JcfTools Catalog Filter</label>
    </layout>
</page_layouts>

app/code/JcfTools/CatalogFilter/view/frontend/page_layout/cms_page_view_id_catalogfilter.xml

<?xml version="1.0"?>
<!--
/**
 * Copyright © Joshua Flood. All rights reserved.
 * See COPYING.txt for license details.
 */
-->

<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">
        <!-- Header container -->
        <container name="header.container"
                   as="header_container"
                   label="Page Header Container"
                   htmlTag="header"
                   htmlClass="page-header"
                   before="main.content" />
        <!-- Page top -->
        <container name="page.top"
                   as="page_top"
                   label="After Page Header"
                   after="header.container"/>
        <!-- Footer container -->
        <container name="footer-container"
                   as="footer"
                   before="before.body.end"
                   label="Page Footer Container"
                   htmlTag="footer"
                   htmlClass="page-footer" />
    </referenceContainer>
</layout>
  • app/code/JcfTools/CatalogFilter/view/frontend/layouts.xml and app/code/JcfTools/CatalogFilter/view/frontend/page_layout/cms_page_view_id_catalogfilter.xml code is wrong way round also your page layout needs to start with <?xml version="1.0"?> – Dava Gordon May 14 at 15:17
2

If you want to have the header and footer, your layout need to update something else than empty (1column, 2columns-left, 2columns-right, 3columns).

<?xml version="1.0"?>
<!--
/**
 * Copyright © Joshua Flood. All rights reserved.
 * See COPYING.txt for license details.
 */
-->

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

You can see in "vendor/magento/module-theme/view/frontend/page_layout/1column.xml" the file adding the header and footer.

EDIT 1 : Why would you redefine page.wrapper, the header, page.top and footer instead of updating the 1column ?

  • Thanks. I thought I might need to do something else to reference the default layouts, but the guides I had seen just advised copying the standard "empty" handle and I wasn't sure exactly what it was for. In answer to your question, I just used those blocks as a placeholder, to ensure that I can actually get something working before I actually make any customisation. – Joshua Flood May 14 at 17:22
  • It's still not working after uploading the edited layout file and issuing, setup:upgrade, setup:di:compile, setup:static-content:deploy -f, indexer:reindex and cache:flush. – Joshua Flood May 14 at 19:52
  • 2 things, i dont think you need this file : /view/frontend/layouts.xml and view/frontend/page_layout/cms_page_view_id_catalogfilter.xml should be view/frontend/layout/cms_page_view_id_catalogfilter.xml. Your file should look like this one vendor/magento/module-cms/view/frontend/layout/cms_page_view.xml – Taschert May 15 at 7:25
  • Fixed my issue. Good answer. – Karl Oct 24 at 14:32

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.