From 27b517d1dd29af9428995c0e6b4c43dcc1eedd47 Mon Sep 17 00:00:00 2001
From: Jade Geels <jade@justbetter.nl>
Date: Wed, 15 Jan 2025 14:51:57 +0000
Subject: [PATCH] Dynamic product listing image and redirect + swatch logic fix
 (#698)

---
 resources/js/components/Product/AddToCart.vue | 25 +++++++--
 .../views/listing/partials/item.blade.php     | 56 ++++++++++---------
 .../listing/partials/item/addtocart.blade.php | 34 ++++++-----
 3 files changed, 65 insertions(+), 50 deletions(-)

diff --git a/resources/js/components/Product/AddToCart.vue b/resources/js/components/Product/AddToCart.vue
index eca58d1c7..9534d40c2 100644
--- a/resources/js/components/Product/AddToCart.vue
+++ b/resources/js/components/Product/AddToCart.vue
@@ -59,11 +59,7 @@ export default {
 
     methods: {
         async add() {
-            if (
-                window.location.pathname !== this.product.url &&
-                (this.product?.has_options ||
-                    ('children' in this.product && Object.values(this.product.children).length && !config.show_swatches))
-            ) {
+            if (this.shouldRedirectToProduct) {
                 Turbo.visit(window.url(this.product.url))
                 return
             }
@@ -262,6 +258,25 @@ export default {
     },
 
     computed: {
+        currentThumbnail: function () {
+            return this.simpleProduct?.thumbnail || this.simpleProduct?.images?.[0] || this.product?.thumbnail
+        },
+
+        shouldRedirectToProduct: function () {
+            // Never redirect if we're already on the product page
+            if (window.location.pathname === this.product.url) {
+                return false
+            }
+
+            // Products with product options always have to be set on the product page
+            if (this.product?.has_options) {
+                return true
+            }
+
+            // Check if all super_attributes have an option selected
+            return Object.keys(this.product?.super_attributes).join(',') !== Object.keys(this.options).join(',')
+        },
+
         simpleProduct: function () {
             var product = this.product
 
diff --git a/resources/views/listing/partials/item.blade.php b/resources/views/listing/partials/item.blade.php
index ca0662882..c21acda9b 100644
--- a/resources/views/listing/partials/item.blade.php
+++ b/resources/views/listing/partials/item.blade.php
@@ -1,31 +1,33 @@
 <template {!! isset($slider) ? '' : 'slot="renderItem" slot-scope="{ item, count }"' !!}>
     <div class="size-full">
-        <div class="group relative flex flex-1 flex-col rounded border bg-white p-5" :key="item.entity_id">
-            @if (App::providerIsLoaded('Rapidez\Wishlist\WishlistServiceProvider'))
-                <div class="group absolute right-0 top-0 z-10 p-2">
-                    @include('rapidez::wishlist.button')
-                </div>
-            @endif
-            <a :href="item.url | url" class="block">
-                <img
-                    v-if="item.thumbnail"
-                    :src="'/storage/{{ config('rapidez.store') }}/resizes/200/magento/catalog/product' + item.thumbnail + '.webp'"
-                    class="mb-3 h-48 w-full rounded-t object-contain" :alt="item.name" :loading="config.category && count <= 4 ? 'eager' : 'lazy'"
-                    width="200"
-                    height="200"
-                />
-                <x-rapidez::no-image v-else class="mb-3 h-48 rounded-t" />
-                <div class="px-2">
-                    <div class="text-base font-medium">@{{ item.name }}</div>
-                    @if (!Rapidez::config('catalog/frontend/show_swatches_in_product_list', 1))
-                        <div class="flex items-center space-x-2">
-                            <div class="font-semibold">@{{ (item.special_price || item.price) | price }}</div>
-                            <div class="text-sm line-through" v-if="item.special_price">@{{ item.price | price }}</div>
-                        </div>
-                    @endif
-                </div>
-            </a>
-            @includeWhen(Rapidez::config('catalog/frontend/show_swatches_in_product_list', 1), 'rapidez::listing.partials.item.addtocart')
-        </div>
+        <add-to-cart v-bind:product="item" v-slot="addToCart" v-cloak>
+            <div class="group relative flex flex-1 flex-col rounded border bg-white p-5" :key="item.entity_id">
+                @if (App::providerIsLoaded('Rapidez\Wishlist\WishlistServiceProvider'))
+                    <div class="group absolute right-0 top-0 z-10 p-2">
+                        @include('rapidez::wishlist.button')
+                    </div>
+                @endif
+                <a :href="item.url | url" class="block">
+                    <img
+                        v-if="addToCart.currentThumbnail"
+                        :src="'/storage/{{ config('rapidez.store') }}/resizes/200/magento/catalog/product' + addToCart.currentThumbnail + '.webp'"
+                        class="mb-3 h-48 w-full rounded-t object-contain" :alt="item.name" :loading="config.category && count <= 4 ? 'eager' : 'lazy'"
+                        width="200"
+                        height="200"
+                    />
+                    <x-rapidez::no-image v-else class="mb-3 h-48 rounded-t" />
+                    <div class="px-2">
+                        <div class="text-base font-medium">@{{ item.name }}</div>
+                        @if (!Rapidez::config('catalog/frontend/show_swatches_in_product_list', 1))
+                            <div class="flex items-center space-x-2">
+                                <div class="font-semibold">@{{ (item.special_price || item.price) | price }}</div>
+                                <div class="text-sm line-through" v-if="item.special_price">@{{ item.price | price }}</div>
+                            </div>
+                        @endif
+                    </div>
+                </a>
+                @include('rapidez::listing.partials.item.addtocart')
+            </div>
+        </add-to-cart>
     </div>
 </template>
diff --git a/resources/views/listing/partials/item/addtocart.blade.php b/resources/views/listing/partials/item/addtocart.blade.php
index ad53e05bc..1574e74d2 100644
--- a/resources/views/listing/partials/item/addtocart.blade.php
+++ b/resources/views/listing/partials/item/addtocart.blade.php
@@ -1,21 +1,19 @@
-<add-to-cart v-bind:product="item" v-slot="addToCart" v-cloak>
-    <form class="px-2 pb-2" v-on:submit.prevent="addToCart.add">
-        <div class="flex items-center space-x-2 mb-2">
-            <div class="font-semibold">
-                @{{ (addToCart.simpleProduct.special_price || addToCart.simpleProduct.price) | price }}
-            </div>
-            <div class="line-through text-sm" v-if="addToCart.simpleProduct.special_price">
-                @{{ addToCart.simpleProduct.price | price }}
-            </div>
+<form class="px-2 pb-2" v-on:submit.prevent="addToCart.add">
+    <div class="flex items-center space-x-2 mb-2">
+        <div class="font-semibold">
+            @{{ (addToCart.simpleProduct.special_price || addToCart.simpleProduct.price) | price }}
         </div>
+        <div class="line-through text-sm" v-if="addToCart.simpleProduct.special_price">
+            @{{ addToCart.simpleProduct.price | price }}
+        </div>
+    </div>
 
-        <p v-if="!item.in_stock" class="text-red-600 text-xs">
-            @lang('Sorry! This product is currently out of stock.')
-        </p>
-        <div v-else>
-            @include('rapidez::listing.partials.item.super_attributes')
+    <p v-if="!item.in_stock" class="text-red-600 text-xs">
+        @lang('Sorry! This product is currently out of stock.')
+    </p>
+    <div v-else>
+        @includeWhen(Rapidez::config('catalog/frontend/show_swatches_in_product_list', 1), 'rapidez::listing.partials.item.super_attributes')
 
-            <x-rapidez::button.cart/>
-        </div>
-    </form>
-</add-to-cart>
+        <x-rapidez::button.cart/>
+    </div>
+</form>