4

I want to include header and footer layout of Magento 2 to external PHP file, I am using my own code(external PHP) to make a frontend page. how to add header and footer layout theme in Magento 2 to my own code(.php) so that it has the same theme as Magento 2 theme layout? i read this site http://www.blog.magepsycho.com/using-magento-header-footer-outside-of-magento/ but this is for magento 1 , how to do it in magento 2?

Thanks in Advanced!

1
  • did you find a solution I will need
    – taha
    Apr 24, 2018 at 21:33

1 Answer 1

1

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

https://www.cadence-labs.com/2017/04/magento-2-load-block-layout-external-file/

i hope it's help you.

2
  • I tried this method, and it works but faced issues like slow loading of pages and yeah updated mini cart count not reflecting. Jul 30, 2021 at 4:44
  • @RahulSingh You need to use Magento way to update the cart. For the slow loading of pages, I also facing the same issue. But working well.
    – Msquare
    Jul 30, 2021 at 6:30

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.