News & Posts- What we've said, What you've said

Posts by Category

Jun 13

Affilistore Mod – CSS Pagination

Posted by Stephen in CSS, PHP 

I'm currently in the process of setting up a number of affiliate marketing sites using the excellent Affilistore Pro v2 product, which enables multiple product data feeds, from multiple merchants & stores to be displayed on a single product/price comparison site.

There's some work to be done on the product to make it fully mature. And I've got & done some mods to it and the theme myself to fit my purposes. I'll be drip-feeding these as I go.

This is a dropin replacement for the table based pagination, replacing it with a ul/li based css version. This can be seen at my first affilistore first site: iWatches. Heck, why not stop around and buy a watch!

1. styleTemplate

Replace the pagination.tpl template with:

PLAIN TEXT
HTML:
  1. <!-- BEGIN: pagination -->
  2. <div class="paginate">
  4.     <li class="pgItems">{ITEMS}:</li>
  5.     <li class="pgPages">{PAGES}</li>
  6. </ul>
  8.     <span class="pgFloat">
  9.     {FIRSTPAGE}
  10.     {PREVIOUSPAGE}
  11.     {PLUSONE}
  12.     {NEXTPAGE}
  13.     {LASTPAGE}
  14.     </span>
  15. </ul>
  16. </div>
  17. <!-- END: pagination -->

2. StyleStylesheet
Add the CSS to the style.css file. There's some redundant css at the bottom, maybe for further use down the line. Change font/color etc to suit your theme

PLAIN TEXT
CSS:
  1. /**************/
  2. /* Pagination */
  3. /**************/
  4. .paginate{
  5. padding: 0px 0 20px 0;
  6. margin: 10px auto 10px
  7. }
  8. .paginate ul {
  9. margin: 0;
  10. padding: 0;
  11. text-align: center;
  12. font-size: 1.063em;
  13. line-height: 1.250em;
  14. font-weight: normal;
  15. }
  16.  
  17. .paginate li {
  18. position: relative;
  19. list-style-type: none;
  20. float: left;
  21. display: inline
  22. }
  23.  
  24. .paginate ul li {
  25. background-color: #F2F0E9;
  26. color: #6A1208;
  27. margin: 0
  28. }
  29.  
  30. .paginate ul li.pgItems {
  31. border-left: 1px solid #ABA46D;
  32. border-top: 1px solid #ABA46D;
  33. border-bottom: 1px solid #ABA46D;
  34. padding: 2px 5px 2px 5px;
  35. margin: 0
  36. }
  37. .paginate ul li.pgPages {
  38. border-top: 1px solid #ABA46D;
  39. border-right: 1px solid #ABA46D;
  40. border-bottom: 1px solid #ABA46D;
  41. padding: 2px 5px 2px 5px;
  42. margin-right: 5px;
  43. }
  44. .paginate ul li.pgFirstPrev {
  45. border: 1px solid #ABA46D;
  46. margin-left: 5px;
  47. padding: 2px 0;
  48. }
  49. .paginate ul li.pgId {
  50. border: 1px solid #ABA46D;
  51. margin-left: 5px;
  52. padding: 2px 0;
  53. }
  54. .paginate ul li a, .paginate ul li a:visited {
  55. color: #6A1208;
  56. text-decoration: none;
  57. padding: 2px 5px 2px 5px;
  58. }
  59. .paginate ul li a:hover {
  60. color: #6A1208;
  61. text-decoration: none;
  62. background-color: #D4D1AE;
  63. }
  64.  
  65. .paginate ul li.pgFirstPrev a, .paginate ul li.pgFirstPrev a:visited {}
  66. .paginate a.pgFirstPrev:hover {}
  67. .paginate ul li.pgId a, .paginate ul li.pgId a:visited {}
  68. .paginate a.pgId:hover {}
  69. .paginate a.currpage {}
  70. .paginate a.disabled, .paginate a.disabled:hover {
  71. background-color: white;
  72. cursor: default;
  73. font-weight: normal !important;
  74. }
  75.  
  76. .paginate ul span.pgFloat {
  77. float:right;
  78. }

3. Includes/pagination.inc.php
Find all instances of $plusone. Add a

PLAIN TEXT
HTML:
  1. <li class="pgId">

to each one to wrap the anchor tag e.g to get...

PLAIN TEXT
PHP:
  1. $plusone .= '<li class="pgId"><a href="'.$currentPage.'?pageNum_product='.min($totalPages_product, $i).$queryString_product.'">'.$i.'</a></li>';

Now go to close to the bottom of the file and find:

PLAIN TEXT
PHP:
  1. if ($totalRows_product&gt; $maxRows_product) {

Add the following below, and above the box_border lines

PLAIN TEXT
PHP:
  1. //wrap the links
  2. $firstpage = '<li class="pgFirstPrev">'.$firstpage.'</li>';
  3. $previouspage = '<li class="pgFirstPrev">'.$previouspage.'</li>';
  4. $nextpage = '<li class="pgFirstPrev">'.$nextpage.'</li>';
  5. $lastpage = '<li class="pgFirstPrev">'.$lastpage.'</li>';

Backup older versions while doing the changes!

I've done similar with the navCategories but that'll have to go into another mod post.

One Response to “Affilistore Mod – CSS Pagination”

  1. ali says:
    December 12, 2008 at 11:43 am

    hi, can you tell me how you modified the listings in iwatch so that it is in grid view, thanks in advance.

    Reply

Leave a Reply