Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[3.x] Fix issues with add-to-cart on listing when product has super_attributes #698

Merged
merged 4 commits into from
Jan 15, 2025
Merged

[3.x] Fix issues with add-to-cart on listing when product has super_attributes #698

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f852c8e
Fix add to cart always redirecting on products with super attributes
Jade-GG Jan 9, 2025
224029e
Move show_swatches check to only be around the super_attributes & thu…
Jade-GG Jan 9, 2025
5c6b894
Apply fixes from Prettier
Jade-GG Jan 9, 2025
71bc721
Merge remote-tracking branch 'origin/master' into feature/listing-add…
Jade-GG Jan 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 20 additions & 5 deletions resources/js/components/Product/AddToCart.vue
View file
Open in desktop
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
},
royduin marked this conversation as resolved.
Show resolved Hide resolved

shouldRedirectToProduct: function () {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Previously we also listened to config.show_swatches should we check this here?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In principle it shouldn't really matter for this check. If you have a product that doesn't have all options filled, it doesn't matter whether the options are shown or not.

// 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
Open in desktop
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
Open in desktop
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>
Loading