You are here:  » Mobile: have more pages in pagination at bottom of page


Mobile: have more pages in pagination at bottom of page

Submitted by Retro135 on Tue, 2015-07-07 01:44 in

How can I make the pagination show more pages instead of 1 at the bottom of the page in mobile devices? I'd love to display 1-5, but 1-3 is fine. I see the code in foundation.css, could write something in default.css and replace, but I can't find where the pagination code is in any file.

You have no idea how impatient some shoppers are. :-)

Submitted by support on Tue, 2015-07-07 08:48

Hi,

html/navigation.php renders 2 versions of the navigation, one for small (mobile) and the full width version for medium up. What you could do is basically render the small version in the same way as the medium version but with a smaller span. To do this, first look for the following code at line 106:

  if ($class=="show-for-medium-up")
  {
    print "<li><a href='".$pageHREF."'>".$i."</a></li>";
  }

...and REPLACE with just:

  print "<li><a href='".$pageHREF."'>".$i."</a></li>";

(as this mod will make the IF condition redundant)

Next, look for the following code beginning at line 47:

    if ($page < 5)
    {
      $pageFrom = 1;
      $pageTo = 9;
    }
    else
    {
      $pageFrom = ($page - 4);
      $pageTo = ($page + 4);
    }
    if ($pageTo > $totalPages)
    {
      $pageTo = $totalPages;
      $pageFrom = $totalPages - 8;
    }

...and REPLACE with:

    if ($class=="show-for-small-only")
    {
      if ($page < 5)
      {
        $pageFrom = 1;
        $pageTo = 5;
      }
      else
      {
        $pageFrom = ($page - 2);
        $pageTo = ($page + 2);
      }
      if ($pageTo > $totalPages)
      {
        $pageTo = $totalPages;
        $pageFrom = $totalPages - 4;
      }
    }
    else
    {
      if ($page < 5)
      {
        $pageFrom = 1;
        $pageTo = 9;
      }
      else
      {
        $pageFrom = ($page - 4);
        $pageTo = ($page + 4);
      }
      if ($pageTo > $totalPages)
      {
        $pageTo = $totalPages;
        $pageFrom = $totalPages - 8;
      }
    }

You can then control the span independently for small / medium and greater displays - the above will use a span of 5 pages for mobile and the default 9 for medium...

Hope this helps!

Cheers,
David.
--
PriceTapestry.com

Submitted by Retro135 on Tue, 2015-07-07 13:11

TY! Should I remove the extra set of brackets after I remove if ($class=="show-for-medium-up") at 106?

Submitted by support on Tue, 2015-07-07 13:18

Hi,

Yes - no need for { } replacement should be just:

  print "<li><a href='".$pageHREF."'>".$i."</a></li>";

Cheers,
David.
--
PriceTapestry.com

Submitted by Retro135 on Wed, 2015-07-08 01:15

These changes completely removed pagination. :-(

Submitted by support on Wed, 2015-07-08 07:39

Sorry about that - there was a missing closing } at the end of the replacement - corrected above...

Cheers,
David.
--
PriceTapestry.com

Submitted by Retro135 on Wed, 2015-07-08 10:19

All good, thank you very much!