8

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.

1
  • A container does not have any visibility of it's own.You should have block inside in it to view the contents in the page
    – Duke
    Commented Jun 18, 2020 at 4:37

5 Answers 5

14

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
1
  • 4
    Note: The phtml path isn't correct. It should be ../templates (plural). magento.stackexchange won't let me correct a single char. Commented May 22, 2018 at 13:46
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" />
2
  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.

1

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>
5
  • That doesn't seem to be working for me. I'm trying this in my custom theme's default.xml
    – Paul
    Commented Jun 8, 2016 at 17:48
  • Do you try any other instruction. Are you theme is enabled?
    – KAndy
    Commented Jun 8, 2016 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
    Commented Jun 8, 2016 at 17:51
  • My structure is a bit different though. Mine is: <?xml........> <page.........> <body.........> <!-- Trying to add container here --> </body> </page>
    – Paul
    Commented Jun 8, 2016 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).
    – user4351
    Commented Apr 8, 2018 at 12:48
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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.