Listing items per page

Update AppServiceProvider

app>Providers>AppServiceProvider.php

Add the following namespaces:

use Aero\Store\Http\Responses\ListingsJson;
use Aero\Store\Http\Responses\ListingsPage;
use Aero\Store\Http\Responses\SearchJson;
use Aero\Store\Http\Responses\SearchPage;
use Illuminate\Support\ServiceProvider;

Create a setting for per_page

class AppServiceProvider extends ServiceProvider
{
   public function boot()
   {
     ListingsPage::extend($perPages = function ($page) {
            $selected = (int) $page->request->input('per_page', setting('search.per_page'));

            $perPages = collect([24, 48, 96])->map(function ($key) use ($page, $selected) {
                return [
                    'key' => $key,
                    'name' => $key,
                    'selected' => $key === $selected,
                    'url' => rtrim($page->request->fullUrlWithQuery(['per_page' => $key, 'page' => null]), '?'),
                ];
            });

            $page->setData('per_page_options', $perPages);
        });

        ListingsJson::extend($perPages);
        SearchPage::extend($perPages);
        SearchJson::extend($perPages);
   }
}

Listing page variables

Add the following to the variables at the top of your listing.twig file

{% set variables = {
    per_page_options: per_page_options,
} %}

Listing page snippet

Add the following inside the component tags of the listing.twig file

<ul>
    <li v-for="per_page in per_page_options" :key="per_page.key">
        <a :href="per_page.url"
           @click.prevent="updateWithoutScroll(per_page.url)"
           class="w-full flex items-center p-3 space-x-4">
            <span :class="per_page.selected ? 'font-bold' : ''">{{ "{{ per_page.name }}" }}</span>
        </a>
    </li>
</ul>