Magento2 – Fix New Container Not Showing

containersmagento2

I'm trying to add a new container to a layout (extending Magento Blank) but it's not rendering in HTML. I added the following to:

app/design/frontend/VENDOR/MYTHEME/Magento_Theme/layout/default.xml

<container name="mike.container" as="mikeContainer" label="Mike Container" htmlTag="div" htmlClass="mike-container" />

I cleaned the cache and refreshed the page and then looked at the source code rendered by my browser but a div with a class of "mike-container" doesn't exist.

Do I need to do something else?

Thank you

Best Answer

David's answer is correct, but his example doesn't work (for me anyway).

If you swap the text block in his example with a template block you'll see the container then displays.

My full example to get it working:

app/design/frontend/PACKAGE/THEME/Magento_Cms/layout/default.xml

<?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="footer">
            <container name="mike.container" as="mikeContainer" label="Mike Container" htmlTag="div" htmlClass="mike-container">
                <block class="Magento\Framework\View\Element\Template" name="testing" template="Magento_Cms::test.phtml" />
            </container>
        </referenceContainer>
    </body>
</page>

app/design/frontend/PACKAGE/THEME/Magento_Cms/templates/test.phtml

<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem suscipit, adipisci, cum quos, alias similique ad eum at deserunt eligendi enim dignissimos, unde vero ipsam voluptatibus cumque accusantium! Obcaecati, quasi.</h2>

Result

If I remove the template block, the container is no longer rendered.

Related Solutions

Magento – How to override the blank theme by default.xml

there is one minor mistakes in your code

 <block class="Magento\Framework\View\Element\Html\Link\Current" name="contact-us">

Replace your block name "Contact-us" to "contactus.link"

below is the correct code please review

for extended Blank Theme

app/design/frontend/Amydus/test/Magento_Theme/layout/default.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
       <!--  you can easly add New links with following code -->
        <referenceBlock name="top.links">
               <!-- Contact us Link -->
            <block class="Magento\Framework\View\Element\Html\Link" name="contactus.link" after="register-link">
                <arguments>
                    <argument name="label" xsi:type="string" translate="false">Constact Us</argument>
                    <argument name="path" xsi:type="string" translate="false">contact-us</argument>
                </arguments>
            </block>
        </referenceBlock>
    </body>
</page>

Magento – Problem overrding .phtml file: Magento 2 Catalog module

It seems you have to set pager and sorting in your custom phtml file.

I have followed below steps pr add pagination and sorting.

In your block file add below code for add pagination:

public function __construct(
    \Magento\Catalog\Block\Product\Context $context,
    \Magento\Catalog\Model\ProductFactory $productFactory,
    \Magento\Framework\Url\Helper\Data $urlHelper,
    array $data = []
) {
    $this->_productFactory = $productFactory;
    $this->urlHelper = $urlHelper;
    parent::__construct($context, $data);

    // Get your custom collection here

    $collection = $this->getCustomCollection();

    $this->setCollection($collection);
}

public function _prepareLayout()
{

    parent::_prepareLayout();
    if ($this->getCollection()) {

        // create pager block for collection 

        $toolbar = $this->getToolbarBlock();

        $pager = $this->getLayout()->createBlock(
            'Magento\Theme\Block\Html\Pager', 'list.pager'
        )->setCollection(
            $this->getCollection() // assign collection to pager
        );
        $toolbar->setChild('product_list_toolbar_pager', $pager); // set pager block in layout
        // called prepare sortable parameters
        $collection = $this->getCollection();

        // use sortable parameters
        $orders = $this->getAvailableOrders();

        if ($orders) {
            $toolbar->setAvailableOrders($orders);
        }
        $sort = $this->getSortBy();
        if ($sort) {
            $toolbar->setDefaultOrder($sort);
        }
        $dir = $this->getDefaultDirection();
        if ($dir) {
            $toolbar->setDefaultDirection($dir);
        }
        $modes = $this->getModes();
        if ($modes) {
            $toolbar->setModes($modes);
        }
        $toolbar->setCollection($collection);

        $this->setChild('toolbar', $toolbar);
        $this->getCollection()->load();
    }

    return $this;
}

public function getToolbarHtml()
{
    return $this->getChildHtml('toolbar');
}

public function getToolbarBlock()
{
    $blockName = $this->getToolbarBlockName();
    if ($blockName) {
        $block = $this->getLayout()->getBlock($blockName);
        if ($block) {
            return $block;
        }
    }
    $block = $this->getLayout()->createBlock($this->_defaultToolbarBlock, uniqid(microtime()));

    return $block;
}

public function getMode()
{
    return $this->getChildBlock('toolbar')->getCurrentMode();
}

Also define below property:

protected $_defaultToolbarBlock = 'Magento\Catalog\Block\Product\ProductList\Toolbar';

In phtml file add below code before and after listing:

<?php echo $block->getToolbarHtml() ?>

Best Answer

Related Solutions

Magento – How to override the blank theme by default.xml

Magento – Problem overrding .phtml file: Magento 2 Catalog module

Related Topic