Move showMore to separate partial

rapidez · Jan 22, 2025 · fdefb21 · fdefb21
1 parent 4b7688e
commit fdefb21
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 26 deletions.
diff --git a/resources/views/product/partials/gallery/thumbnails.blade.php b/resources/views/product/partials/gallery/thumbnails.blade.php
@@ -31,7 +31,7 @@
             v-on:click="change({{ $imageId }})"
         >
             <img
-                {{-- Note: always put the `src` before a `v-bind:src` or it will not work --}}
+                {{-- Note: always put the base `src` before a `v-bind:src` or it will not work --}}
                 @if ($imageId < count($product->images))
                     src="/storage/{{ config('rapidez.store') }}/resizes/80x80/magento/catalog/product/{{ $product->images[$imageId] }}.webp"
                 @endif
@@ -42,31 +42,8 @@ class="block max-h-full w-auto object-contain"
                 height="80"
             />
 
-            @if (in_array($imageId + 1, $breakpoints))
-                <div
-                    @unless (count($product->images) - $imageId - 1) v-cloak @endunless
-                    v-if="images.length - {{ $imageId }} - 1"
-                >
-                    <span
-                        @class([
-                            'absolute inset-0 hidden items-center justify-center bg-black/20',
-                            'xl:flex' => $imageId + 1 === $breakpoints['xl'],
-                            'lg:max-xl:flex' => $imageId + 1 === $breakpoints['lg'],
-                            'md:max-lg:flex' => $imageId + 1 === $breakpoints['md'],
-                            'sm:max-md:flex' => $imageId + 1 === $breakpoints['sm'],
-                            'max-sm:flex' => $imageId + 1 === $breakpoints['xs'],
-                        ])
-                        v-on:click="toggleZoom"
-                    >
-                        <span
-                            class="size-9 flex items-center justify-center rounded-full bg-white text-sm font-bold text shadow-lg"
-                            v-text="'+' + (images.length - {{ $imageId }} - 1)"
-                        >
-                            +{{ count($product->images) - $imageId - 1 }}
-                        </span>
-                    </span>
-                </div>
-            @endif
+            {{-- Only include the showMore if it's actually possible to be visible --}}
+            @includeWhen(in_array($imageId + 1, $breakpoints), 'rapidez::product.partials.gallery.thumbnails.showMore')
         </button>
     @endfor
 </div>
diff --git a/resources/views/product/partials/gallery/thumbnails/showMore.blade.php b/resources/views/product/partials/gallery/thumbnails/showMore.blade.php
@@ -0,0 +1,25 @@
+{{-- This component shows an overlay on the last shown thumbnail if there are more thumbnails after it. --}}
+
+<div
+    @unless (count($product->images) - $imageId - 1) v-cloak @endunless
+    v-if="images.length - {{ $imageId }} - 1"
+>
+    <span
+        @class([
+            'absolute inset-0 hidden items-center justify-center bg-black/20',
+            'xl:flex' => $imageId + 1 === $breakpoints['xl'],
+            'lg:max-xl:flex' => $imageId + 1 === $breakpoints['lg'],
+            'md:max-lg:flex' => $imageId + 1 === $breakpoints['md'],
+            'sm:max-md:flex' => $imageId + 1 === $breakpoints['sm'],
+            'max-sm:flex' => $imageId + 1 === $breakpoints['xs'],
+        ])
+        v-on:click="toggleZoom"
+    >
+        <span
+            class="size-9 flex items-center justify-center rounded-full bg-white text-sm font-bold text shadow-lg"
+            v-text="'+' + (images.length - {{ $imageId }} - 1)"
+        >
+            +{{ count($product->images) - $imageId - 1 }}
+        </span>
+    </span>
+</div>