Fix issue #80,#81: Added pagination and optimize the query.

app/Http/Livewire/CollectionPage.php

@@ -6,12 +6,16 @@
 use Livewire\Component;
 use Livewire\ComponentConcerns\PerformsRedirects;
 use Lunar\Models\Collection;
+use Livewire\WithPagination;
+use Lunar\Models\Url;
 
 class CollectionPage extends Component
 {
     use PerformsRedirects,
         FetchesUrls;
+    use WithPagination;
 
+        protected $paginationTheme = 'tailwind';
     /**
      * {@inheritDoc}
      *
@@ -25,11 +29,6 @@ public function mount($slug)
         $this->url = $this->fetchUrl(
             $slug,
             Collection::class,
-            [
-                'element.thumbnail',
-                'element.products.variants.basePrices',
-                'element.products.defaultUrl',
-            ]
         );
 
         if (! $this->url) {
@@ -44,14 +43,16 @@ public function mount($slug)
      */
     public function getCollectionProperty()
     {
-        return $this->url->element;
+        $collections = Url::whereElementType(Collection::class)->where('element_id', '=', $this->url->id);
+        return $collections->inRandomOrder()->first()?->element;
     }
 
     /**
      * {@inheritDoc}
      */
     public function render()
     {
-        return view('livewire.collection-page');
+
+        return view('livewire.collection-page', ['products' => $this->collection->products()->paginate(9)]);
     }
 }

resources/views/components/page.blade.php

@@ -0,0 +1,52 @@
+@if ($paginator->hasPages())
+    <nav aria-label="Page navigation example" class="text-center">
+        <ul class="inline-flex -space-x-px max-w-screen-xl px-2 py-12 mx-auto center ">
+            {{-- Previous Page Link --}}
+            @if ($paginator->onFirstPage())
+                <li>
+                    <span class="flex items-center justify-center px-3 h-8 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg cursor-not-allowed">Previous</span>
+                </li>
+            @else
+                <li>
+                    <a href="{{ $paginator->previousPageUrl() }}" class="flex items-center justify-center px-3 h-8 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">Previous</a>
+                </li>
+            @endif
+
+            {{-- Pagination Elements --}}
+            @foreach ($elements as $element)
+                {{-- "Three Dots" Separator --}}
+                @if (is_string($element))
+                    <li>
+                        <span class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 cursor-not-allowed">{{ $element }}</span>
+                    </li>
+                @endif
+
+                {{-- Array Of Links --}}
+                @if (is_array($element))
+                    @foreach ($element as $page => $url)
+                        @if ($page == $paginator->currentPage())
+                            <li>
+                                <span class="flex items-center justify-center px-3 h-8 text-blue-600 border border-gray-300 bg-blue-50 cursor-not-allowed">{{ $page }}</span>
+                            </li>
+                        @else
+                            <li>
+                                <a href="{{ $url }}" class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">{{ $page }}</a>
+                            </li>
+                        @endif
+                    @endforeach
+                @endif
+            @endforeach
+
+            {{-- Next Page Link --}}
+            @if ($paginator->hasMorePages())
+                <li>
+                    <a href="{{ $paginator->nextPageUrl() }}" class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">Next</a>
+                </li>
+            @else
+                <li>
+                    <span class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg cursor-not-allowed">Next</span>
+                </li>
+            @endif
+        </ul>
+    </nav>
+@endif

resources/views/livewire/collection-page.blade.php

@@ -3,12 +3,11 @@
         <h1 class="text-3xl font-bold">
             {{ $this->collection->translateAttribute('name') }}
         </h1>
-
         <div class="grid grid-cols-1 gap-8 mt-8 sm:grid-cols-2 lg:grid-cols-3">
-            @forelse($this->collection->products as $product)
-                <x-product-card :product="$product" />
-            @empty
-            @endforelse
-        </div>
+                @foreach ($products as $product)
+                    <x-product-card :product="$product" />
+                @endforeach
+            </div>
+        {{ $products->links('components.page') }}
     </div>
 </section>

resources/views/livewire/product-page.blade.php

@@ -38,7 +38,7 @@ class="object-cover rounded-xl"
                 </p>
 
                 <article class="mt-4 text-gray-700">
-                    {{ $this->product->translateAttribute('description') }}
+                    {!! $this->product->translateAttribute('description') !!}
                 </article>
 
                 <form class="mt-4">