Prestashop pagination.tpl template tune up

February 12th, 2012

kfedorov

The problem

Many of us noticed that pagination in prestashop works a bit different then you expect it to work.

For example this is pagination for 4 pages:

Why it shows 1,2,3 and where is 4? Just click the second page and:

* them same situation with the last page.

Ok, showing 1 2 3 … 4 wont be great idea but continue showing 1 2 3 is also not the best idea.

Why

I don’t know the motivation of creators to do so and can fins only several reasons:

pagination output is assigned to the creators of the template which more likely to use the default template code;
the main idea was to make pagination compact?!

Nevertheless pagination works correct with large number of pages:

Lets try to solve it!

I saw threads on different forums there people meet this difficulties and sometimes as an alternative solution proposed to increase the number of pages displayed around the selected one. Default value is 2.

To do so you need to edit /classes/FrontController.php and change the value $range=2 to the bigger one.

This method has several disadvantages:

It’s not good idea to edit core files
It’s not the real solution as you just increase the number of pages around selected one. For example if you set $range=3 it will be great for 4 pages pagination but you will meet the same problem with 5 pages.

So I find this layout too bad for my shop as users can’t understand the real size of catalog and can’t properly navigate there.

Updated pagination code

I made several add-ons to the default code that solved the problem. The part of final pagination.tpl presented below (new code marked yellow bacckground):

{if $start!=$stop}

    <ul class="pagination">
    {if $p != 1}
        {assign var='p_previous' value=$p-1}
        <li id="pagination_previous"><a href="{$link->goPage($requestPage, $p_previous)}">&laquo;&nbsp;{l s='Previous'}</a></li>
    {else}
        <li id="pagination_previous" class="disabled"><span>&laquo;&nbsp;{l s='Previous'}</span></li>
    {/if}

    {if $start-$range<$range}
        {section name=pagination_start start=1 loop=$start step=1}
            <li><a href="{$link->goPage($requestPage, $smarty.section.pagination_start.index)}">{$smarty.section.pagination_start.index|escape:'htmlall':'UTF-8'}</a></li>
        {/section}
    {/if}

    {if $start>3}
        <li><a href="{$link->goPage($requestPage, 1)}">1</a></li>
        <li class="truncate">...</li>
    {/if}
    {section name=pagination start=$start loop=$stop+1 step=1}
        {if $p == $smarty.section.pagination.index}
            <li class="current"><span>{$p|escape:'htmlall':'UTF-8'}</span></li>
        {else}
            <li><a href="{$link->goPage($requestPage, $smarty.section.pagination.index)}">{$smarty.section.pagination.index|escape:'htmlall':'UTF-8'}</a></li>
        {/if}
    {/section}
    {if $pages_nb>$stop+2}
        <li class="truncate">...</li>
        <li><a href="{$link->goPage($requestPage, $pages_nb)}">{$pages_nb|intval}</a></li>
    {/if}

    {if $stop+$range>$pages_nb-1}
        {section name=pagination_start start=$stop+1 loop=$pages_nb+1 step=1}
            <li><a href="{$link->goPage($requestPage, $smarty.section.pagination_start.index)}">{$smarty.section.pagination_start.index|escape:'htmlall':'UTF-8'}</a></li>
        {/section}
    {/if}

    {if $pages_nb > 1 AND $p != $pages_nb}
        {assign var='p_next' value=$p+1}
        <li id="pagination_next"><a href="{$link->goPage($requestPage, $p_next)}">{l s='Next'}&nbsp;&raquo;</a></li>
    {else}
        <li id="pagination_next" class="disabled"><span>{l s='Next'}&nbsp;&raquo;</span></li>
    {/if}
    </ul>
{/if}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

{if $start!=$stop}

{if $p != 1}

{assign var='p_previous' value=$p-1}

<li id="pagination_previous"><a href="{$link->goPage($requestPage, $p_previous)}">« {l s='Previous'}</a></li>

{else}

<li id="pagination_previous" class="disabled">« {l s='Previous'}</li>

{/if}

{if $start-$range<$range}

{section name=pagination_start start=1 loop=$start step=1}

<li><a href="{$link->goPage($requestPage, $smarty.section.pagination_start.index)}">{$smarty.section.pagination_start.index|escape:'htmlall':'UTF-8'}</a></li>

{/section}

{/if}

{if $start>3}

<li><a href="{$link->goPage($requestPage, 1)}">1</a></li>

{/if}

{section name=pagination start=$start loop=$stop+1 step=1}

{if $p == $smarty.section.pagination.index}

<li class="current">{$p|escape:'htmlall':'UTF-8'}</li>

{else}

<li><a href="{$link->goPage($requestPage, $smarty.section.pagination.index)}">{$smarty.section.pagination.index|escape:'htmlall':'UTF-8'}</a></li>

{/if}

{/section}

{if $pages_nb>$stop+2}

<li><a href="{$link->goPage($requestPage, $pages_nb)}">{$pages_nb|intval}</a></li>

{/if}

{if $stop+$range>$pages_nb-1}

{section name=pagination_start start=$stop+1 loop=$pages_nb+1 step=1}

<li><a href="{$link->goPage($requestPage, $smarty.section.pagination_start.index)}">{$smarty.section.pagination_start.index|escape:'htmlall':'UTF-8'}</a></li>

{/section}

{/if}

{if $pages_nb > 1 AND $p != $pages_nb}

{assign var='p_next' value=$p+1}

<li id="pagination_next"><a href="{$link->goPage($requestPage, $p_next)}">{l s='Next'} »</a></li>

{else}

{/if}

</ul>

{/if}

$p – current page
$start – first page in default pagination
$end – last page in default pagination
$range – value of “how many pages to show around current one” from FrontController
$pages_nb – last page