3

I have the following layout in Magento2:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="3columns" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
    <body>
         <referenceContainer name="main">
            <block class="Vendor\MyModule\Block\MyBlock" name="my_block" template="Vendor_MyModule::my-block.phtml"/>
        </referenceContainer>
    </body>
</page>

Unfortunately this only renders a 2columns-right layout in the frontend. I am really wondering what I have done wrong. Unfortunately there are no examples of a 3 columns layout in the core in order to check. But if I open 3columns.xml under module-theme/view/frontend/page_layout/3columns.xml I only see the following:

<?xml version="1.0"?>
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
    <update handle="2columns-left"/>
</layout>

So there is no third column?

Improve this question
  • Have you found solution? – Sneha Panchal Jan 19 '18 at 14:15
2

You aren't doing anything wrong. There is not a 3 column layout in the Magento 2 core. Fortunately, it is pretty simple to create your own layout. You can use 2columns-left.xml as an example. You can reference this devdoc for help. http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/layout-types.html

Improve this answer
  • Sorry, but I don't get it. Why is there a 3columns.xml? Why is it only referencing 2columns-left? Can you please provide an example how to use 3columns? Thanks! – tester Jan 12 '16 at 20:02
  • 1
    Magento_Theme/view/frontend/layout/default.xml is the only page that uses the 3column layout. I'm not certain why it was included if it's just a pass-through to the 2column layout but if I had to guess I would say it was to maintain compatibility with legacy code. There was an issue created about this but nothing came of it github.com/magento/magento2/issues/1649 – Nathan Toombs Jan 12 '16 at 20:09
  • I still don't understand how to create a 3 column. The doc says I should create a 3columns.xml under page_layout. My 3columns.xml does not work: <layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd"> <update handle="2columns-left"/> <referenceContainer name="columns"> <container name="div.sidebar.main" htmlTag="div" htmlClass="sidebar sidebar-main" before="main"> <container name="sidebar.main" as="sidebar_main" label="Sidebar Main"/></container></referenceContainer> </layout> – tester Jan 13 '16 at 6:59
  • 2
    So can someone please provide me a working example? I still don't get it. Would be really awesome :-) – tester Jan 15 '16 at 6:36
0

I noticed that even the magento/module-theme/view/frontend/page_layout/2columns-right.xml file contains the same 3columns.xml code you posted. That got me thinking, 2columns-right.xml and 2columns-left.xml share the same layout instructions (inheritance), yet differ in result, so the class page-layout-2columns-right (or left) must be added to the body somewhere, as the inspection reveal, but I couldn't pinpoint the exact location (still learning).

when applying .page-layout-3columns to the page, the column main reduce its width in order to make room for the potential sidebar, so I propose while extending the 3col layout, add a container and a block inside it (see mage doc) and style it yourself by extending the appropriate .less file (see Locate styles in Magento doc)

Improve this answer
0

I realise this is a fairly old thread, but it is relatively simple to get a 3 column layout in Magento. i.e one where you have a left sidebar, right sidebar and main column.

Just set the page layout to 3column, and then create a CMS block for your left sidebar. A CMS block for your right sidebar.

Add a widget to add your left CMS block to sidebar.main on the page in question and a second widget to add your right CMS block to sidebar.additional on the same page.

If you want to do it using Layout Update xml instead of widgets then apply the following to the page.

<referenceContainer name="sidebar.main">
   <block class="Magento\Cms\Block\Block" name="<leftcmsblockid>">
       <arguments>
            <argument name="block_id" xsi:type="string"><leftcmsblockid></argument>
       </arguments>
   </block>
</referenceContainer>
<referenceContainer name="sidebar.additional">
   <block class="Magento\Cms\Block\Block" name="<rightcmsblockid>">
       <arguments>
            <argument name="block_id" xsi:type="string"><rightcmsblockid></argument>
       </arguments>
   </block>
</referenceContainer>
<move element="div.sidebar.main" destination="columns" after="main"/>

The last move command ensures that the sidebar.main block is rendered after the main column, causing it to drop below the main content on mobile screens.

Hope this helps.

Improve this answer

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.