Magento – How does Luma theme home page work

home-pageluma-thememagento-2.1magento2widget

I understand that the home page content is defined in block home-page-block, and I can edit that and see changes appear in the browser.

However, what I don't understand is:

  1. What bit of theme/template/code invokes home-page-block in the first place. (I am searching everything I can think of, and nothing…)

  2. The relationship, if any, to Content > Pages > Home Page, which is blank. And furthermore, I can edit Home Page, it does not show up as the home page, but does show up at [mysite.com]/home/.

What am I missing?

Edit: Partial understanding

Based on reading docs and source code, the diagram shows some of the contributors to the construction of the Luma home page.

Luma home page construction

Among mysteries solved:

  • in the Content > Widget configuration page, the list of pages offered as targets comes from Magento consolidating all the page_types.xml files from all modules.

  • On that same admin page, the list of target Containers appears to come from module-theme/view/frontend/layout/default.xml. (Not sure if it changes when different target page is selected.)

Nagging Questions

How are some of the things in the above diagram specified, based on the requested route '/'?

A. Routing: '/' Route matching patterns are normally specified in routes.xml files for each module. But where is the routes.xml for '/'? And how does module-cms get invoked (whose page_types.xml shows it handles "CMS Home Page"/cms_index_index). How does routing result in a requested page type of cms_index_index?

B1. The seemingly corresponding layout, /vendor/magento/module-cms/view/frontend/layout/cms_index_index.xml shows an empty body. How does that relate?

B2. Instead, the delivered page appears to have the structure of /vendor/magento/module-theme/view/frontend/layout/default.xml. (Deduced from it being the only file with a container called "Main Content Area", as targeted by Widget "Home Page") What precipitates invocation of default.xml?

C. Why is the Luma home page implemented with a Widget and a Block and not simply a Page?

Edit 2

I pursued part of this question here: How does home page routing work?

Best Answer

Pretty straight relation which invokes home-page-block, is Widgets.

  1. Content -> Widgets -> Now click on Home Page widget. Storefront Properties -> Layout Updates -> specific page Widget Options -> Block > Home Page Block.

  2. You can set/change CMS page by Stores-> Configuration-> General-> Web-> Default Pages-> CMS Home Page You can select the page by title.

    By default the page is Home Page

  3. Module-Widget Module is responsible for all the code, a lot more questions can be covered if you observe the below file.

    Magento root/vendor/magento/module-widget/view/adminhtml/templates/instance/edit/layout.phtml

Where does it get its list of Pages ?

As on the above if you go to line 136

   $block->getLayoutsChooser();

  /vendor/magento/module-widget/Block/Adminhtml/Widget/Instance/Edit/Tab/Main/Layout.php

File contains

    public function getLayoutsChooser()
    {
        $chooserBlock = $this->getLayout()->createBlock(
            'Magento\Widget\Block\Adminhtml\Widget\Instance\Edit\Chooser\Layout'
 // Setting other variables
        )
   }

/vendor/magento/module-widget/Block/Adminhtml/Widget/Instance/Edit/Chooser/Layout.php

The below function will return the pages.

protected function _beforeToHtml()
{
    if (!$this->getOptions()) {
        $this->addOption('', __('-- Please Select --'));
        $pageTypes = $this->_config->getPageTypes();
        $this->_addPageTypeOptions($pageTypes);
    }
    return parent::_beforeToHtml();
}

Where the container can be rendered ?

in the layout.phtml $block->getDisplayOnContainers(); is responsible for getting all containers.

What is the container means ?

Containers are type of blocks for structured design which follows design fallback. Quick working example for create container.

which says "CMS Static Block Default Template". What's its role ?

Means it will follow static block default design

<input type="hidden" value="widget/static_block/default.phtml" name="widget_instance[0][pages][template]" disabled="disabled">

/vendor/magento/module-widget/view/frontend/layout/default.xml
Related Topic