Skip to content

Skip wishlist lists fetch for guest visitors to reduce CLS on product listings#464

Open
Prestaplugins wants to merge 3 commits into
PrestaShop:devfrom
Prestaplugins:fix/skip-wishlist-fetch-for-guests-cls
Open

Skip wishlist lists fetch for guest visitors to reduce CLS on product listings#464
Prestaplugins wants to merge 3 commits into
PrestaShop:devfrom
Prestaplugins:fix/skip-wishlist-fetch-for-guests-cls

Conversation

@Prestaplugins

@Prestaplugins Prestaplugins commented Jun 17, 2026

Copy link
Copy Markdown
Questions Answers
Branch? dev
Description? Guest visitors triggered an unnecessary getAllWishlist fetch via the Apollo lists resolver when wishlist buttons were initialized on product listing pages. This delayed button rendering and caused Cumulative Layout Shift (CLS).

This PR short-circuits the lists resolver when prestashop.customer.is_logged is false, returning an empty array without any network request (same login flag already used by Button.vue).
Type? bug fix
Category? FO
BC breaks? no
Deprecations? no
How to test? 1. Install the module on a PrestaShop 8.x or 9.x shop with product listings.
2. Guest: open a category page → Network tab → confirm no getAllWishlist request.
3. Guest: wishlist buttons still appear on miniatures; clicking opens login modal as before.
4. Logged-in customer: getAllWishlist is still called; add/remove from wishlist works on listings and product page.
5. Optional: run Lighthouse on a category page and compare CLS before/after.
UI Tests N/A (module JS change; no native UI test campaign run)
Fixed issue or discussion? Fixes #463
Related PRs
Sponsor company Prestaplugins

Summary

  • Skip the lists GraphQL resolver fetch when prestashop.customer.is_logged is false.
  • Regenerate public/ bundles via npm run build so every bundle embedding the resolver stays in sync with _dev/.

Motivation

The lists query is only meaningful for authenticated customers. For guests, the server cannot return wishlists, yet the module still performed the HTTP request and waited for the response before stabilizing the wishlist UI on product miniatures.

Co-authored-by: Cursor <cursoragent@cursor.com>
@ps-jarvis

Copy link
Copy Markdown

Hello @Prestaplugins!

This is your first pull request on blockwishlist repository of the PrestaShop project.

Thank you, and welcome to this Open Source community!

@github-project-automation github-project-automation Bot moved this to Ready for review in PR Dashboard Jun 17, 2026

@nicohery nicohery left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Thanks 🙏 The fix itself is sound, and the strict === false guard is a good defensive default (safe fallback when the def is missing).

Could you regenerate the bundles via npm run build instead of hand-editing them? Two side effects on public/product.bundle.js:

  • a UTF-8 BOM (EF BB BF) got prepended (not present on dev);
  • the lists resolver is also compiled into the productslist / addtowishlist / wishlistcontainer bundles, which don't get the guard. Only product.bundle.js is registered on the FO so it works at runtime, but the compiled assets now diverge from the source.

A clean build keeps public/ in sync, drops the BOM, and applies the guard everywhere. Otherwise looks good to me 👍

@ps-jarvis ps-jarvis moved this from Ready for review to Waiting for author in PR Dashboard Jun 17, 2026
Replace hand-edited product.bundle.js with webpack output so all bundles embedding the lists resolver stay in sync with _dev/ and no UTF-8 BOM is introduced.

Co-authored-by: Cursor <cursoragent@cursor.com>
@Prestaplugins

Copy link
Copy Markdown
Author

Thanks for the review, @nicohery!

I've pushed a follow-up commit that regenerates all public/ assets via npm ci && npm run build, as requested.

The lists guard is now compiled into every bundle that embeds the resolver (product, productslist, addtowishlist, wishlistcontainer, button, create, rename).
The UTF-8 BOM on product.bundle.js is gone.
_dev/ and public/ are back in sync; no more hand-edited bundles.

@Prestaplugins Prestaplugins requested a review from nicohery June 17, 2026 12:56

@nicohery nicohery left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Thanks — the rebuild resolves my first point.

One more change: the module already knows the login state client-side — Button.vue uses prestashop.customer.is_logged (line 95). The lists resolver could gate on that directly:

lists: async (root, {url}) => {
  if (!prestashop.customer.is_logged) {
    return [];
  }
  ...
}

That lets you drop the new blockwishlistUserLogged JS def and the PHP change entirely, for a single source of truth.

Drop blockwishlistUserLogged JS def and PHP hook change; reuse the same login flag already consumed by Button.vue, per review feedback.

Co-authored-by: Cursor <cursoragent@cursor.com>
@Prestaplugins

Prestaplugins commented Jun 17, 2026

Copy link
Copy Markdown
Author

Thanks for the follow-up, @nicohery! Pushed a commit that gates the lists resolver on prestashop.customer.is_logged (same flag as Button.vue) and reverts the blockwishlistUserLogged PHP/JS def. Bundles regenerated via npm run build.

@Prestaplugins Prestaplugins requested a review from nicohery June 17, 2026 13:11

@nicohery nicohery left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Simplification's in. Approving and leaving the rest to other reviewers.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

Status: Waiting for author

Development

Successfully merging this pull request may close these issues.

Wishlist buttons cause CLS on product listings for guest visitors (unnecessary getAllWishlist fetch)

3 participants