Thursday, December 2, 2010

Magento - Custom Pagination



custom pagination

Ok so you want to have a different pagination.. that can be arranged.. :)

3 Files to edit:
  • styles.css
  • template/catalog/product/list/toolbar.phtml
  • template/page/html/pager.phtml

toolbar.phtml
<?php if($this->getCollection()->getSize()): ?>
<div class="toolbar">
<div class="pager">

<div class="limiter">
<label><?php echo $this->__('Toon:') ?></label>
<?php foreach ($this->getAvailableLimit() as  $_key=>$_limit): ?>
<a href="<?php echo $this->getLimitUrl($_key) ?>"><?php echo $_limit ?></a>
<?php endforeach; ?>
</div>
<?php echo $this->getPagerHtml() ?>

</div>
</div>


pager.phtml
<?php if($this->getCollection()->getSize()): ?>

<?php if($this->getUseContainer()): ?>
<div class="pager">
<?php endif ?>

<?php if($this->getShowAmounts()): ?>
<p class="amount">
<?php if($this->getLastPageNum()>1): ?>
<?php echo $this->__('Items %s to %s of %s total', $this->getFirstNum(), $this->getLastNum(), $this->getTotalNum()) ?>
<?php else: ?>
<strong><?php echo $this->__('%s Item(s)', $this->getTotalNum()) ?></strong>
<?php endif; ?>
</p>
<?php endif ?>

<?php if($this->getShowPerPage()): ?>
<div class="limiter">
<label><?php echo $this->__('Show') ?></label>
<select onchange="setLocation(this.value)">
<?php foreach ($this->getAvailableLimit() as  $_key=>$_limit): ?>
<option value="<?php echo $this->getLimitUrl($_key) ?>"<?php if($this->isLimitCurrent($_key)): ?> selected="selected"<?php endif ?>>
<?php echo $_limit ?>
</option>
<?php endforeach; ?>
</select> <?php echo $this->__('per page') ?>
</div>
<?php endif ?>

<!-- ############################ PAGER TOOLBAR ############################# -->

<?php if($this->getLastPageNum()>1): ?>
<div class="pages">
<ol>

<!-- ##################### PREVIOUS TOOLBAR ####################### -->
<div class="previous">
<?php if (!$this->isFirstPage()): ?>
<a class="previous-link" href="<?php echo $this->getPreviousPageUrl() ?>" title="<?php echo $this->__('Previous') ?>">
<?php if(!$this->getAnchorTextForPrevious()): ?>
<img src="<?php echo $this->getSkinUrl('images/i_pager-prev.gif') ?>" alt="<?php echo $this->__('Previous') ?>" class="v-middle" />
<?php else: ?>
<?php echo $this->getAnchorTextForPrevious() ?>
<?php endif;?>
</a>
<?php else: ?>
<span class="no-previous">

<?php echo $this->getAnchorTextForPrevious() ?>
</span>
<?php endif;?>
</div>

<?php if ($this->canShowFirst()): ?>
<li><a class="first" href="<?php echo $this->getFirstPageUrl() ?>">1</a></li>
<?php endif;?>

<?php if ($this->getCurrentPage() >= 4): ?>
<li><a class="first" href="<?php echo $this->getFirstPageUrl() ?>">1</a></li>
<li class="ellipse"> ... </li>
<?php endif; ?>

<?php if ($this->canShowPreviousJump()): ?>
<li><a class="previous_jump" title="" href="<?php echo $this->getPreviousJumpUrl() ?>">...</a></li>
<?php endif;?>

<?php foreach ($this->getFramePages() as $_page): ?>
<?php if ($this->isPageCurrent($_page)): ?>
<li class="current"><?php echo $_page ?></li>
<?php else: ?>
<li><a href="<?php echo $this->getPageUrl($_page) ?>"><?php echo $_page ?></a></li>
<?php endif;?>
<?php endforeach;?>


<?php if ($this->canShowNextJump()): ?>
<li><a class="next_jump" title="" href="<?php echo $this->getNextJumpUrl() ?>">...</a></li>
<?php endif;?>

<?php
$lastpage = $this->getLastPageNum();
$lastpage = $lastpage - 2;
?>

<?php if ($this->getCurrentPage() < $lastpage ): ?>
<li class="ellipse"> ... </li>
<li><a class="last" href="<?php echo $this->getLastPageUrl() ?>"><?php echo $this->getLastPageNum() ?></a></li>
<?php endif; ?>

<?php if ($this->canShowLast()): ?>
<li><a class="last" href="<?php echo $this->getLastPageUrl() ?>"><?php echo $this->getLastPageNum() ?></a><li>
<?php endif;?>

<!-- ##################### NEXT TOOLBAR ####################### -->
<div class="next">
<?php if (!$this->isLastPage()): ?>
<a class="next-link" href="<?php echo $this->getNextPageUrl() ?>" title="<?php echo $this->__('Next >') ?>">
<?php if(!$this->getAnchorTextForNext()): ?>
<img src="<?php echo $this->getSkinUrl('images/i_pager-next.gif') ?>" alt="<?php echo $this->__('Next') ?>" class="v-middle" />
<?php else: ?>
<?php echo $this->getAnchorTextForNext() ?>

<?php endif;?>
</a>
<?php else: ?>
<span class="no-next">
<?php echo $this->getAnchorTextForNext() ?>
</span>
<?php endif;?>
</div>
</ol>

</div>

<?php endif; ?>
<?php if($this->getUseContainer()): ?>
</div>
<?php endif ?>
<?php endif ?>
Style it with CSS and you can have a new pagination.. Godbless!

3 comments:

  1. Hi Christian,
    Do you know if this works with Magento 1.7? I wasn't sure if this code completely replaces the original code - or just certain parts of it?
    I've been unsuccessful in getting this to work properly - can you spare the time to provide further detail on how to implement this?
    Very many thanks

    ReplyDelete