4

I'm trying to add a new container according to the Magento 2 documentation, but it isn't working. Here is what I'm trying:

<container name="some.container" as="someContainer" label="Some Container" htmlTag="div" htmlClass="some-container" />

I'm not seeing the markup anywhere after I refresh. Caching is off too.

6

Use the following code to add a new container in Magento 2:

<referenceContainer name="columns.top">
<container name="custom-content" as="custom-content" label="Page Custom
Content" htmlTag="div" htmlClass="custom-content">
<block class="Magento\Framework\View\Element\Template"
name="custom-content" template="Magento_Theme::html/custom-content.phtml" />
</container>
</referenceContainer>

Insert the above code in default.xml, path below:

path: /app/design/frontend/spacename/Theme/Magento_Theme/layout/default.xml

Create a file custom-content.phtml inside: path :

/app/design/frontend/spacename/Theme/Magento_Theme/template/html/custom-content.phtml
  • Note: The phtml path isn't correct. It should be ../templates (plural). magento.stackexchange won't let me correct a single char. – Gordon Freeman May 22 '18 at 13:46
3
  1. First of all, you should know where do you want to put your code, you can do that going to the admin panel, in

    Store -> Configuration -> Advanced -> Developer -> Debug

And set "Enabled Template Path Hints for Storefront" to "Yes".

2. You should clean your cache in the admin panel. Going to System -> Cache Management, hit "select all" and "submit".

Now in your page you should be able to see the place where the code is.

3. Now the code that you should use is (example):

<referenceContainer name="footer">
    <container name="socialtests" htmlTag="div" after="copyright">
        <block class="Magento\Framework\View\Element\Template" name="social.links" template="Magento_Theme::social-links.phtml" after="-"/>
    </container>
</referenceContainer>

And you should place it in

<magento-root>/app/design/frontend/<vendor-name>/<theme-name>/Magento_Theme/layout/default.xml



4. Now you need to create the social-links.phtml file under

<magento-root>/app/design/frontend/<vendor-name>/<theme-name>/Magento_Theme/templates/

with whatever code you want. After this you should be able to see your code.

2

It seems like you absolutely have to have a block being rendered inside the container for the container to be rendered at all. It just won't render and empty container as far as I could tell. I used the below code for the container:

<referenceContainer name="page.wrapper">
    <container name="copyright-footer" htmlTag="div" after="footer-container" htmlClass="copyright-footer">
        <container name="copyright-footer-content" htmlTag="div" htmlClass="copyright-footer-content" />
    </container>
</referenceContainer>

At first that looks like and empty container, but I'm moving a block inside of that container:

<move element="copyright" destination="copyright-footer-content" />
1

Yeah, this is a pain when you what to use JavaScript to hook into a specific location in the page. With a bit of hacking and back stretching I finally came up with:-

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
  <body>
    <referenceContainer name="product.info.main">
      <container name="product.info.subtitle" htmlTag="div" htmlClass="product-info-subtitle" before="product.info.price">
        <block class="Magento\Framework\View\Element\Text" name="product.info.subtitle.placeholder">
          <arguments>
            <argument name="text" xsi:type="string"><![CDATA[<!-- -->]]></argument>
          </arguments>
        </block>
      </container>
    </referenceContainer>
  </body>
</page>
0

If you add it to page root it will no be rendered. You need refer to page.wrapper

<?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">

    <referenceContainer name="page.wrapper">
        <container name="some.container" as="someContainer" label="Some Container" htmlTag="div" htmlClass="some-container" />
    </referenceContainer>
</layout>
  • That doesn't seem to be working for me. I'm trying this in my custom theme's default.xml – Paul Jun 8 '16 at 17:48
  • Do you try any other instruction. Are you theme is enabled? – KAndy Jun 8 '16 at 17:50
  • Yes, it's enabled. I'm moving, removing and adding static blocks in the xml and that is working. I'm just not able to create a container. – Paul Jun 8 '16 at 17:51
  • My structure is a bit different though. Mine is: <?xml........> <page.........> <body.........> <!-- Trying to add container here --> </body> </page> – Paul Jun 8 '16 at 17:54
  • "If you add it to page root it will no be rendered. " - That a s blanket statement is false. If a container is added to root inside a <body> of a <page> (not a <layout>) it will be rendered last (at the position you'd expect before.body.end would be but isn't). – Melvyn Apr 8 '18 at 12:48

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.