Magento – Display Sort by option on Top and Pagination at bottom

pagertoolbar

On my product listing page, I need to change the display of Toolbar and Pager.

On top, I want to display Sort by option while on bottom I need to display Pagination

How can I achieve this ?

Please Guide.

Thanks.

Best Answer

One way of solving your issue is by hiding and showing toolbar HTML elements

For top toolbar your CSS should look like the following:

.toolbar .pager {
    display: none;
}

For bottom toolbar your CSS should look like the following:

.toolbar-bottom .toolbar .pager {
    display: block;
}

.toolbar-bottom .toolbar .sorter {
    display: none;
}

Another solution is to create a new toolbar template file for bottom and keep pager code and remove sort code and then call toolbar bottom template in product listing. Follow the following steps to accomplish this solution:

Copy toolbar.phtml from app/design/frontend/base/default/template/catalog/product/list/toolbar.phtml to your custom theme template app/design/frontend/custom_package/custom_template/product/list/toolbar.phtml
Make a copy of toolbar.phtml and name it toolbar-bottom.phtml
Edit toolbar.phtml and remove pager code
Edit toolbar-bottom.phtml and remove sort code
Copy list.phtml from app/design/frontend/base/default/template/catalog/product/list.phtml to app/design/frontend/custom_package/custom_template/catalog/product/list.phtml
Edit list.phtml and replace the following code:

Existing code:

<div class="toolbar-bottom">
    <?php echo $this->getToolbarHtml() ?>
</div>

With this code:

<div class="toolbar-bottom">
    <?php echo $this->getToolbarBlock()->setTemplate('catalog/product/list/toolbar-bottom.phtml')->toHtml() ?>
</div>

Related Solutions

Toolbar Product Grid – How to Disable or Remove Pager in Toolbar Above Product Grid

You can do this by modifying catalog/product/list.phtml and catalog/prodct/list/toolbar.phtml from your theme.

First, the changes in catalog/product/list/toolbar.phtml.
Wrap the div with class pager in this if statement (the full div element not just the tag opening line):

<?php if (!$this->getHidePager()) : ?>
   <!-- <div class="pager"> here -->
<?php endif;?>

now in catalog/product/list.phtml replace this line at the top of the file:

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

with this one:

<?php echo $this->getToolbarBlock()->setHidePager(true)->toHtml();?>

and the same line at the bottom of the file with this one:

<?php echo $this->getToolbarBlock()->setHidePager(false)->toHtml();?>

Magento – PAGINATION : Show First and Last Page at pager / toolbar grid view

For me the solution was to dig in the code and find where and why the canShowFirst() and canShowLast() logic was failing

Mage_Catalog_Block_Product_List_Toolbar on line 815:

    $pagerBlock->setUseContainer(false)
        ->setShowPerPage(false)
        ->setShowAmounts(false)
        ->setLimitVarName($this->getLimitVarName())
        ->setPageVarName($this->getPageVarName())
        ->setLimit($this->getLimit())
        ->setFrameLength(Mage::getStoreConfig('design/pagination/pagination_frame'))
        ->setJump(Mage::getStoreConfig('design/pagination/pagination_frame_skip'))
        ->setCollection($this->getCollection());

setJump() was using an admin setting in System > Config > General > Design > Pagination. 'pagination_frame_skip' was empty, but when i echoed it in pager.phtml it gave a value of 0. Seems like the core code should check the value of the store config before setting the jump, but that neither here nor there. I set the value in the admin to 5(which is the default setting in Mage_Page_Block_Html_Pager, but Mage_Catalog_Block_Product_List_Toolbar was overriding it) and all the canShow logic was now working as expected.

Best Answer

Related Solutions

Toolbar Product Grid – How to Disable or Remove Pager in Toolbar Above Product Grid

Magento – PAGINATION : Show First and Last Page at pager / toolbar grid view

Related Topic