Load Custom Block in Category List Page in Magento2

category-listinglayoutmagento2

I am trying to add custom template file in category list page.

app/design/frontend/Vendor/Theme/Magento_Catalog/layout/catalog_category_view.xml

<referenceContainer name="content">
        <block class="Magento\Framework\View\Element\Template" name="custom.block" template="Magento_Catalog::product/myCustomFile.phtml" />
    </referenceContainer>

This is loading the template in list page.

But i need to load it from my custom module.

I used below code to implement it.

app/code/Vendor/Module/view/frontend/layout/module_index_index.xml

 <referenceContainer name="content">
    <block class="Magento\Framework\View\Element\Template" name="custom.block" template="Vendor_Module::product/myCustomFile.phtml" />
</referenceContainer>

This is not loading my template in category list page. After using layout update also.

Can anyone help me on this please

Best Answer

create catalog_category_view.xml in your layout folder

app/code/Vendor/Module/view/frontend/layout/catalog_category_view.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">
    <head>
        <css src="Addify_ProductSold::css/sales_style.css"/>
    </head>
    <body>
        <referenceContainer name="content">
            <block class="Magento\Framework\View\Element\Template" name="custom.block" template="Vendor_Module::product/myCustomFile.phtml" before="-" />

        </referenceContainer>
    </body>
</page>

Related Solutions

Magento – Catalog Category not loading with pager

Finally i got a solution for the same.

Added the below function in the Toolbar.php

protected function _prepareLayout()
{
    //echo 'prepare Layout';die;
     parent::_prepareLayout();
    if ($this->getCollection()) {
        // create pager block for collection 
        $pager = $this->getLayout()->createBlock(
            'Magento\Theme\Block\Html\Pager',
            'tgl.pager'
        )->setCollection(
            $this->getCollection() // assign collection to pager
        );
        $this->setChild('pager', $pager);// set pager block in layout
    } 

    return $this;
}

 public function getPagerHtml()
{
    //echo 'getpagerhtml';die;
     $pagerBlock = $this->getChildBlock('product_list_toolbar_pager'); //print_r($pagerBlock);die;

    if ($pagerBlock instanceof \Magento\Framework\DataObject) {
        // @var $pagerBlock \Magento\Theme\Block\Html\Pager 
        $pagerBlock->setAvailableLimit($this->getAvailableLimit());

        $pagerBlock->setUseContainer(
            false
        )->setShowPerPage(
            false
        )->setShowAmounts(
            false
        )->setFrameLength(
            $this->_scopeConfig->getValue(
                'design/pagination/pagination_frame',
                \Magento\Store\Model\ScopeInterface::SCOPE_STORE
            )
        )->setJump(
            $this->_scopeConfig->getValue(
                'design/pagination/pagination_frame_skip',
                \Magento\Store\Model\ScopeInterface::SCOPE_STORE
            )
        )->setLimit(
            $this->getLimit()
        )->setCollection(
            $this->getCollection()
        );

        return $pagerBlock->toHtml();
    } 

    return '';
    //return $this->getChildHtml('pager');
}

Added toolbar.phtml in view/frontend/templates/product/list/

Magento – Magento 2 customizing category page

To add two new divs before the section element try this layout xml:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="page.top">
            <container name="div-one" before="navigation.sections" htmlTag="div" htmlClass="div-one">
                <block class="Magento\Framework\View\Element\Text">
                    <arguments>
                        <argument name="text" xsi:type="string">One</argument>
                    </arguments>
                </block>
            </container>
            <container name="div-two" before="navigation.sections" htmlTag="div" htmlClass="div-two">
                <block class="Magento\Framework\View\Element\Text">
                    <arguments>
                        <argument name="text" xsi:type="string">Two</argument>
                    </arguments>
                </block>
            </container>
        </referenceContainer>
    </body>
</page>

You can move the breadcrumbs into navigation-sections like this:

<move element="breadcrumbs" destination="store.menu"/>

However, there's a css rule that prevents it from displaying so you need to make a new rule for it:

.nav-sections .breadcrumbs {
    display: block;
}

Update

Here how to get nested divs with breadcrumbs and sections inside.

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="page.top">
            <container name="divone" htmlTag="div" htmlClass="divone">
                <container name="divtwo" htmlTag="div" htmlClass="divtwo">
                </container>
            </container>
        </referenceContainer>

        <move element="navigation.sections" destination="divtwo"/>
        <move element="breadcrumbs" destination="divtwo" before="navigation.sections"/>
    </body>
</page>

Best Answer

Related Solutions

Magento – Catalog Category not loading with pager

Magento – Magento 2 customizing category page

Related Topic