# P2-04 — Infinite Scroll + Load More ## Scope: Pro Only --- ## Overview Three pagination modes for the listing grid block: traditional **Pagination** (free, default), **Load More** button (Pro), and **Infinite Scroll** (Pro). All three use the same REST search endpoint and differ only in trigger mechanism. The admin selects the preferred mode in settings. ### Why It Matters - Traditional pagination breaks browsing flow — each click is a full page reload - "Load More" is a middle ground — user controls when to load, no page reload - Infinite scroll keeps users engaged on high-volume directories (1000+ listings) - Real estate, job boards, and restaurant directories all benefit from continuous browsing - SEO is preserved — `

` block contains traditional `<a href="?page=2">` pagination links | | `rel="next/prev"` | Added to `<head>` via `wp_head` hook for all modes | | URL state | `pushState` updates URL with `?page=N` on each load | | Back button | `popstate` listener restores scroll position and loaded pages | | Google crawl | Search engines follow `<link rel="next">` regardless of JS mode | | Thin content | `noindex` pages with < 3 results (handled by SEO module) | ### Files to Create (wb-listora-pro) | File | Purpose | |------|---------| | `blocks/listing-grid/pagination-pro.js` | Load more + infinite scroll Interactivity API logic | | `blocks/listing-grid/pagination-pro.css` | Styles for load more button + spinner + sentinel | ### Files to Modify (wb-listora-pro) | File | Change | |------|--------| | `blocks/listing-grid/render.php` (Pro filter) | Add sentinel element + load more button markup | | `blocks/listing-grid/view.js` (Pro extension) | Initialize IntersectionObserver | ### Files to Modify (wb-listora free) | File | Change | |------|--------| | `includes/admin/class-settings-page.php` | Add `pagination_type` setting (Pro options grayed out) | | `includes/rest/class-search-controller.php` | Ensure pagination headers are always returned | ### URL + History Management ``` User loads page: /restaurants/ Loads more (page 2): /restaurants/?page=2 (pushState) Loads more (page 3): /restaurants/?page=3 (pushState) Clicks listing: /listing/pizza-palace/ Clicks back: /restaurants/?page=3 (popstate → restore 3 pages of results) ``` On `popstate`: 1. Read `page` from URL 2. If page > 1 and we don't have the results, re-fetch pages 1 through N 3. Restore scroll position from `sessionStorage` --- ## UI Mockup ### Load More Button Mode ``` ┌─────────────────────────────────────────────────────────────┐ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ Card 1 │ │ Card 2 │ │ Card 3 │ │ Card 4 │ │ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ Card 5 │ │ Card 6 │ │ Card 7 │ │ Card 8 │ │ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ Card 9 │ │ Card 10 │ │ Card 11 │ │ Card 12 │ │ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ │ │ │ Showing 12 of 156 listings │ │ │ │ ┌────────────────────────┐ │ │ │ Load More (144) │ │ │ └────────────────────────┘ │ │ │ └─────────────────────────────────────────────────────────────┘ ``` ### Load More — Loading State ``` │ ┌────────────────────────┐ │ │ │ ⟳ Loading... │ │ │ └────────────────────────┘ │ ``` ### Infinite Scroll — End of Results ``` │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ Card 153 │ │ Card 154 │ │ Card 155 │ │ Card 156 │ │ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ │ │ │ ─── You've seen all 156 listings ─── │ │ │ ``` ### Infinite Scroll — Loading Indicator ``` │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ Card 9 │ │ Card 10 │ │ Card 11 │ │ Card 12 │ │ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ │ │ │ ⟳ ⟳ ⟳ │ │ Loading more listings... │ │ │ │ ┌ ─ ─ ─ ─ ┐ ┌ ─ ─ ─ ─ ┐ ┌ ─ ─ ─ ─ ┐ ┌ ─ ─ ─ ─ ┐ │ <-- Skeleton cards │ │ │ │ │ │ │ │ │ │ │ └ ─ ─ ─ ─ ┘ └ ─ ─ ─ ─ ┘ └ ─ ─ ─ ─ ┘ └ ─ ─ ─ ─ ┘ │ ``` ### Noscript Fallback ```html <noscript> <nav class="listora-pagination" aria-label="Listing pages"> <a href="?page=1">1</a> <a href="?page=2">2</a> <span class="current">3</span> <a href="?page=4">4</a> ... <a href="?page=13">13</a> </nav>

``` --- ## Implementation Steps | # | Task | Est. Hours | |---|------|-----------| | 1 | Add `pagination_type` admin setting with Pro options | 1 | | 2 | Load More button markup + CSS | 2 | | 3 | Load More Interactivity API action — fetch + append results | 3 | | 4 | Infinite Scroll — IntersectionObserver + sentinel element | 3 | | 5 | Loading indicator (spinner + skeleton cards) | 2 | | 6 | "End of results" messaging | 0.5 | | 7 | URL pushState management (`?page=N`) | 2 | | 8 | Back button support (popstate + scroll position restore) | 3 | | 9 | `

` fallback and `rel="next"` links. Browser history management means users can navigate to a listing, press back, and return to their exact scroll position with all loaded results intact. The IntersectionObserver approach is modern and performant (no scroll event throttling like jQuery solutions). --- ## Effort Estimate **Total: ~25 hours (3-4 dev days)** - Admin setting: 1h - Load More mode: 5h - Infinite Scroll mode: 6h - URL + history management: 5h - SEO (noscript, rel links): 2h - Map sync: 2h - Mobile + UX polish: 2h - Tests + docs: 2h