Better Looking Oscommerce Pagination

[dealwititp]

Hi,

 

I've looked everywhere for an answer to this, and can't believe no else has wanted this also. Is there a way to style the oscommerce pagination for the search results so that it looks like this? Does anyone know of a contribution or where to begin cracking into this? If someone can point me in the right direction, I'll promise to create a contribution that everyone can use. I tired of seeing that ugly [<<Previous] and [Next>>] at the bottom of the page.

 

Thanks,

 

Walt

[spoofy]

I completely agree. I hate the way the current pagination works. It's one of the things on my to do list.

 

To change it you will need to modify /catalog/includes/classes/split_page_results.php

 

Instead of doing any major modifications, you can simply add some CSS styling for pageResults I believe

 

Keep us posted.

[oscMarket]

in split_page_results.php change:

 

// display split-page-number-links
   function display_links($max_page_links, $parameters = '') {
     global $PHP_SELF, $request_type;

     $display_links_string = '<div class="pagination"><ul>';

     //$class = 'class="currentpage"';

     if (tep_not_null($parameters) && (substr($parameters, -1) != '&')) $parameters .= '&';

// previous button - not displayed on first page
     if ($this->current_page_number > 1) $display_links_string .= '<li><a href="' . tep_href_link(basename($PHP_SELF), $parameters . $this->page_name . '=' . ($this->current_page_number - 1), $request_type) . '"  title=" ' . PREVNEXT_TITLE_PREVIOUS_PAGE . ' " class="prevnext">' . PREVNEXT_BUTTON_PREV . '</a></li>  ';

// check if number_of_pages > $max_page_links
     $cur_window_num = intval($this->current_page_number / $max_page_links);
     if ($this->current_page_number % $max_page_links) $cur_window_num++;

     $max_window_num = intval($this->number_of_pages / $max_page_links);
     if ($this->number_of_pages % $max_page_links) $max_window_num++;

// previous window of pages
     if ($cur_window_num > 1) $display_links_string .= '<li><a href="' . tep_href_link(basename($PHP_SELF), $parameters . $this->page_name . '=' . (($cur_window_num - 1) * $max_page_links), $request_type) . '"  title=" ' . sprintf(PREVNEXT_TITLE_PREV_SET_OF_NO_PAGE, $max_page_links) . ' ">...</a></li>';

// page nn button
     for ($jump_to_page = 1 + (($cur_window_num - 1) * $max_page_links); ($jump_to_page <= ($cur_window_num * $max_page_links)) && ($jump_to_page <= $this->number_of_pages); $jump_to_page++) {
       if ($jump_to_page == $this->current_page_number) {
         $display_links_string .= ' <li><a href="" class="currentpage">' . $jump_to_page . '</a></li> ';
       } else {
         $display_links_string .= ' <li><a href="' . tep_href_link(basename($PHP_SELF), $parameters . $this->page_name . '=' . $jump_to_page, $request_type) . '"  title=" ' . sprintf(PREVNEXT_TITLE_PAGE_NO, $jump_to_page) . ' ">' . $jump_to_page . '</a></li> ';
       }
     }

// next window of pages
     if ($cur_window_num < $max_window_num) $display_links_string .= '<li><a href="' . tep_href_link(basename($PHP_SELF), $parameters . $this->page_name . '=' . (($cur_window_num) * $max_page_links + 1), $request_type) . '"  title=" ' . sprintf(PREVNEXT_TITLE_NEXT_SET_OF_NO_PAGE, $max_page_links) . ' ">...</a></li> ';

// next button
     if (($this->current_page_number < $this->number_of_pages) && ($this->number_of_pages != 1)) $display_links_string .= ' <li><a href="' . tep_href_link(basename($PHP_SELF), $parameters . 'page=' . ($this->current_page_number + 1), $request_type) . '"  title=" ' . PREVNEXT_TITLE_NEXT_PAGE . ' " class="prevnext">' . PREVNEXT_BUTTON_NEXT . '</a></li> ';

  $display_links_string .= '</ul></div>';

     return $display_links_string;
   }

 

 

Add to stylesheet:

 

.pagination{
padding: 2px;
}

.pagination ul{
margin: 0;
padding: 0;
text-align: left; /*Set to "right" to right align pagination interface*/
font-size: 16px;
}

.pagination li{
list-style-type: none;
display: inline;
padding-bottom: 1px;
}

.pagination a, .pagination a:visited{
padding: 0 5px;
border: 1px solid #9aafe5;
text-decoration: none; 
color: #2e6ab1;
}

.pagination a:hover, .pagination a:active{
border: 1px solid #2b66a5;
color: #000;
background-color: #FFFF80;
}

.pagination a.currentpage{
background-color: #2e6ab1;
color: #FFF !important;
border-color: #2b66a5;
font-weight: bold;
cursor: default;
}

.pagination a.disablelink, .pagination a.disablelink:hover{
background-color: white;
cursor: default;
color: #929292;
border-color: #929292;
font-weight: normal !important;
}

.pagination a.prevnext{
font-weight: bold;
}

 

 

Your pagination go look like: http://www.dynamicdrive.com/style/csslibrary/item/css_pagination_links/P20/

 

PS: you need to do some changes where ever splitpages is called to position it correctly

[♥kymation]

Thanks for the code. This does make a nice improvement over the stock text links. I've made a minor change to the code to disable the Previous link on the first page and the Next link on the last page:

 

// display split-page-number-links
   function display_links($max_page_links, $parameters = '') {
     global $PHP_SELF, $request_type;

     $display_links_string = '<div class="pagination"><ul>';

     if (tep_not_null($parameters) && (substr($parameters, -1) != '&')) $parameters .= '&';

// previous button - disabled on first page
     if ($this->current_page_number == 1) {
       $display_links_string .= '<li><a href="#" class="prevnext disablelink" onclick="return false">' . PREVNEXT_BUTTON_PREV . '</a></li> ';
     } else {
       $display_links_string .= '<li><a href="' . tep_href_link( basename( $PHP_SELF ), $parameters . $this->page_name . '=' . ($this->current_page_number - 1), $request_type) . '" title=" ' . PREVNEXT_TITLE_PREVIOUS_PAGE . ' " class="prevnext disablelink">' . PREVNEXT_BUTTON_PREV . '</a></li> ';
     }

// check if number_of_pages > $max_page_links
     $cur_window_num = intval($this->current_page_number / $max_page_links);
     if ($this->current_page_number % $max_page_links) $cur_window_num++;

     $max_window_num = intval($this->number_of_pages / $max_page_links);
     if ($this->number_of_pages % $max_page_links) $max_window_num++;

// previous window of pages
     if ($cur_window_num > 1) $display_links_string .= '<li><a href="' . tep_href_link(basename($PHP_SELF), $parameters . $this->page_name . '=' . (($cur_window_num - 1) * $max_page_links), $request_type) . '" class="pageResults" title=" ' . sprintf(PREVNEXT_TITLE_PREV_SET_OF_NO_PAGE, $max_page_links) . ' ">...</a></li>';

// page nn button
     for ($jump_to_page = 1 + (($cur_window_num - 1) * $max_page_links); ($jump_to_page <= ($cur_window_num * $max_page_links)) && ($jump_to_page <= $this->number_of_pages); $jump_to_page++) {
       if ($jump_to_page == $this->current_page_number) {
         $display_links_string .= ' <li><a href="" class="currentpage">' . $jump_to_page . '</a></li> ';
       } else {
         $display_links_string .= ' <li><a href="' . tep_href_link(basename($PHP_SELF), $parameters . $this->page_name . '=' . $jump_to_page, $request_type) . '" class="pageResults" title=" ' . sprintf(PREVNEXT_TITLE_PAGE_NO, $jump_to_page) . ' "><u>' . $jump_to_page . '</u></a> ';
       }
     }

// next window of pages
     if ($cur_window_num < $max_window_num) $display_links_string .= '<li><a href="' . tep_href_link(basename($PHP_SELF), $parameters . $this->page_name . '=' . (($cur_window_num) * $max_page_links + 1), $request_type) . '" class="pageResults" title=" ' . sprintf(PREVNEXT_TITLE_NEXT_SET_OF_NO_PAGE, $max_page_links) . ' ">...</a></li> ';

// next button - disabled on last page
     if ($this->current_page_number == $this->number_of_pages) {
       $display_links_string .= ' <li><a href="#" class="prevnext disablelink" onclick="return false">' . PREVNEXT_BUTTON_NEXT . '</a></li> ';
     } else {
       $display_links_string .= ' <li><a href="' . tep_href_link(basename($PHP_SELF), $parameters . 'page=' . ($this->current_page_number + 1), $request_type) . '" title=" ' . PREVNEXT_TITLE_NEXT_PAGE . ' " class="prevnext">' . PREVNEXT_BUTTON_NEXT . '</a></li> ';
     }

     $display_links_string .= '</ul></div>';

     return $display_links_string;
   }

Regards

Jim