Add paging navigation to catalog.

app/controllers/App.php

@@ -76,6 +76,35 @@ class App extends Controller
         return __('Contact Us', 'aldine');
     }
 
+    public function currentPage()
+    {
+        if (is_front_page()) {
+            return (get_query_var('page')) ? get_query_var('page') : 1;
+        } else {
+            return (get_query_var('paged')) ? get_query_var('paged') : 1;
+        }
+    }
+
+    public static function previousPage($page)
+    {
+        return ($page > 1) ? $page - 1 : 0;
+    }
+
+    public static function nextPage($page, $per_page = 10)
+    {
+        return ($page < App::totalPages($per_page)) ? $page + 1 : 0;
+    }
+
+    public static function totalPages($per_page = 10)
+    {
+        $request = new \WP_REST_Request('GET', '/pressbooks/v2/books');
+        $request->set_query_params([
+            'per_page' => $per_page,
+        ]);
+        $response = rest_do_request($request);
+        return $response->headers['X-WP-TotalPages'];
+    }
+
     public static function books($page = 1, $per_page = 10)
     {
         $request = new \WP_REST_Request('GET', '/pressbooks/v2/books');

app/controllers/FrontPage.php

@@ -19,27 +19,6 @@ class FrontPage extends Controller
         return 1;
     }
 
-    public function totalPages()
-    {
-        $books = wp_remote_get(network_home_url('/wp-json/pressbooks/v2/books?per_page=3'));
-        return $books['headers']['x-wp-totalpages'];
-    }
-
-    public function currentPage()
-    {
-        return get_query_var('page', 1);
-    }
-
-    public function previousPage()
-    {
-        return (get_query_var('page', 1) > 1) ? get_query_var('page') - 1 : 0;
-    }
-
-    public function nextPage()
-    {
-        return (get_query_var('page', 1) < FrontPage::totalPages()) ? get_query_var('page', 1) + 1 : 0;
-    }
-
     public function latestBooksTitle()
     {
         $title = get_option('pb_front_page_catalog_title');

resources/assets/styles/components/_buttons.scss

@@ -1,8 +1,8 @@
 .button {
   display: inline-block;
   width: rem(250);
-  height: rem(65);
+  height: rem(60);
-  padding: rem(21);
+  padding: rem(19);
   border: 2px solid var(--btn-bg, $brand-primary);
   border-radius: 3px;
   background: var(--btn-bg, $brand-primary);

resources/assets/styles/layouts/pages/_catalog.scss

@@ -214,6 +214,60 @@
       font-size: rem(14);
     }
   }
+
+  .catalog-navigation {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    margin-top: rem(83);
+    align-items: baseline;
+    font-family: $font-family-sans-serif;
+
+    a {
+      color: $black;
+
+      &:hover,
+      &:focus {
+        color: var(--link, $brand-primary);
+      }
+    }
+
+    .previous,
+    .next {
+      display: block;
+      margin: 0 rem(26);
+      font-family: Karla-Regular;
+      font-size: rem(16);
+
+      svg {
+        width: rem(16.2);
+        height: rem(12.5);
+        margin: 0 rem(6);
+
+        path {
+          fill: var(--link, $brand-primary);
+        }
+      }
+    }
+
+    .pages {
+      display: inline-block;
+      border-bottom: solid 2px #ececec;
+
+      a,
+      span {
+        display: inline-block;
+        width: rem(41);
+        padding: rem(8) 0;
+        font-size: rem(24);
+        text-align: center;
+      }
+
+      .current {
+        border-bottom: solid rem(6) var(--primary, $brand-primary);
+      }
+    }
+  }
 }
 
 @media (min-width: 768px) {

resources/assets/styles/layouts/pages/_front-page.scss

@@ -112,7 +112,7 @@
 
   .latest-books {
     height: auto;
-    padding: 0 0 50px;
+    padding: 0 0 rem(154);
 
     h3 {
       margin-top: 4.375rem;
@@ -131,6 +131,7 @@
     .books {
       padding: 0;
       width: 100%;
+      margin-bottom: rem(34);
     }
 
     .book {
@@ -163,6 +164,10 @@
       .read-more {
         font-size: rem(18);
       }
+
+      &:last-child {
+        margin-bottom: 0;
+      }
     }
 
     .previous,
@@ -278,6 +283,7 @@
         min-width: 50rem;
         flex-direction: row;
         justify-content: space-between;
+        margin-bottom: 2rem;
       }
 
       .book {

resources/views/page-catalog.blade.php

@@ -40,11 +40,22 @@
       </div>
     </div>
     <div class="books">
-      @foreach(App::books(1, 9) as $book)
+      @foreach(App::books($current_page, 9) as $book)
         @include('partials.book', ['book' => $book])
       @endforeach
     </div>
     <nav class="catalog-navigation">
+      @if(App::previousPage($current_page))<a class="previous" data-page="{{ App::previousPage($current_page) }}" href="{{ network_home_url('/catalog/page/' . App::previousPage($current_page) . '/') }}">@php(include get_theme_file_path() . '/dist/' . Aldine\svg_path('images/left-arrow.svg')) {{ __('Previous', 'aldine') }}</a>@endif
+      <div class="pages">
+      @for($i = 1; $i <= App::totalPages(9); $i++)
+        @if($i === $current_page)
+          <span class="current">{{ $i }}</span>
+        @else
+          <a href="{{ network_home_url("/catalog/page/$i/") }}">{{ $i }}</a>
+        @endif
+      @endfor
+      </div>
+      @if(App::nextPage($current_page, 9))<a class="next" data-page="{{ App::nextPage($current_page, 9) }}" href="{{ network_home_url('/catalog/page/' . App::nextPage($current_page, 9) . '/') }}">{{ __('Next', 'aldine') }} @php(include get_theme_file_path() . '/dist/' . Aldine\svg_path('images/right-arrow.svg'))</a>@endif
     </nav>
   </section>
 @endsection

resources/views/partials/front-page-catalog.blade.php

@@ -1,7 +1,9 @@
 <div id="latest-titles" class="latest-books w-100">
+  Page {{ $current_page }}
+  Total: {{ App::totalPages(3) }}
   <h3 class="tc ttu">{{ $latest_books_title }}</h3>
   <div class="track flex flex-row flex-wrap justify-center items-center">
-    <div class="books flex flex-column justify-center items-center order-0 order-1-l flex-row-l justify-between-l" data-total-pages="{{ $total_pages }}" data-next-page="2">
+    <div class="books flex flex-column justify-center items-center order-0 order-1-l flex-row-l justify-between-l" data-total-pages="{{ App::totalPages(3) }}" data-next-page="2">
       @foreach(App::books($current_page, 3) as $book)
         <div class="book flex flex-column justify-end w-100">
           @if(isset($book['metadata']['keywords']))
@@ -18,8 +20,8 @@
         </div>
       @endforeach
     </div>
-    @if($previous_page)<a class="previous db mr-auto f1 order-1 order-0-l" data-page="{{ $previous_page }}" href="{{ network_home_url("/page/$previous_page/#latest-titles") }}">@php(include get_theme_file_path() . '/dist/' . Aldine\svg_path('images/left-arrow.svg'))</a>@endif
+    @if(App::previousPage($current_page))<a class="previous db mr-auto f1 order-1 order-0-l" data-page="{{ App::previousPage($current_page) }}" href="{{ network_home_url('/page/' . App::previousPage($current_page) . '/#latest-titles') }}">@php(include get_theme_file_path() . '/dist/' . Aldine\svg_path('images/left-arrow.svg'))</a>@endif
-    @if($next_page)<a class="next ml-auto order-2 db f1" data-page="{{ $next_page }}" href="{{ network_home_url("/page/$next_page/#latest-titles") }}">@php(include get_theme_file_path() . '/dist/' . Aldine\svg_path('images/right-arrow.svg'))</a>@endif
+    @if(App::nextPage($current_page, 3))<a class="next ml-auto order-2 db f1" data-page="{{ App::nextPage($current_page, 3) }}" href="{{ network_home_url('/page/' . App::nextPage($current_page, 3) . '/#latest-titles') }}">@php(include get_theme_file_path() . '/dist/' . Aldine\svg_path('images/right-arrow.svg'))</a>@endif
   </div>
   <div class="catalog-link tc">
     <a class="button button-inverse button-wide" href="{{ network_home_url('/catalog/') }}">{{ __('View Complete Catalog', 'aldine') }}</a>