I am working on a Magento 2.1.7 shop. To achieve this, I have created a child-theme of Magento Blank.
I am new to Magento unfamiliarized with the complexity of overwriting the parent theme's layout from the child theme's default.xml file I have placed in app/design/frontend/myCompany/myTheme/Magento_Theme/layout/default.xml
.
The layout of the homepage should be something like this:
Doing Content > Pages > Design > Layout > 2 columns with left bar
just added Compare Products and My Wish List to the left sidebar. I need the categories there. Also, currently, the defaukt.xml file looks like this:
<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="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" htmlId="siteHeader" htmlClass="panel wrapper fullwidth">
<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_file" xsi:type="string">images/logo.png</argument>
<argument name="logo_img_width" xsi:type="number">128</argument>
<argument name="logo_img_height" xsi:type="number">45</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">
<block class="Magento\Theme\Block\Html\Topmenu" name="catalog.topnav" template="html/topmenu.phtml" ttl="3600" before="-"/>
</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="switch/languages.phtml">
<arguments>
<argument name="id_modifier" xsi:type="string">nav</argument>
</arguments>
</block>
<block class="Magento\Directory\Block\Currency" name="store.settings.currency" template="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="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>
<container name="content" label="Main Content Area">
</container>
<container name="content.aside" label="Main Content Aside">
</container>
<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="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="html/copyright.phtml"/>
<block class="Magento\Framework\View\Element\Template" name="report.bugs" template="Magento_Theme::html/bugreport.phtml" />
</container>
</referenceContainer>
<referenceContainer name="before.body.end">
<block class="Magento\Theme\Block\Html\Footer" name="absolute_footer" template="html/absolute_footer.phtml" />
</referenceContainer>
<referenceContainer name="content">
<block class="Magento\Framework\View\Element\FormKey" name="formkey"/>
</referenceContainer>
What would be the most simple structure for the default.xml
file that would output the 2 columns layout above? Thank you!
Best Answer
I can not explain you how to do exactly what you want because that would involve me setting up a demo website and coding it all for you.
But i can give you enough information so you can work with that.
First of all Magento 2 works with XML files to setup up pagelayouts and remove/add/move/hide blocks or containers within every xml.
The best page to look up the basic information about that is :
Layout Overview
Common Layout Tasks
Now back to your situation. Inheriting from the
blank theme
is a good idea but it also means you will have to override a lot of files yourself. Most of this work has been done in theluma theme
.You can choose to edit an existing page template or create your own one.
I am going to give you an example:
I will refer to
app/design/frontend/vendor/theme/
folder asthemefolder
from now on.In your
themefolder/Magento_Theme/
you can define your own page template by adding alayouts.xml
there with the following content :You can see we defined a
custom_home
and acontact page
here.Now we can define whats in them in our
themefolder/Magento_Theme/page_layout
folder by adding the respectively filecontact.xml
andcustom_home.xml
.I will give you an example for the
custom_home.xml
from my own created themeAs you can see here i'm inheriting the
empty layout
from Magento blank theme by adding<update handle="empty"/>
. You can do this for any preset layout that you can find (in your case i think this is 2columns-left).There you can see i'm using
<referenceContainer>
to reference to the container where i want to add stuff in like a preloader , my own slider etc etc.You can add Container classes, ids and tags by adding the tag
htmlClass
,htmlId
orhtmlTag
. You can define where you put them by adding before="" or after="" and then the name of theblock
of your xml that you inherit from.You can add Templates and PhP classes to your Block with the tags "template" and "class". The block class needs to be created in a seperated module (in my case this is Designit/Slider or Designit/Base)
You can define functions within that block class and call them in your
phtml file
with the$block->function()
.Furthermore the template directory is defined by adding templates folder :
themefolder/Magento_Theme/templates
and within that folder you can add yourcustom phtml files
and refer them by calling the module your work in followed by'::file.phtml'
in this case creatingMagento_Theme::file.phtml
If you want to adjust any xml that Magento offers you can just copy/paste those to the folder that its in (
Magento_Theme/layout/default.xml
is an example) and follow the same instructions.You can add custom layouts to pages by going in your backend to content->pages->edit and then layout and selecting your page layout there.
Last but not least if you just want to edit the existing
.phtml file
of Magento without moving it or anything you do not need to declare anything in anxml file
. Just copy the file to the same directory within your theme. An example :Magento file :
Copy to :
Its a lot of information but i hope i gave you the information to understand the layout system of Magento 2
Greetings SwAt