feat(vue-starter-template): wishlist pagination - #2641
Open
Maciej D (mdanilowicz) wants to merge 1 commit into
Open
feat(vue-starter-template): wishlist pagination#2641Maciej D (mdanilowicz) wants to merge 1 commit into
Maciej D (mdanilowicz) wants to merge 1 commit into
Conversation
… + wishlist tiles do not link to the product
Contributor
There was a problem hiding this comment.
Pull request overview
This PR updates the vue-starter-template wishlist flow by moving the wishlist page to the shared offset-based pagination utilities, while also modernizing pagination UI/UX and adding supporting translations.
Changes:
- Refactors
app/pages/wishlist.vueto useSharedPaginatedListwith an API-client fetcher (replacing custom wishlist pagination/fetch logic). - Improves shared pagination behavior and UX by distinguishing initial vs subsequent loading and updating the pagination control rendering (7 visible pages + ellipsis, better ARIA).
- Adds/extends i18n strings for wishlist empty-state and pagination next/previous labels (EN/DE/PL), and fixes the header wishlist icon navigation.
Reviewed changes
Copilot reviewed 13 out of 13 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| templates/vue-starter-template/i18n/pl-PL/wishlist.json | Adds wishlist empty-state translations (PL). |
| templates/vue-starter-template/i18n/pl-PL/layout.json | Adds pagination next/previous aria label strings (PL). |
| templates/vue-starter-template/i18n/en-GB/wishlist.json | Adds wishlist empty-state translations (EN). |
| templates/vue-starter-template/i18n/en-GB/layout.json | Adds pagination next/previous aria label strings (EN). |
| templates/vue-starter-template/i18n/de-DE/wishlist.json | Adds wishlist empty-state translations (DE). |
| templates/vue-starter-template/i18n/de-DE/layout.json | Adds pagination next/previous aria label strings (DE). |
| templates/vue-starter-template/app/pages/wishlist.vue | Switches wishlist page to SharedPaginatedList + adds loading/empty slots. |
| templates/vue-starter-template/app/composables/useOffsetPaginatedList.ts | Enhances async loading state modeling and scroll behavior. |
| templates/vue-starter-template/app/components/wishlist/ProductTile.vue | Adds remove behavior/event to trigger list refresh. |
| templates/vue-starter-template/app/components/shared/Pagination.vue | Rewrites pagination rendering to a 7-cell + ellipsis model with improved ARIA. |
| templates/vue-starter-template/app/components/shared/PaginatedList.vue | Differentiates initial vs subsequent loading and dims content during background loads. |
| templates/vue-starter-template/app/components/layout/Header.vue | Wraps wishlist icon with a link to /wishlist. |
| templates/vue-starter-template/app/app.vue | Adjusts “is wishlist route” detection to avoid unnecessary wishlist refetching. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Comment on lines
+13
to
21
| const emit = defineEmits<{ | ||
| removed: []; | ||
| }>(); | ||
|
|
||
| const { addProduct } = useCart(); | ||
| const { removeFromWishlist } = useProductWishlist(product.id); | ||
| const { pushError, pushSuccess } = useNotifications(); | ||
| const { t } = useI18n(); | ||
|
|
Comment on lines
62
to
66
| <ProductWishlistIcon | ||
| @click="removeFromWishlist" | ||
| @click="handleRemoveFromWishlist" | ||
| :isSelected="true" | ||
| class="!absolute top-4 right-4" | ||
| /> |
Comment on lines
+98
to
+100
| <NuxtLink :to="formatLink('/wishlist')"> | ||
| <LayoutHeaderWishlistIcon :counter="wishlistCount" /> | ||
| </NuxtLink> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
closes #2640
Screen.Recording.2026-08-18.at.11.39.52.mov
This pull request refactors and improves the wishlist page and related components in the Vue starter template. The main focus is on simplifying data fetching and pagination for the wishlist, enhancing the user experience with better loading states, accessibility, and internationalization, and improving the maintainability of the codebase.
Wishlist Page Refactor and Feature Improvements:
wishlist.vue) now uses a generic, composable-based paginated list (SharedPaginatedList) for fetching and displaying wishlist products, replacing custom fetching and pagination logic. This results in cleaner, more maintainable code and consistent pagination behavior across the app. [1] [2]Pagination and Loading State Enhancements:
Pagination.vuecomponent has been rewritten to always show a maximum of 7 visible pages with ellipsis for large lists, improved accessibility (ARIA labels, disabled states), and a more robust structure.useOffsetPaginatedList.tsandPaginatedList.vue) now distinguishes between initial and subsequent loading states, disables navigation when appropriate, and improves scroll-to-target behavior. [1] [2] [3] F19d39aeL19R19, [4] [5] [6]Wishlist Navigation and Routing:
Internationalization:
Most important changes:
Wishlist Page Refactor:
wishlist.vueto use a generic paginated list component, simplifying data fetching and pagination logic for the wishlist. Also added empty state handling and loading skeletons. [1] [2]removedevent and triggers a list refresh when an item is removed from the wishlist, improving UX. [1] [2]Pagination Improvements:
Pagination.vueto use a more robust, accessible, and user-friendly pagination system with ellipsis and ARIA labels.Navigation and Routing:
Internationalization: