From 1616728172cfd825101f80c9fbf402b7079be5b9 Mon Sep 17 00:00:00 2001 From: indy koning Date: Mon, 3 Nov 2025 15:36:01 +0100 Subject: [PATCH 1/2] Vue 3 upgrade + fixes --- README.md | 17 +++++++++ resources/js/Wishlist.vue | 33 ++++++++--------- resources/js/WishlistItem.vue | 2 +- resources/js/package.js | 11 +++--- resources/js/stores/useWishlists.js | 36 +++++++++---------- .../partials/details/product/image.blade.php | 10 +++--- .../partials/details/product/name.blade.php | 6 ++-- .../partials/details/product/price.blade.php | 2 +- .../details/product/quantity.blade.php | 29 ++++----------- .../partials/details/product/remove.blade.php | 2 +- .../account/partials/details/title.blade.php | 6 ++-- .../partials/details/wishlist.blade.php | 7 ++-- resources/views/partials/item/add.blade.php | 2 +- .../views/partials/item/button.blade.php | 4 +-- resources/views/partials/item/login.blade.php | 2 +- 15 files changed, 83 insertions(+), 86 deletions(-) diff --git a/README.md b/README.md index 5e35c9e..c19e4f9 100644 --- a/README.md +++ b/README.md @@ -5,6 +5,11 @@ composer require rapidez/multiple-wishlists ``` +Then you should run the migrations as this will add the `rapidez_wishlist` and `rapidez_wishlist_item` table in order to save multiple wishlists. +```shell +php artisan migrate +``` + It's not recommended to publish every view, rather you should overwrite only the files necessary. However, you can still publish all of the views with the following command: ``` php artisan vendor:publish --provider="Rapidez\MultipleWishlist\MultipleWishlistServiceProvider" --tag=views @@ -12,6 +17,18 @@ php artisan vendor:publish --provider="Rapidez\MultipleWishlist\MultipleWishlist You also should probably add a new "wishlists" button to the Rapidez account menu, if you use it in your project (which is in `rapidez/account/resources/views/partials/menu.blade.php`) +## Usage + +You can add a wishlist button to the product pages by adding: +```blade + +{{-- Or: --}} + +``` +depending on if it's in a listing or the current product on the PDP. + +`/account/wishlists` will show your wishlists. + ## API endpoints The API uses mostly Laravel apiResource endpoints. All of the exposed endpoints can be found below. Note that every request except for `GET /wishlists/shared/{token}` requires a bearer token header for authorization. This is the magento oauth token of the customer. diff --git a/resources/js/Wishlist.vue b/resources/js/Wishlist.vue index 4410766..19d3c84 100644 --- a/resources/js/Wishlist.vue +++ b/resources/js/Wishlist.vue @@ -3,11 +3,12 @@ import { useShare } from '@vueuse/core' import { wishlists, create, remove, update, addItem, removeItem } from './stores/useWishlists' import { refresh as refreshCart } from 'Vendor/rapidez/core/resources/js/stores/useCart' import { mask as cartMask } from 'Vendor/rapidez/core/resources/js/stores/useMask' - import wishlistItem from './WishlistItem.vue' -Vue.component('wishlist-item', wishlistItem) export default { + components: [ + wishlistItem + ], props: { wishlistId: { type: Number, @@ -16,14 +17,14 @@ export default { sharedId: String, }, - mounted() { - if(this.sharedId) { - this.fetchShared() - } + emits: ['update:modelValue'], + setup() { const { share, isSupported } = useShare() - this.shareFn = share - this.isSupported = isSupported + return { + shareFn: share, + isSupported, + } }, data() { @@ -32,14 +33,13 @@ export default { added: false, editing: null, sharedWishlist: null, - - shareFn: null, - isSupported: null, + wishlists: wishlists } }, methods: { isWishlisted(productId) { + console.log(wishlists, this.wishlists) return this.wishlists && Array.isArray(this.wishlists) && this.wishlists.some(e => this.findItem(e, productId)) }, @@ -138,10 +138,6 @@ export default { }, computed: { - wishlists() { - return wishlists.value - }, - wishlist() { if (this.wishlistId) { return this.getWishlist(this.wishlistId) @@ -162,7 +158,12 @@ export default { }, render() { - return this.$scopedSlots.default(this) + return this.$slots.default(this) + }, + mounted() { + if(this.sharedId) { + this.fetchShared() + } }, } diff --git a/resources/js/WishlistItem.vue b/resources/js/WishlistItem.vue index e66d4cd..364bda5 100644 --- a/resources/js/WishlistItem.vue +++ b/resources/js/WishlistItem.vue @@ -15,7 +15,7 @@ export default { }, render() { - return this.$scopedSlots.default(this) + return this.$slots.default(this) }, mounted() { diff --git a/resources/js/package.js b/resources/js/package.js index e326e66..2348659 100644 --- a/resources/js/package.js +++ b/resources/js/package.js @@ -1,7 +1,8 @@ -import { clear } from './stores/useWishlists'; +import './stores/useWishlists'; +import { defineAsyncComponent } from 'vue' -Vue.component('wishlist', () => import('./Wishlist.vue')) - -document.addEventListener('vue:loaded', (event) => { - window.app.$on('logged-out', clear); +document.addEventListener('vue:loaded', function (event) { + const vue = event.detail.vue + vue.component('wishlist', defineAsyncComponent(() => import('./Wishlist.vue'))) + vue.component('wishlist-item', defineAsyncComponent(() => import('./WishlistItem.vue'))) }) diff --git a/resources/js/stores/useWishlists.js b/resources/js/stores/useWishlists.js index b032a00..0044100 100644 --- a/resources/js/stores/useWishlists.js +++ b/resources/js/stores/useWishlists.js @@ -1,10 +1,11 @@ import { useLocalStorage } from "@vueuse/core" -import { computed, watch } from "vue" +import { computed, ref, watch } from "vue" import { token } from 'Vendor/rapidez/core/resources/js/stores/useUser' +import { on } from 'Vendor/rapidez/core/resources/js/polyfills/emit' export const wishlistStorage = useLocalStorage('wishlists', []) -let isRefreshing = false -let hasFetched = false +const isRefreshing = ref(false) +const hasFetched = ref(false) export const refresh = async function () { if (!token.value) { @@ -12,42 +13,39 @@ export const refresh = async function () { return true } - if (isRefreshing) { + if (isRefreshing.value) { console.debug('Refresh canceled, request already in progress...') return } - isRefreshing = true + isRefreshing.value = true try { wishlistStorage.value = (await window.rapidezAPI('GET', 'wishlists', {})) || [] - hasFetched = true + hasFetched.value = true } catch (error) { console.error(error) Notify(window.config.translations.errors.wrong, 'error') } - isRefreshing = false + isRefreshing.value = false } export const clear = async function () { wishlistStorage.value = [] - hasFetched = false + hasFetched.value = false } -export const wishlists = computed({ - get() { - if (!hasFetched && wishlistStorage.value.length === 0) { - refresh() - } - - return wishlistStorage.value - }, - set(value) { - wishlistStorage.value = value +export const wishlists = computed(() => { + if (!hasFetched.value && wishlistStorage.value.length === 0) { + refresh() } + + return wishlistStorage.value }) watch(token, refresh) +on('logged-out', clear, {autoremove: false}); + export default () => wishlists export const create = async function (title) { @@ -109,8 +107,6 @@ export const update = async function (id, data) { } } - - export const addItem = async function (id, productId) { try { let fetchData = { diff --git a/resources/views/account/partials/details/product/image.blade.php b/resources/views/account/partials/details/product/image.blade.php index b66c174..f0ca15b 100644 --- a/resources/views/account/partials/details/product/image.blade.php +++ b/resources/views/account/partials/details/product/image.blade.php @@ -1,11 +1,11 @@ - @@ -15,7 +15,7 @@