Skip to content

Commit

Permalink
Dynamic product listing image and redirect + swatch logic fix (#698)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Jade-GG
Jade-GG authored Jan 15, 2025
1 parent eed4840 commit 27b517d
Show file tree
Hide file tree
Showing 3 changed files with 65 additions and 50 deletions.
25 changes: 20 additions & 5 deletions resources/js/components/Product/AddToCart.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
Expand Down Expand Up @@ -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
Expand Down
56 changes: 29 additions & 27 deletions resources/views/listing/partials/item.blade.php
View file
Original file line number Diff line number Diff line change
@@ -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>
34 changes: 16 additions & 18 deletions resources/views/listing/partials/item/addtocart.blade.php
View file
Original file line number Diff line number Diff line change
@@ -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>

0 comments on commit 27b517d

Please sign in to comment.