Azharkamar.com

PrestaShop – Improved ‘Display Number of Products Per Page’ Drop Down List

Tutorials
18 Mar 2011
13 comments

PrestaShop’s default ‘Display Number of Items’ drop down list in the product category page isn’t very user-friendly, so I decided to improve it functionally and aesthetically.

What I did was removed the ‘OK’ button and added codes in the select menu such that the form will submit automatically when you select a different option. This way, the drop down list will be more comprehensive and will also look better.

Read on to find out how to do it. I also included the pagination.tpl file for download.

Default Layout

Improved Version

Code Explanation

Here’s a detailed explanation on how to do it. The file pagination.tpl file is available for download below.

1. Open pagination.tpl in your theme folder.

2. Apply comment or delete this code to remove the button:

<input type="submit" class="button_mini" value="{l s='OK'}" />

3. Then add this below that code above:

<div style="float: right; margin-left: 5px">items</div>

4. The form has to be named for this to work.
Find and replace this code:

<form action="{if !is_array($requestNb)}{$requestNb}{else}
{$requestNb.requestUrl}{/if}" method="get" class="pagination">

With this:

<form action="{if !is_array($requestNb)}{$requestNb}{else}
{$requestNb.requestUrl}{/if}" method="get" class="pagination"
name="pagination1">

5. Now simply add the onChange event to the select item:

<select name="n" id="nb_item" onChange="
document.forms['pagination1'].submit()">

Download pagination.tpl

Author - Azhar Kamar
13 Comments Revolving around this Article
  1. This is the code you need in the latest version (1.4.7)

    it also adds ‘per page’ text after the number which makes more sense to me

    replace the whole if statement with the following. You can find it at the end of pagination.tpl

    {if $nb_products > $products_per_page}

    {if isset($search_query) AND $search_query}{/if}
    {if isset($tag) AND $tag AND !is_array($tag)}{/if}
    {l s=’Per Page’}

    {assign var=”lastnValue” value=”0″}
    {foreach from=$nArray item=nValue}
    {if $lastnValue <= $nb_products}
    {$nValue|escape:’htmlall’:'UTF-8′}
    {/if}
    {assign var=”lastnValue” value=$nValue}
    {/foreach}

    {if is_array($requestNb)}
    {foreach from=$requestNb item=requestValue key=requestKey}
    {if $requestKey != ‘requestUrl’}

    {/if}
    {/foreach}
    {/if}

    {/if}



    Azhar Kamar replied:

    @Birmingham Website Design, thanks for the input!

  2. Jevgen

    1) Remove line 53

    2) Add name name=”pagination1″ to line 49

    and you have following code:

    3) Edit line 55 to this code

    done!

    You have some crazy instruction man!



    Azhar Kamar replied:

    @Jevgen, lol i must be out of my mind during the time of writing

  3. Jevgen

    Hello. It does not work with PS 1.3.6.0

    Any idea?

  4. Bojan

    @Stephen,

    I use PrestaShop™ 1.4.0.17 and this mod not working! Please Help how to change 10,20,50 items show! I wont only show 12, 24 and 48 items! Help!

  5. mapete

    is it also possible to integrate a “all” value?
    thanks for answer!

  6. callisti

    Nice work – prestashop 1.4 has the ‘items:’ text already in so step 3 not necessary. Default pagination values are to show 10 and 20 items although this can be changed in admin > preferences > products – however I still get 10 and 20 items showing in the dropdown – do you know how to change the default select/dropdown values?



    Azhar Kamar replied:

    @callisti, thanks for the PrestaShop 1.4 update. Hmmm… I’ll look into the dropdown values issue.



    Stephen replied:

    @Azhar Kamar,

    found a working solution to products-per-page display that involves creating /override/classes/FrontController.php

    class FrontController extends FrontControllerCore
    {
    public function pagination($nbProducts = 12)
    {
    if (!self::$initialized)
    $this->init();

    $nArray = (int)(Configuration::get(‘PS_PRODUCTS_PER_PAGE’)) != 12 ? array((int)(Configuration::get(‘PS_PRODUCTS_PER_PAGE’)), 12, 24, 36, 48, 60) : array(12, 24, 36, 48, 60);
    asort($nArray);
    $this->n = abs((int)(Tools::getValue(‘n’, ((isset(self::$cookie->nb_item_per_page) AND self::$cookie->nb_item_per_page >= 12) ? self::$cookie->nb_item_per_page : (int)(Configuration::get(‘PS_PRODUCTS_PER_PAGE’))))));
    $this->p = abs((int)(Tools::getValue(‘p’, 1)));
    $range = 2; /* how many pages around page selected */

    if ($this->p p = 0;

    if (isset(self::$cookie->nb_item_per_page) AND $this->n != self::$cookie->nb_item_per_page AND in_array($this->n, $nArray))
    self::$cookie->nb_item_per_page = $this->n;

    if ($this->p > ($nbProducts / $this->n))
    $this->p = ceil($nbProducts / $this->n);
    $pages_nb = ceil($nbProducts / (int)($this->n));

    $start = (int)($this->p – $range);
    if ($start p + $range);
    if ($stop > $pages_nb)
    $stop = (int)($pages_nb);
    self::$smarty->assign(‘nb_products’, $nbProducts);
    $pagination_infos = array(
    ‘pages_nb’ => (int)($pages_nb),
    ‘p’ => (int)($this->p),
    ‘n’ => (int)($this->n),
    ‘nArray’ => $nArray,
    ‘range’ => (int)($range),
    ’start’ => (int)($start),
    ’stop’ => (int)($stop)
    );
    self::$smarty->assign($pagination_infos);
    }
    }



    Bojan replied:

    @Stephen,

    I use PrestaShop™ 1.4.0.17 and this mod not working! Please Help how to change 10,20,50 items show! I wont only show 12, 24 and 48 items! Help!

  7. Azhar Kamar

    Thank you. ;)

  8. canndy girl

    Great post. You seem to have a good understanding that how to create a professional drop down menu. When I entering your blog, I felt this. Come on and keep writing your blog will be more attractive. To Your Success!

Write a Comment! NOW! :)

Current ye@r *