Magento – Header and footer in an external file

footerheaderlayoutmagento-2.1magento2

I'm using an index.php file under /pub/custom folder, which is used to create custom designs.
This file is completely written in html and javascript.

Is there any way to include current theme header and footer to this file?

For eg: https://example.com/custom/ should include the header and footer from https://example.com

There are so many answers for Magento 1, but I couldn't find anything for Magento 2.
I'm using version 2.1.15. and Porto theme.

Any help would be appreciated! Thanks.

Best Answer

First Download Module :-cadence/m2external

Click on this link:- https://github.com/cadencelabs/m2external

This module is use for loading store layout / blocks in an external file or program. it's help you access a specific container or block in your Magento 2 theme from an external system.

This module adds a new layout file external.xml.

You can copy the template file into app/design/frontned/VandorName/ThemeName/Magento_Theme/layout/external.xml

Once it’s there, you can customize the file to add any extra blocks not included in the default layout.

And after that you can create an External PHP file to call Custome Blocks , ReferenceContainer , ReferenceBlock in it.

external.xml

<?xml version="1.0"?>
  <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

<update handle="default_head_blocks"/>
<body>
    <block name="require.js" class="Magento\Framework\View\Element\Template" template="Magento_Theme::page/js/require_js.phtml" />
    <referenceContainer name="after.body.start">
        <block class="Magento\RequireJs\Block\Html\Head\Config" name="requirejs-config"/>
        <block class="Magento\Translation\Block\Html\Head\Config" name="translate-config"/>
        <block class="Magento\Translation\Block\Js" name="translate" template="Magento_Translation::translate.phtml"/>
        <block class="Magento\Framework\View\Element\Js\Cookie" name="js_cookies" template="Magento_Theme::js/cookie.phtml"/>
        <block class="Magento\Theme\Block\Html\Notices" name="global_notices" template="Magento_Theme::html/notices.phtml"/>
    </referenceContainer>
    <referenceBlock name="top.links">
        <block class="Magento\Theme\Block\Html\Header" name="header" as="header" before="-">
            <arguments>
                <argument name="show_part" xsi:type="string">welcome</argument>
            </arguments>
        </block>
    </referenceBlock>
    <referenceContainer name="main.content">
        <block class="Magento\Framework\View\Element\Template" name="skip_to_content.target" before="-" template="Magento_Theme::html/skiptarget.phtml">
            <arguments>
                <argument name="target_id" xsi:type="string">contentarea</argument>
            </arguments>
        </block>
    </referenceContainer>
    <referenceContainer name="header.container">
        <container name="header.panel.wrapper" htmlClass="panel wrapper" htmlTag="div" before="-">
            <container name="header.panel" label="Page Header Panel" htmlTag="div" htmlClass="panel header">
                <block class="Magento\Framework\View\Element\Template" name="skip_to_content" template="Magento_Theme::html/skip.phtml">
                    <arguments>
                        <argument name="target" xsi:type="string">contentarea</argument>
                        <argument name="label" translate="true" xsi:type="string">Skip to Content</argument>
                    </arguments>
                </block>
                <block class="Magento\Store\Block\Switcher" name="store_language" as="store_language" template="Magento_Store::switch/languages.phtml">
                    <arguments>
                        <argument name="view_model" xsi:type="object">Magento\Store\ViewModel\SwitcherUrlProvider</argument>
                    </arguments>
                </block>
                <block class="Magento\Customer\Block\Account\Navigation" name="top.links">
                    <arguments>
                        <argument name="css_class" xsi:type="string">header links</argument>
                    </arguments>
                </block>
            </container>
        </container>
        <container name="header-wrapper" label="Page Header" as="header-wrapper" htmlTag="div" htmlClass="header content">
            <block class="Magento\Theme\Block\Html\Header\Logo" name="logo">
                <arguments>
                    <argument name="logo_img_width" xsi:type="number">189</argument>
                    <argument name="logo_img_height" xsi:type="number">64</argument>
                </arguments>
            </block>
        </container>
    </referenceContainer>
    <referenceContainer name="page.top">
        <block class="Magento\Framework\View\Element\Template" name="navigation.sections" before="-" template="Magento_Theme::html/sections.phtml">
            <arguments>
                <argument name="group_name" xsi:type="string">navigation-sections</argument>
                <argument name="group_css" xsi:type="string">nav-sections</argument>
            </arguments>
            <block class="Magento\Framework\View\Element\Template" name="store.menu" group="navigation-sections" template="Magento_Theme::html/container.phtml">
                <arguments>
                    <argument name="title" translate="true" xsi:type="string">Menu</argument>
                </arguments>
                <block class="Magento\Theme\Block\Html\Topmenu" name="catalog.topnav" template="Magento_Theme::html/topmenu.phtml" ttl="3600" before="-"/>
            </block>
            <block class="Magento\Framework\View\Element\Text" name="store.links" group="navigation-sections">
                <arguments>
                    <argument name="title" translate="true" xsi:type="string">Account</argument>
                    <argument name="use_force" xsi:type="boolean">true</argument>
                    <argument name="text" xsi:type="string"><![CDATA[<!-- Account links -->]]></argument>
                </arguments>
            </block>
            <block class="Magento\Framework\View\Element\Template" name="store.settings" group="navigation-sections" template="Magento_Theme::html/container.phtml">
                <arguments>
                    <argument name="title" translate="true" xsi:type="string">Settings</argument>
                </arguments>
                <block class="Magento\Store\Block\Switcher" name="store.settings.language" template="Magento_Store::switch/languages.phtml">
                    <arguments>
                        <argument name="id_modifier" xsi:type="string">nav</argument>
                        <argument name="view_model" xsi:type="object">Magento\Store\ViewModel\SwitcherUrlProvider</argument>
                    </arguments>
                </block>
                <block class="Magento\Directory\Block\Currency" name="store.settings.currency" template="Magento_Directory::currency.phtml">
                    <arguments>
                        <argument name="id_modifier" xsi:type="string">nav</argument>
                    </arguments>
                </block>
            </block>
        </block>
        <container name="top.container" as="topContainer" label="After Page Header Top" htmlTag="div" htmlClass="top-container"/>
        <block class="Magento\Theme\Block\Html\Breadcrumbs" name="breadcrumbs" as="breadcrumbs"/>
    </referenceContainer>
    <referenceContainer name="columns.top">
        <block class="Magento\Theme\Block\Html\Title" name="page.main.title" template="Magento_Theme::html/title.phtml"/>
        <container name="page.messages" htmlTag="div" htmlClass="page messages">
            <block class="Magento\Framework\View\Element\Template" name="ajax.message.placeholder" template="Magento_Theme::html/messages.phtml"/>
            <block class="Magento\Framework\View\Element\Messages" name="messages" as="messages" template="Magento_Theme::messages.phtml"/>
        </container>
    </referenceContainer>
    <referenceContainer name="main">
        <container name="content.top" label="Main Content Top"/>
        <container name="content" label="Main Content Area"/>
        <container name="content.aside" label="Main Content Aside"/>
        <container name="content.bottom" label="Main Content Bottom"/>
    </referenceContainer>
    <referenceContainer name="page.bottom.container">
        <container name="page.bottom" label="Before Page Footer" htmlTag="div" htmlClass="content"/>
    </referenceContainer>
    <referenceContainer name="footer-container">
        <container name="footer" as="footer" label="Page Footer" htmlTag="div" htmlClass="footer content">
            <block class="Magento\Store\Block\Switcher" name="store_switcher" as="store_switcher" template="Magento_Store::switch/stores.phtml"/>
            <block class="Magento\Framework\View\Element\Html\Links" name="footer_links">
                <arguments>
                    <argument name="css_class" xsi:type="string">footer links</argument>
                </arguments>
            </block>
            <block class="Magento\Theme\Block\Html\Footer" name="copyright" template="Magento_Theme::html/copyright.phtml"/>
            <block class="Magento\Framework\View\Element\Template" name="report.bugs" template="Magento_Theme::html/bugreport.phtml" ifconfig="design/footer/report_bugs"/>
        </container>
    </referenceContainer>
    <referenceContainer name="before.body.end">
        <block class="Magento\Theme\Block\Html\Footer" name="absolute_footer" template="Magento_Theme::html/absolute_footer.phtml" />
    </referenceContainer>
    <referenceContainer name="content">
        <block class="Magento\Framework\View\Element\FormKey" name="formkey"/>
    </referenceContainer>
</body>

</page>

Now you create an External PHP file which call your Magento Header Footer.

In this file Absolute Path of Your Magento 2 Install directory are Used

Filename.php

<?php

 include('../../app/bootstrap.php'); // path to get Magento Bootstrap.php 

 /* include Bootstrap and DirectoryList  Namespace */

 use \Magento\Framework\App\Bootstrap;

 use Magento\Framework\App\Filesystem\DirectoryList;

 $store = '0';// Enter store website id you want to include 

 $theme_name ="Vendorname/ThemeName" ; // name of theme which header footer you want to include 

 $params = $_SERVER;

 $params[Bootstrap::INIT_PARAM_FILESYSTEM_DIR_PATHS] = [
 DirectoryList::PUB => [DirectoryList::URL_PATH => ''],
 DirectoryList::MEDIA => [DirectoryList::URL_PATH => 'media'],
 DirectoryList::STATIC_VIEW => [DirectoryList::URL_PATH => 'static'],
 DirectoryList::UPLOAD => [DirectoryList::URL_PATH => 'media/upload'],
 ];

 $params[\Magento\Store\Model\StoreManager::PARAM_RUN_CODE] = $store ?? 'default'; ; 

 $params[\Magento\Store\Model\StoreManager::PARAM_RUN_TYPE] = 'store';

 $bootstrap = \Magento\Framework\App\Bootstrap::create(BP, $params);

 $app = $bootstrap-> 
 createApplication('\Cadence\External\Framework\App\External');

 //this include an theme

 $integration = $app->launch([
 'theme' => $theme_name
 ]);

 //The Integration class provides exposure for a number of methods

 $specialAssets = $integration->getPageComponents();

 // you can seee it by print_r($specialAssets)

 
 echo $specialAssets['headContent'];
 echo $specialAssets['headAdditional'];

 // add requireJs 

  $integration->getBlock('require.js');

  // Output a container  you want to call
  //echo $integration->getContainerHtml('after.body.start');

 // Output a block you want to call
 //echo $integration->getBlockHtml('header');

 // Get a block to manipulate you want to call
 //$headerBlock = $integration->getBlock('header');
  
  echo $integration->getContainerHtml('after.body.start');

  echo $integration->getContainerHtml('header.container');
  echo $integration->getContainerHtml('page.top');

  echo $integration->getContainerHtml('page.bottom.container');
  echo $integration->getContainerHtml('footer-container');
  echo $integration->getContainerHtml('before.body.end');

  echo $integration->getContainerHtml('content');

  echo $integration->getBlockHtml('absolute_footer');

?>

This is a Source link click here

I Hope It's Helps You.

Related Topic