[4.x] Add second image on hover in listings

config/rapidez/searchkit.php

@@ -25,7 +25,7 @@
         'price',
         'special_price',
         'image',
-        'images',
+        'media',
         'url',
         'thumbnail',
         'has_options',

resources/js/components/Product/AddToCart.vue

@@ -311,7 +311,30 @@ export default {
 
     computed: {
         currentThumbnail: function () {
-            return this.simpleProduct?.thumbnail || this.simpleProduct?.images?.[0] || this.product?.thumbnail
+            return this.simpleProduct?.thumbnail || this.images[0] || this.product?.thumbnail
+        },
+
+        hoverImage: function () {
+            if (!this.currentThumbnail) {
+                return null
+            }
+
+            // Can't have a second image if there are no images
+            if (!this.images.length) {
+                return null
+            }
+
+            // Return the second image if the thumbnail is also the first image
+            if (this.currentThumbnail == this.images[0]) {
+                return this.images[1] ?? null
+            }
+
+            // Otherwise, return the first image because the thumbnail is something else
+            return this.images[0]
+        },
+
+        images: function () {
+            return this.simpleProduct?.media?.filter((media) => media.media_type == 'image')?.map((media) => media.image) ?? []
         },
 
         shouldRedirectToProduct: function () {

resources/js/components/Product/Images.vue

@@ -3,7 +3,6 @@ import { useEventListener } from '@vueuse/core'
 
 export default {
     data: () => ({
-        images: config.product.images,
         media: config.product.media,
         active: 0,
         zoomed: false,
@@ -30,7 +29,6 @@ export default {
                     child === simpleProduct &&
                     Object.values(window.config.product.super_attributes).filter((attribute) => attribute.update_image).length
                 ) {
-                    self.images = simpleProduct.images
                     self.media = simpleProduct.media.toSorted((a, b) => a.position - b.position)
                     self.active = Math.min(self.active, self.media.length - 1)
                 }

resources/views/listing/partials/item.blade.php

@@ -2,17 +2,28 @@
     <add-to-cart v-bind:product="item" v-slot="addToCart" v-cloak>
         <div class="group flex flex-1 flex-col rounded bg-white h-full">
             <a :href="addToCart.productUrl | url" v-on:click="sendEvent('click', item, 'Hit Clicked')" class="block mb-auto">
-                <img
-                    v-if="addToCart.currentThumbnail"
-                    :src="'/storage/{{ config('rapidez.store') }}/resizes/200/magento/catalog/product' + addToCart.currentThumbnail + '.webp' | url"
-                    class="mb-3 h-48 w-full rounded-t object-contain"
-                    :alt="item.name"
-                    :loading="config.category && count <= 4 ? 'eager' : 'lazy'"
-                    v-bind:style="{ 'view-transition-name': 'image-' + item.sku }"
-                    width="200"
-                    height="200"
-                />
-                <x-rapidez::no-image v-else class="mb-3 h-48 rounded-t" />
+                <div class="relative mb-3 h-48 w-full">
+                    <img
+                        v-if="addToCart.currentThumbnail"
+                        :src="'/storage/{{ config('rapidez.store') }}/resizes/200/magento/catalog/product' + addToCart.currentThumbnail + '.webp' | url"
+                        class="size-full rounded-t object-contain"
+                        v-bind:class="{ 'group-hover:opacity-0 transition-opacity': addToCart.hoverImage }"
+                        :alt="item.name"
+                        :loading="config.category && count <= 4 ? 'eager' : 'lazy'"
+                        v-bind:style="{ 'view-transition-name': 'image-' + item.sku }"
+                        width="200"
+                        height="200"
+                    />
+                    <x-rapidez::no-image v-else class="size-full rounded-t" />
+                    <img
+                        v-if="addToCart.hoverImage"
+                        :src="'/storage/{{ config('rapidez.store') }}/resizes/200/magento/catalog/product' + addToCart.hoverImage + '.webp' | url"
+                        class="absolute pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity inset-0 size-full rounded-t object-contain"
+                        loading="lazy"
+                        width="200"
+                        height="200"
+                    />
+                </div>
                 <div>
                     <x-rapidez::highlight attribute="name" class="text-base font-medium hover:underline decoration-2"/>
                     @if (App::providerIsLoaded('Rapidez\Reviews\ReviewsServiceProvider'))

resources/views/product/partials/images.blade.php

@@ -1,6 +1,6 @@
 <div class="relative flex flex-col flex-1">
     <images>
-        <div class="flex-1" slot-scope="{ images, media, active, zoomed, toggleZoom, change }">
+        <div class="flex-1" slot-scope="{ media, active, zoomed, toggleZoom, change }">
             <div class="sticky top-5 bg-white">
                 @include('rapidez::product.partials.gallery.slider')
                 @include('rapidez::product.partials.gallery.thumbnails')

src/Casts/Children.php

@@ -25,7 +25,7 @@ public function get($model, $key, $value, $attributes)
                 }
             }
 
-            $child->images = isset($child->images) ? collect($child?->images)->sortBy('position')->pluck('value')->toArray() : [];
+            $child->media = isset($child->media) ? collect($child?->media)->sortBy('position')->toArray() : [];
 
             unset($child->special_from_date, $child->special_to_date);
         }

src/Models/Traits/Product/Searchable.php

@@ -78,6 +78,7 @@ public function toSearchableArray(): array
             ->mapWithKeys(fn ($position, $category_id) => [$category_id => $maxPositions[$category_id] - $position]);
 
         $data['popularity'] = $this->getPopularity();
+        $data['media'] = $this->media;
 
         return Eventy::filter('index.' . static::getModelName() . '.data', $data, $this);
     }