From 624499361ef47261901d5233d71612d0fb2d1ecc Mon Sep 17 00:00:00 2001
From: Jimmy Hoenderdaal <jimmy@justbetter.nl>
Date: Mon, 16 Dec 2024 13:52:00 +0100
Subject: [PATCH 1/5] Fix layout shift on thumbnails, reviews, quantity

---
 resources/views/components/quantity.blade.php |   2 +
 .../views/components/reviews/stars.blade.php  |  16 +++
 resources/views/product/overview.blade.php    |   2 +-
 .../product/partials/gallery/popup.blade.php  |   4 +-
 .../product/partials/gallery/slider.blade.php |  34 +++--
 .../partials/gallery/thumbnails.blade.php     | 130 +++++++++++++-----
 .../views/product/partials/images.blade.php   |  20 +--
 7 files changed, 139 insertions(+), 69 deletions(-)
 create mode 100644 resources/views/components/reviews/stars.blade.php

diff --git a/resources/views/components/quantity.blade.php b/resources/views/components/quantity.blade.php
index 940abf093..689229add 100644
--- a/resources/views/components/quantity.blade.php
+++ b/resources/views/components/quantity.blade.php
@@ -6,6 +6,7 @@
 <quantity-select v-slot="qtySelect" {{ $attributes }}>
     <div class="flex items-center justify-center border rounded bg-white h-12 self-start">
         <button
+            disabled
             v-on:click.prevent="qtySelect.decrease"
             v-bind:disabled="!qtySelect.decreasable"
             aria-label="@lang('Decrease')"
@@ -17,6 +18,7 @@ class="shrink-0 pl-2.5 text disabled:cursor-not-allowed disabled:opacity-50"
             name="qty"
             type="number"
             dusk="qty"
+            value="1"
             class="outline-0 ring-0 border-none w-12 bg-transparent font-medium text-center px-0 sm:text-base focus:ring-transparent"
             aria-label="@lang('Quantity')"
             {{ $attributes }}
diff --git a/resources/views/components/reviews/stars.blade.php b/resources/views/components/reviews/stars.blade.php
new file mode 100644
index 000000000..e05d7a8bc
--- /dev/null
+++ b/resources/views/components/reviews/stars.blade.php
@@ -0,0 +1,16 @@
+@props(['score', 'count'])
+<div class="flex items-center gap-1">
+    <div class="relative">
+        <div class="flex gap-0.5">
+            @for ($star = 0; $star < 5; $star++)
+                <x-heroicon-s-star class="size-5 text-muted/70"/>
+            @endfor
+        </div>
+        <div class="flex gap-0.5 absolute inset-0 overflow-hidden" style="width: {{ $score }}%">
+            @for ($star = 0; $star < 5; $star++)
+                <x-heroicon-s-star class="size-5 shrink-0"/>
+            @endfor
+        </div>
+    </div>
+    <span class="text-sm">({{ $count }})</span>
+</div>
diff --git a/resources/views/product/overview.blade.php b/resources/views/product/overview.blade.php
index 35015f189..1009d6899 100644
--- a/resources/views/product/overview.blade.php
+++ b/resources/views/product/overview.blade.php
@@ -20,7 +20,7 @@
                     @includeWhen($product->type_id !== 'grouped', 'rapidez::product.partials.addtocart')
                     @if (App::providerIsLoaded('Rapidez\Reviews\ReviewsServiceProvider'))
                         @if ($product->reviews_score)
-                            <stars :score="{{ $product->reviews_score }}" :count="{{ $product->reviews_count }}"></stars>
+                            <x-rapidez::reviews.stars :score="$product->reviews_score" :count="$product->reviews_count"/>
                         @endif
                     @endif
                     <div>
diff --git a/resources/views/product/partials/gallery/popup.blade.php b/resources/views/product/partials/gallery/popup.blade.php
index 0e5b63a25..dc2acbbab 100644
--- a/resources/views/product/partials/gallery/popup.blade.php
+++ b/resources/views/product/partials/gallery/popup.blade.php
@@ -1,4 +1,4 @@
-<div v-if="images.length && zoomed" class="fixed inset-0 bg-white cursor-zoom-out flex z-popup">
+<div v-cloak v-if="images.length && zoomed" class="fixed inset-0 bg-white cursor-zoom-out flex z-popup">
     <div class="flex flex-1 items-center justify-center" v-on:click.prevent="toggleZoom">
         <img
             :src="config.media_url + '/catalog/product' + images[active]"
@@ -16,4 +16,4 @@ class="object-contain max-h-full mx-auto block"
     <button class="z-popup-actions top-1/2 right-3 -translate-y-1/2 absolute" v-if="active != images.length-1" v-on:click="change(active+1)" aria-label="@lang('Next')">
         <x-heroicon-o-chevron-right class="size-8 text-muted" />
     </button>
-</div>
\ No newline at end of file
+</div>
diff --git a/resources/views/product/partials/gallery/slider.blade.php b/resources/views/product/partials/gallery/slider.blade.php
index 029ac8967..0ba713575 100644
--- a/resources/views/product/partials/gallery/slider.blade.php
+++ b/resources/views/product/partials/gallery/slider.blade.php
@@ -1,23 +1,33 @@
-<div class="relative" v-if="images.length">
+<div v-if="images.length" class="relative">
     <a
-        :href="config.media_url + '/catalog/product' + images[active]"
-        class="flex items-center justify-center border rounded p-5 h-[440px] cursor-zoom-in"
         v-on:click.prevent="toggleZoom"
+        v-bind:href="config.media_url + '/catalog/product' + images[active]"
+        class="flex h-[440px] cursor-zoom-in items-center justify-center rounded border p-5"
     >
         <img
-            :src="'/storage/{{ config('rapidez.store') }}/resizes/400/magento/catalog/product' + images[active] + '.webp'"
+            src="{{ route('resized-image', [
+                'store' => config('rapidez.store'),
+                'size' => '400',
+                'placeholder' => 'magento',
+                'file' => 'catalog/product' . Arr::first($product->images),
+                'webp' => '.webp',
+            ]) }}"
+            {{-- src should always be above v-bind:src --}}
+            v-bind:src="'/storage/{{ config('rapidez.store') }}/resizes/400/magento/catalog/product' + images[active] + '.webp'"
             alt="{{ $product->name }}"
-            class="object-contain max-h-full"
+            class="max-h-full object-contain"
             width="400"
             height="400"
         />
     </a>
-    <button class="z-10 top-1/2 left-3 -translate-y-1/2 absolute" v-if="active" v-on:click="change(active-1)" aria-label="@lang('Prev')">
-        <x-heroicon-o-chevron-left class="size-8 text-inactive" />
-    </button>
-    <button class="z-10 top-1/2 right-3 -translate-y-1/2 absolute" v-if="active != images.length-1" v-on:click="change(active+1)" aria-label="@lang('Next')">
-        <x-heroicon-o-chevron-right class="size-8 text-inactive" />
-    </button>
+    @if (count($product->images) > 1)
+        <button v-if="active" v-cloak v-on:click="change(active-1)" class="absolute left-3 top-1/2 z-10 -translate-y-1/2" aria-label="@lang('Prev')">
+            <x-heroicon-o-chevron-left class="size-8 text-inactive" />
+        </button>
+        <button v-if="active != images.length-1" v-on:click="change(active+1)" class="absolute right-3 top-1/2 z-10 -translate-y-1/2" aria-label="@lang('Next')">
+            <x-heroicon-o-chevron-right class="size-8 text-inactive" />
+        </button>
+    @endif
 </div>
 
-<x-rapidez::no-image v-else class="h-96 rounded" />
+<x-rapidez::no-image v-else v-cloak class="h-96 rounded" />
diff --git a/resources/views/product/partials/gallery/thumbnails.blade.php b/resources/views/product/partials/gallery/thumbnails.blade.php
index 87900ae6a..3bc397f9e 100644
--- a/resources/views/product/partials/gallery/thumbnails.blade.php
+++ b/resources/views/product/partials/gallery/thumbnails.blade.php
@@ -1,40 +1,96 @@
-@php($breakpoints = ['xl' => 7, 'lg' => 5, 'md' => 4, 'sm' => 3, 'xs' => 4])
-<div v-if="images.length > 1" class="flex mt-3 gap-2">
-    <button
-        v-for="(image, imageId) in images.slice(0, {{ max($breakpoints) }})"
-        class="flex items-center justify-center bg-white border rounded p-1.5 aspect-square max-w-24 flex-1 transition-all outline-transparent overflow-hidden relative"
-        :class="{
-            'outline outline-1 !outline-primary border-primary': active == imageId,
-            'xl:hidden': imageId > {{ $breakpoints['xl'] }},
-            'lg:max-xl:hidden': imageId > {{ $breakpoints['lg'] }},
-            'md:max-lg:hidden': imageId > {{ $breakpoints['md'] }},
-            'sm:max-md:hidden': imageId > {{ $breakpoints['sm'] }},
-            'max-sm:hidden': imageId > {{ $breakpoints['xs'] }}
-        }"
-        @click="change(imageId)"
-    >
-        <img
-            :src="'/storage/{{ config('rapidez.store') }}/resizes/80x80/magento/catalog/product' + image + '.webp'"
-            alt="{{ $product->name }}"
-            class="object-contain block w-auto max-h-full"
-            width="80"
-            height="80"
-        />
-        <span
-            v-if="(imageId + 1) < images.length"
-            v-on:click="toggleZoom()"
-            class="absolute inset-0 items-center justify-center bg-black/20 hidden"
-            :class="{
-                'xl:flex': imageId === {{ $breakpoints['xl'] }},
-                'lg:max-xl:flex': imageId === {{ $breakpoints['lg'] }},
-                'md:max-lg:flex': imageId === {{ $breakpoints['md'] }},
-                'sm:max-md:flex': imageId === {{ $breakpoints['sm'] }},
-                'max-sm:flex': imageId === {{ $breakpoints['xs'] }}
+{{--
+    We have two versions of the thumbnails:
+    1. PHP version with v-if="false": Shows instantly during page load but is hidden when Vue loads.
+    2. Vue version with v-cloak: Takes over when Vue is loaded.
+
+    This prevents layout shifting.
+--}}
+
+@php
+    $breakpoints = ['xl' => 7, 'lg' => 5, 'md' => 4, 'sm' => 3, 'xs' => 4];
+    $baseClasses = 'max-w-24 relative flex aspect-square flex-1 items-center justify-center overflow-hidden rounded border bg-white p-1.5 outline-primary transition-all';
+@endphp
+
+<div class="mt-3 flex gap-2">
+    @foreach ($product->images as $imageId => $image)
+        @if ($imageId < max($breakpoints))
+            <button v-if="false" @class([
+                $baseClasses,
+                'outline outline-1 border-primary' => $imageId == 0,
+                'xl:hidden' => $imageId > $breakpoints['xl'],
+                'lg:max-xl:hidden' => $imageId > $breakpoints['lg'],
+                'md:max-lg:hidden' => $imageId > $breakpoints['md'],
+                'sm:max-md:hidden' => $imageId > $breakpoints['sm'],
+                'max-sm:hidden' => $imageId > $breakpoints['xs'],
+            ])>
+                <img
+                    src="{{ route('resized-image', [
+                        'store' => config('rapidez.store'),
+                        'size' => '80x80',
+                        'placeholder' => 'magento',
+                        'file' => 'catalog/product' . $image,
+                        'webp' => '.webp',
+                    ]) }}"
+                    alt="{{ $product->name }}"
+                    class="block max-h-full w-auto object-contain"
+                    width="80"
+                    height="80"
+                />
+                @if ($imageId < count($product->images) - 1)
+                    <span @class([
+                        'absolute inset-0 hidden items-center justify-center bg-black/20',
+                        'xl:flex' => $imageId === $breakpoints['xl'],
+                        'lg:max-xl:flex' => $imageId === $breakpoints['lg'],
+                        'md:max-lg:flex' => $imageId === $breakpoints['md'],
+                        'sm:max-md:flex' => $imageId === $breakpoints['sm'],
+                        'max-sm:flex' => $imageId === $breakpoints['xs'],
+                    ])>
+                        <span class="size-9 flex items-center justify-center rounded-full bg-white text-sm font-bold text shadow-lg">
+                            +{{ count($product->images) - $imageId - 1 }}
+                        </span>
+                    </span>
+                @endif
+            </button>
+        @endif
+    @endforeach
+
+    <template v-for="(image, imageId) in images.slice(0, {{ max($breakpoints) }})" v-cloak>
+        <button
+            v-on:click="change(imageId)"
+            v-bind:class="{
+                'outline outline-1 border-primary': active == imageId,
+                'xl:hidden': imageId > {{ $breakpoints['xl'] }},
+                'lg:max-xl:hidden': imageId > {{ $breakpoints['lg'] }},
+                'md:max-lg:hidden': imageId > {{ $breakpoints['md'] }},
+                'sm:max-md:hidden': imageId > {{ $breakpoints['sm'] }},
+                'max-sm:hidden': imageId > {{ $breakpoints['xs'] }},
             }"
+            class="{{ $baseClasses }}"
         >
-            <span class="size-9 flex items-center justify-center rounded-full shadow-lg bg-white text-sm font-bold text">
-                +@{{ images.length - (imageId + 1) }}
-            </span>
-        </span>
-    </button>
+            <img
+                v-bind:src="'/storage/{{ config('rapidez.store') }}/resizes/80x80/magento/catalog/product' + image + '.webp'"
+                alt="{{ $product->name }}"
+                class="block max-h-full w-auto object-contain"
+                width="80"
+                height="80"
+            />
+            <template v-if="imageId < images.length - 1">
+                <span
+                    v-on:click="toggleZoom()"
+                    v-bind:class="{
+                        'xl:flex': imageId === {{ $breakpoints['xl'] }},
+                        'lg:max-xl:flex': imageId === {{ $breakpoints['lg'] }},
+                        'md:max-lg:flex': imageId === {{ $breakpoints['md'] }},
+                        'sm:max-md:flex': imageId === {{ $breakpoints['sm'] }},
+                        'max-sm:flex': imageId === {{ $breakpoints['xs'] }}
+                    }"
+                    class="absolute inset-0 hidden items-center justify-center bg-black/20"
+                >
+                    <span class="size-9 flex items-center justify-center rounded-full bg-white text-sm font-bold text shadow-lg">
+                        +@{{ images.length - imageId - 1 }}
+                    </span>
+                </span>
+            </template>
+        </button>
+    </template>
 </div>
diff --git a/resources/views/product/partials/images.blade.php b/resources/views/product/partials/images.blade.php
index a8e9c54b7..161b07083 100644
--- a/resources/views/product/partials/images.blade.php
+++ b/resources/views/product/partials/images.blade.php
@@ -4,28 +4,14 @@
             @include('rapidez::wishlist.button')
         </div>
     @endif
-    @if (count($product->images))
-        <div class="absolute inset-0 flex">
-            <div class="h-[440px] items-center justify-center rounded p-5 border sticky top-5 w-full">
-                <img
-                    class="max-h-full w-full object-contain"
-                    src="/storage/{{ config('rapidez.store') }}/resizes/400/magento/catalog/product{{ $product->images[0] }}.webp"
-                    alt="{{ $product->name }}"
-                    width="400"
-                    height="400"
-                />
-            </div>
-        </div>
-    @endif
-
-    <images v-cloak>
+    <images>
         <div class="flex-1" slot-scope="{ images, active, zoomed, toggleZoom, change }">
             <div class="sticky top-5 bg-white">
                 @include('rapidez::product.partials.gallery.slider')
-                @include('rapidez::product.partials.gallery.thumbnails')
+                @includeWhen(count($product->images) > 1, 'rapidez::product.partials.gallery.thumbnails')
             </div>
 
             @include('rapidez::product.partials.gallery.popup')
         </div>
     </images>
-</div>
\ No newline at end of file
+</div>

From d4f8010ee7c907b72e540a4f21b03c6f48ae144f Mon Sep 17 00:00:00 2001
From: Jimmy Hoenderdaal <jimmy@justbetter.nl>
Date: Wed, 18 Dec 2024 10:11:21 +0100
Subject: [PATCH 2/5] Seperate reviews stars to reviews package

---
 .../views/components/reviews/stars.blade.php     | 16 ----------------
 resources/views/product/overview.blade.php       |  2 +-
 2 files changed, 1 insertion(+), 17 deletions(-)
 delete mode 100644 resources/views/components/reviews/stars.blade.php

diff --git a/resources/views/components/reviews/stars.blade.php b/resources/views/components/reviews/stars.blade.php
deleted file mode 100644
index e05d7a8bc..000000000
--- a/resources/views/components/reviews/stars.blade.php
+++ /dev/null
@@ -1,16 +0,0 @@
-@props(['score', 'count'])
-<div class="flex items-center gap-1">
-    <div class="relative">
-        <div class="flex gap-0.5">
-            @for ($star = 0; $star < 5; $star++)
-                <x-heroicon-s-star class="size-5 text-muted/70"/>
-            @endfor
-        </div>
-        <div class="flex gap-0.5 absolute inset-0 overflow-hidden" style="width: {{ $score }}%">
-            @for ($star = 0; $star < 5; $star++)
-                <x-heroicon-s-star class="size-5 shrink-0"/>
-            @endfor
-        </div>
-    </div>
-    <span class="text-sm">({{ $count }})</span>
-</div>
diff --git a/resources/views/product/overview.blade.php b/resources/views/product/overview.blade.php
index 1009d6899..57d7605dc 100644
--- a/resources/views/product/overview.blade.php
+++ b/resources/views/product/overview.blade.php
@@ -20,7 +20,7 @@
                     @includeWhen($product->type_id !== 'grouped', 'rapidez::product.partials.addtocart')
                     @if (App::providerIsLoaded('Rapidez\Reviews\ReviewsServiceProvider'))
                         @if ($product->reviews_score)
-                            <x-rapidez::reviews.stars :score="$product->reviews_score" :count="$product->reviews_count"/>
+                            <x-rapidez-reviews::reviews.stars :score="$product->reviews_score" :count="$product->reviews_count"/>
                         @endif
                     @endif
                     <div>

From cd30b78d5610b7c3201afc21c33522d9af1571de Mon Sep 17 00:00:00 2001
From: Jimmy Hoenderdaal <jimmy@justbetter.nl>
Date: Wed, 18 Dec 2024 10:33:31 +0100
Subject: [PATCH 3/5] Revert stars

---
 resources/views/product/overview.blade.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/views/product/overview.blade.php b/resources/views/product/overview.blade.php
index 57d7605dc..35015f189 100644
--- a/resources/views/product/overview.blade.php
+++ b/resources/views/product/overview.blade.php
@@ -20,7 +20,7 @@
                     @includeWhen($product->type_id !== 'grouped', 'rapidez::product.partials.addtocart')
                     @if (App::providerIsLoaded('Rapidez\Reviews\ReviewsServiceProvider'))
                         @if ($product->reviews_score)
-                            <x-rapidez-reviews::reviews.stars :score="$product->reviews_score" :count="$product->reviews_count"/>
+                            <stars :score="{{ $product->reviews_score }}" :count="{{ $product->reviews_count }}"></stars>
                         @endif
                     @endif
                     <div>

From ca6e4c4ec3eb594d66d38ed977adb835aa870799 Mon Sep 17 00:00:00 2001
From: Jade Geels <jade@justbetter.nl>
Date: Wed, 18 Dec 2024 13:26:47 +0100
Subject: [PATCH 4/5] Remove named route 1

---
 resources/views/product/partials/gallery/slider.blade.php | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/resources/views/product/partials/gallery/slider.blade.php b/resources/views/product/partials/gallery/slider.blade.php
index 0ba713575..8c71e2566 100644
--- a/resources/views/product/partials/gallery/slider.blade.php
+++ b/resources/views/product/partials/gallery/slider.blade.php
@@ -5,13 +5,7 @@
         class="flex h-[440px] cursor-zoom-in items-center justify-center rounded border p-5"
     >
         <img
-            src="{{ route('resized-image', [
-                'store' => config('rapidez.store'),
-                'size' => '400',
-                'placeholder' => 'magento',
-                'file' => 'catalog/product' . Arr::first($product->images),
-                'webp' => '.webp',
-            ]) }}"
+            src="/storage/{{ config('rapidez.store') }}/resizes/400/magento/catalog/product/{{ Arr::first($product->images) }}.webp"
             {{-- src should always be above v-bind:src --}}
             v-bind:src="'/storage/{{ config('rapidez.store') }}/resizes/400/magento/catalog/product' + images[active] + '.webp'"
             alt="{{ $product->name }}"

From 458824e63d4ee64d5221e3ff6108a98ea0455c9c Mon Sep 17 00:00:00 2001
From: Jade Geels <jade@justbetter.nl>
Date: Wed, 18 Dec 2024 13:27:30 +0100
Subject: [PATCH 5/5] Image resizer route 2

---
 .../views/product/partials/gallery/thumbnails.blade.php   | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/resources/views/product/partials/gallery/thumbnails.blade.php b/resources/views/product/partials/gallery/thumbnails.blade.php
index 3bc397f9e..1e14a9d2d 100644
--- a/resources/views/product/partials/gallery/thumbnails.blade.php
+++ b/resources/views/product/partials/gallery/thumbnails.blade.php
@@ -24,13 +24,7 @@
                 'max-sm:hidden' => $imageId > $breakpoints['xs'],
             ])>
                 <img
-                    src="{{ route('resized-image', [
-                        'store' => config('rapidez.store'),
-                        'size' => '80x80',
-                        'placeholder' => 'magento',
-                        'file' => 'catalog/product' . $image,
-                        'webp' => '.webp',
-                    ]) }}"
+                    src="/storage/{{ config('rapidez.store') }}/resizes/80x80/magento/catalog/product/{{ $image }}.webp"
                     alt="{{ $product->name }}"
                     class="block max-h-full w-auto object-contain"
                     width="80"