Question

Anyone have any idea about How to move toolbar before left and right sidebar in magento2 using XML?

Currently it is showing in Right side-bar.

Was it helpful?

Solution

Try this.

1. Create catalog_category_view file under

vendor/magento/theme-frontend-luma/Magento_Catalog/layout

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
    <referenceContainer name="sidebar.additional">
        <block class="Magento\Catalog\Block\Product\ListProduct" name="category.products.list2" as="product_list" template="Magento_Catalog::product/list2.phtml">

            <block class="Magento\Framework\View\Element\RendererList" name="category.product.type.details.renderers2" as="details.renderers">
                <block class="Magento\Framework\View\Element\Template" as="default"/>
            </block>
            <block class="Magento\Catalog\Block\Product\ProductList\Toolbar" name="product_list_toolbar2" template="Magento_Catalog::product/list/toolbar.phtml">
                <block class="Magento\Theme\Block\Html\Pager" name="product_list_toolbar_pager"/>
                <!-- The following code shows how to set your own pager increments -->
                <!--
                    <action method="setDefaultListPerPage">
                    <argument name="limit" xsi:type="string">4</argument>
                </action>
                <action method="setDefaultGridPerPage">
                    <argument name="limit" xsi:type="string">3</argument>
                </action>
                <action method="addPagerLimit">
                    <argument name="mode" xsi:type="string">list</argument>
                    <argument name="limit" xsi:type="string">2</argument>
                </action>
                <action method="addPagerLimit">
                    <argument name="mode" xsi:type="string">list</argument>
                    <argument name="limit" xsi:type="string">4</argument>
                </action>
                <action method="addPagerLimit">
                    <argument name="mode" xsi:type="string">list</argument>
                    <argument name="limit" xsi:type="string">6</argument>
                </action>
                <action method="addPagerLimit">
                    <argument name="mode" xsi:type="string">list</argument>
                    <argument name="limit" xsi:type="string">8</argument>
                </action>
                <action method="addPagerLimit" translate="label">
                    <argument name="mode" xsi:type="string">list</argument>
                    <argument name="limit" xsi:type="string">all</argument>
                    <argument name="label" xsi:type="string">All</argument>
                </action>
                <action method="addPagerLimit">
                    <argument name="mode" xsi:type="string">grid</argument>
                    <argument name="limit" xsi:type="string">3</argument>
                </action>
                <action method="addPagerLimit">
                    <argument name="mode" xsi:type="string">grid</argument>
                    <argument name="limit" xsi:type="string">6</argument>
                </action>
                <action method="addPagerLimit">
                    <argument name="mode" xsi:type="string">grid</argument>
                    <argument name="limit" xsi:type="string">9</argument>
                </action>
                <action method="addPagerLimit" translate="label">
                    <argument name="mode" xsi:type="string">grid</argument>
                    <argument name="limit" xsi:type="string">all</argument>
                    <argument name="label" xsi:type="string">All</argument>
                </action>
                -->
            </block>
            <action method="setToolbarBlockName">
                <!--<argument name="name" xsi:type="string">product_list_toolbar</argument>-->
            </action>
        </block>
    </referenceContainer>

</body>

2. Create list2.phtml file under

vendor/magento/theme-frontend-luma/Magento_Catalog/templates/product

<?php
use Magento\Framework\App\Action\Action;

$_productCollection = $block->getLoadedProductCollection();
$_helper = $this->helper('Magento\Catalog\Helper\Output');
?>
<?php if (!$_productCollection->count()): ?>
<!--<div class="message info empty"><div><?php /* @escapeNotVerified */ echo __('We can\'t find products matching the selection.') ?></div></div>-->
<?php else: ?>
<?php echo $block->getToolbarHtml() ?>
<?php echo $block->getAdditionalHtml() ?>
<?php
if ($block->getMode() == 'grid') {
    $viewMode = 'grid';
    $image = 'category_page_grid';
    $showDescription = false;
    $templateType = \Magento\Catalog\Block\Product\ReviewRendererInterface::SHORT_VIEW;
} else {
    $viewMode = 'list';
    $image = 'category_page_list';
    $showDescription = true;
    $templateType = \Magento\Catalog\Block\Product\ReviewRendererInterface::FULL_VIEW;
}
/**
 * Position for actions regarding image size changing in vde if needed
 */
$pos = $block->getPositioned();
?>
<!-- <div class="products wrapper <?php /* @escapeNotVerified */ echo $viewMode; ?> products-<?php /* @escapeNotVerified */ echo $viewMode; ?>">
<?php $iterator = 1; ?>
    <ol class="products list items product-items">
<?php /** @var $_product \Magento\Catalog\Model\Product */ ?>
<?php foreach ($_productCollection as $_product): ?>
    <?php /* @escapeNotVerified */ echo($iterator++ == 1) ? '<li class="item product product-item">' : '</li><li class="item product product-item">' ?>
                <div class="product-item-info" data-container="product-grid">
    <?php
    $productImage = $block->getImage($_product, $image);
    if ($pos != null) {
        $position = ' style="left:' . $productImage->getWidth() . 'px;'
            . 'top:' . $productImage->getHeight() . 'px;"';
    }
    ?>
    <?php // Product Image ?>
                    <a href="<?php /* @escapeNotVerified */ echo $_product->getProductUrl() ?>" class="product photo product-item-photo" tabindex="-1">
    <?php echo $productImage->toHtml(); ?>
                    </a>
                    <div class="product details product-item-details">
    <?php
    $_productNameStripped = $block->stripTags($_product->getName(), null, true);
    ?>
                        <strong class="product name product-item-name">
                            <a class="product-item-link"
                               href="<?php /* @escapeNotVerified */ echo $_product->getProductUrl() ?>">
    <?php /* @escapeNotVerified */ echo $_helper->productAttribute($_product, $_product->getName(), 'name'); ?>
                            </a>
                        </strong>
    <?php echo $block->getReviewsSummaryHtml($_product, $templateType); ?>
    <?php /* @escapeNotVerified */ echo $block->getProductPrice($_product) ?>
    <?php echo $block->getProductDetailsHtml($_product); ?>

                        <div class="product-item-inner">
                            <div class="product actions product-item-actions"<?php echo strpos($pos, $viewMode . '-actions') ? $position : ''; ?>>
                                <div class="actions-primary"<?php echo strpos($pos, $viewMode . '-primary') ? $position : ''; ?>>
    <?php if ($_product->isSaleable()): ?>
        <?php $postParams = $block->getAddToCartPostParams($_product); ?>
                                            <form data-role="tocart-form" action="<?php /* @escapeNotVerified */ echo $postParams['action']; ?>" method="post">
                                                <input type="hidden" name="product" value="<?php /* @escapeNotVerified */ echo $postParams['data']['product']; ?>">
                                                <input type="hidden" name="<?php /* @escapeNotVerified */ echo Action::PARAM_NAME_URL_ENCODED; ?>" value="<?php /* @escapeNotVerified */ echo $postParams['data'][Action::PARAM_NAME_URL_ENCODED]; ?>">
        <?php echo $block->getBlockHtml('formkey') ?>
                                                <button type="submit"
                                                        title="<?php echo $block->escapeHtml(__('Add to Cart')); ?>"
                                                        class="action tocart primary">
                                                    <span><?php /* @escapeNotVerified */ echo __('Add to Cart') ?></span>
                                                </button>
                                            </form>
    <?php else: ?>
        <?php if ($_product->getIsSalable()): ?>
                                                    <div class="stock available"><span><?php /* @escapeNotVerified */ echo __('In stock') ?></span></div>
        <?php else: ?>
                                                    <div class="stock unavailable"><span><?php /* @escapeNotVerified */ echo __('Out of stock') ?></span></div>
        <?php endif; ?>
    <?php endif; ?>
                                </div>
                                <div data-role="add-to-links" class="actions-secondary"<?php echo strpos($pos, $viewMode . '-secondary') ? $position : ''; ?>>
    <?php if ($this->helper('Magento\Wishlist\Helper\Data')->isAllow()): ?>
                                            <a href="#"
                                               class="action towishlist"
                                               title="<?php echo $block->escapeHtml(__('Add to Wish List')); ?>"
                                               aria-label="<?php echo $block->escapeHtml(__('Add to Wish List')); ?>"
                                               data-post='<?php /* @escapeNotVerified */ echo $block->getAddToWishlistParams($_product); ?>'
                                               data-action="add-to-wishlist"
                                               role="button">
                                                <span><?php /* @escapeNotVerified */ echo __('Add to Wish List') ?></span>
                                            </a>
    <?php endif; ?>
    <?php
    $compareHelper = $this->helper('Magento\Catalog\Helper\Product\Compare');
    ?>
                                    <a href="#"
                                       class="action tocompare"
                                       title="<?php echo $block->escapeHtml(__('Add to Compare')); ?>"
                                       aria-label="<?php echo $block->escapeHtml(__('Add to Compare')); ?>"
                                       data-post='<?php /* @escapeNotVerified */ echo $compareHelper->getPostDataParams($_product); ?>'
                                       role="button">
                                        <span><?php /* @escapeNotVerified */ echo __('Add to Compare') ?></span>
                                    </a>
                                </div>
                            </div>
    <?php if ($showDescription): ?>
                                    <div class="product description product-item-description">
        <?php /* @escapeNotVerified */ echo $_helper->productAttribute($_product, $_product->getShortDescription(), 'short_description') ?>
                                        <a href="<?php /* @escapeNotVerified */ echo $_product->getProductUrl() ?>" title="<?php /* @escapeNotVerified */ echo $_productNameStripped ?>"
                                           class="action more"><?php /* @escapeNotVerified */ echo __('Learn More') ?></a>
                                    </div>
    <?php endif; ?>
                        </div>
                    </div>
                </div>
    <?php echo($iterator == count($_productCollection) + 1) ? '</li>' : '' ?>
<?php endforeach; ?>
    </ol>
</div>-->

Note : Here, i moved toolbar to sidebar(layered navigation).

I hope it works!

OTHER TIPS

I think it's not moving by using XML, Because It's commenting in module-catalog/templates/product/list.phtml file.

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

Also it's define in module-catalog/view/frontend/layout/catalog_category_view.xml category.products.list block

<referenceContainer name="content">
    <block class="Magento\Catalog\Block\Category\View" name="category.products" template="Magento_Catalog::category/products.phtml">
        <block class="Magento\Catalog\Block\Product\ListProduct" name="category.products.list" as="product_list" template="Magento_Catalog::product/list.phtml">
            <container name="category.product.list.additional" as="additional" />
            <block class="Magento\Framework\View\Element\RendererList" name="category.product.type.details.renderers" as="details.renderers">
                <block class="Magento\Framework\View\Element\Template" name="category.product.type.details.renderers.default" as="default"/>
            </block>
            <block class="Magento\Catalog\Block\Product\ProductList\Item\Container" name="category.product.addto" as="addto">
                <block class="Magento\Catalog\Block\Product\ProductList\Item\AddTo\Compare"
                       name="category.product.addto.compare" as="compare"
                       template="Magento_Catalog::product/list/addto/compare.phtml"/>
            </block>
            <block class="Magento\Catalog\Block\Product\ProductList\Toolbar" name="product_list_toolbar" template="Magento_Catalog::product/list/toolbar.phtml">
                <block class="Magento\Theme\Block\Html\Pager" name="product_list_toolbar_pager"/>
            </block>
            <action method="setToolbarBlockName">
                <argument name="name" xsi:type="string">product_list_toolbar</argument>
            </action>
        </block>
    </block>
</referenceContainer>

Try This code Create the custom module.

Add this code in catalog_category_view.xml:

    <referenceContainer name="content">
        <block class="{{Package Name}}\{{Your Module Name}}\Block\Toolbar" before="-" name="product_list_custom_toolbar" template="Magento_Catalog::product/list/toolbar.phtml">
            <block class="Magento\Theme\Block\Html\Pager" name="product_list_toolbar_pager"/>
        </block>
    </referenceContainer>

Now Create New Toolbar.php a file at {{Package Name}}\{{Your Module Name}}\Block\Toolbar Then past below code in that new file:

namespace {{Package Name}}\{{Your Module Name}}\Block;
class Toolbar extends \Magento\Catalog\Block\Product\ProductList\Toolbar
{
    public function getCollection()
    {
        $productList = $this->getLayout()->getBlock('category.products.list');
        // use sortable parameters
        $orders = $productList->getAvailableOrders();
        if ($orders) {
            $this->setAvailableOrders($orders);
        }
        $sort = $productList->getSortBy();
        if ($sort) {
            $this->setDefaultOrder($sort);
        }
        $dir = $productList->getDefaultDirection();
        if ($dir) {
            $this->setDefaultDirection($dir);
        }
        $modes = $productList->getModes();
        if ($modes) {
            $this->setModes($modes);
        }
        $coo = $productList->getLoadedProductCollection();
        // set collection to productList and apply sort
        $this->setCollection($productList->getLoadedProductCollection());
        return parent::getCollection();
    }
}

Now remove default block from the layout of category view.

You can move sidebar before main content area using layout code below :

Step 1 : create / copy 2columns-left.xml file in your Magento_Theme/page_layout/ folder and replace below contents:

Also you can change / add your css classes in container.

<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
<update handle="1column"/>
<referenceContainer name="main" htmlClass="column main col-md-10"/>
<referenceContainer name="columns">
    <container name="col-sidebar" htmlTag="div" htmlClass="col-md-2" before="main">
        <container name="div.sidebar.additional" htmlTag="div" htmlClass="sidebar sidebar-additional testing-123-festing" before="div.sidebar.main">
            <container name="sidebar.additional" as="sidebar_additional" label="Sidebar Additional"/>
        </container>
        <container name="div.sidebar.main" htmlTag="div" htmlClass="sidebar sidebar-main">
            <container name="sidebar.main" as="sidebar_main" label="Sidebar Main"/>
        </container>
    </container>
</referenceContainer>

1. Module way.

Create a new module Vendor_Module

app/code/Vendor/Module/etc/module.xml

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Vendor_Module" setup_version="2.0.0">
        <sequence>
            <module name="Magento_Catalog"/>
        </sequence>
    </module>
</config>

Add a plugin to prevent the default toolbar from showing.

app/code/Vendor/Module/etc/frontend/di.xml

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Catalog\Block\Product\ListProduct">
        <plugin name="vendor-catalog-productlist" type="Vendor\Module\Plugin\ProductList" />
    </type>
</config>

app/code/Vendor/Module/Plugin/ProductList.php

<?php

namespace Vendor\Module\Plugin;

class ProductList
{
    /**
     * After dispatch
     *
     * @param \Magento\Catalog\Block\Product\ListProduct $subject
     * @param string $result
     */
    public function afterGetToolbarHtml(
        \Magento\Catalog\Block\Product\ListProduct $subject,
        $result
    ) {
        return '';
    }
}

Add a new block to the category page.

app/code/Vendor/Module/view/frontend/layout/catalog_category_view.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="columns.top">
            <block class="Vendor\Module\Block\ListProduct\Toolbar" name="vendor.category.products.list">
                <arguments>
                    <argument name="product_list_block_name" xsi:type="string">category.products.list</argument>
                </arguments>
            </block>
        </referenceContainer>
    </body>
</page>

app/code/Vendor/Module/Block/ListProduct/Toolbar.php

<?php

namespace Vendor\Module\Block\ListProduct;

class Toolbar extends \Magento\Framework\View\Element\Template
{
    /**
     * Render block HTML
     *
     * @return string
     */
    protected function _toHtml()
    {
        $productList = $this->getLayout()->getBlock(
            $this->getData('product_list_block_name')
        );
        if ($productList) {
            $productList->toHtml();
            return $productList->getChildHtml('toolbar');
        }
        return '';
    }
}

2. You can apply the same changes to your theme

You no need plugin because you can just comment a line where default toolbar rendered.

Comment $block->getToolbarHtml() lines in

app/design/frontend/Vendor/theme/Magento_Catalog/templates/product/list.phtml

Create the same toolbar class and put it in xml layout.

Vendor\Module\Block\ListProduct\Toolbar

The main problem is the old code base of the toolbar and product list relationship. Some of it has already been rectified in Magento 2.2.x, but there are still problems. For instance, no matter where or how you put your toolbar in the layout, the product list block will always move the toolbar back as its own child (see this comment on Github).

Here is yet another solution which is a combination of Nicholas Miller's and kunj's solution. The advantage over Nicholas Miller's and Chirag Patel's solution is, that the product collection will not be loaded twice.

Vendor/Module/Block/Product/ProductList/Toolbar.php

namespace Vendor\Module\Block\Product\ProductList;

class Toolbar extends \Magento\Catalog\Block\Product\ProductList\Toolbar
{
    public const DEFAULT_PRODUCTLIST_BLOCKNAME = 'category.products.list';

    protected function getProductListBlock()
    {
        $blockName = $this->getProductListBlockName();

        if ($blockName) {
            return $this->getLayout()->getBlock($blockName);
        }

        return $this->getLayout()->getBlock(self::DEFAULT_PRODUCTLIST_BLOCKNAME) ?: null;
    }

    public function getCollection()
    {
        if (!empty(parent::getCollection())) {
            return parent::getCollection();
        }

        $productList = $this->getProductListBlock();

        if (empty($productList)) {
            return parent::getCollection();
        }

        $productList->configureToolbarPublic($this, $productList->getLoadedProductCollection());

        return parent::getCollection();
    }
}

Vendor/Module/Block/Product/ListProduct.php

namespace Vendor\Module\Block\Product;

use Vendor\Module\Block\Product\ProductList\Toolbar;
use Magento\Catalog\Model\ResourceModel\Product\Collection;

class ListProduct extends \Magento\Catalog\Block\Product\ListProduct
{
    protected function _beforeToHtml()
    {
        $collection = $this->_getProductCollection();

        $toolbar = $this->getToolbarFromLayout();

        if (!$toolbar) {
            $toolbar = $this->getLayout()->createBlock($this->_defaultToolbarBlock, uniqid(microtime()));
            $this->setChild('toolbar', $toolbar);
        }

        $this->configureToolbarPublic($toolbar, $collection);

        $collection->load();

        return $this;
    }

    public function configureToolbarPublic(Toolbar $toolbar, Collection $collection)
    {
        // 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);
        }
        // set collection to toolbar and apply sort
        $toolbar->setCollection($collection);
    }
}

etc/frontend/di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">

    <preference for="Magento\Catalog\Block\Product\ListProduct" type="Vendor\Module\Block\Product\ListProduct" />
    <preference for="Magento\Catalog\Block\Product\ProductList\Toolbar" type="Vendor\Module\Block\Product\ProductList\Toolbar" />

</config>

Now you should be able to move the product_list_toolbar freely without any problems. e.g.: 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">
    <body>
        <move element="product_list_toolbar" destination="content" before="-" />
    </body>
</page>

As an added bonus you can also set a custom product list block name, if you need to:

<?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>
        <referenceBlock element="product_list_toolbar">
            <action method="setProductListBlockName">
                <argument name="name" xsi:type="string">my_product_list_block</argument>
            </action>
        </referenceBlock>
    </body>
</page>

Likewise, the correct toolbar block name should also be set accordingly on the product list's block (if your custom toolbar's name is something other than the default).

Update

For this solution to work, you need at least Magento 2.2.6.

Just add below code in catalog_category_view.xml file in your custom theme:-

<move element="product_list_toolbar" destination="columns.top" after="-" />
Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top