Commit Graph

1 Commits

Author SHA1 Message Date
Manish Menaria 1d8007b822
Product Collection: Return to top after page change (#43817)
* Initial working version

* Update scrolling behavior in product collection block frontend

This commit updates the scrolling behavior in the product collection block's frontend script.

Previously, the code focused on the first anchor or button within a product collection block. This approach was taken to maintain accessibility and ensure that the focused element was scrolled into view. However, this behavior has been changed to improve the user experience.

The updated code now directly scrolls to the first product in the collection. This is achieved by selecting the product using a new selector that targets the `.wc-block-product` class within the `.wc-block-product-template` of the specified `data-wc-navigation-id`. Once the product is selected, the `scrollIntoView` method is used with smooth behavior and start block alignment, offering a more visually appealing scroll effect.

This change enhances the user experience by smoothly directing attention to the beginning of the product collection, making it easier for users to browse products.

* Remove code related to animation

* Fix the issue related to pagination block rendering

- I have improved the code by breaking it into smaller functions
- Added unique `data-wc-key` to each anchor tag

* Enhance Product Collection Block with Interactive Prefetching

* Refine Prefetch Logic & other improvements

This commit further refines the prefetch logic and interactivity in the Product Collection block. It focuses on enhancing code clarity and improving the prefetch behavior based on user interactions.

Key changes include:
1. Renamed 'isPrefetchNextAndPreviousLink' to 'isPrefetchNextOrPreviousLink' in ProductCollectionStoreContext for better readability and accuracy.
2. Modified the scrollToFirstProductIfNotVisible function to accept a wcNavigationId as a parameter instead of a reference
3. Introduced checks for the existence of wcNavigationId in scrollToFirstProductIfNotVisible to prevent unnecessary executions.
4. Updated comments throughout frontend.tsx for enhanced clarity, explaining the prefetch logic and its triggers in detail.
5. Adjusted the logic in the navigate and prefetch functions to align with the new context structure and prefetch strategy.
6. In ProductCollection.php, updated data attributes to align with the revised prefetch strategy.
7. Refined the attribute setting in process_pagination_links function to correctly implement the updated interactivity and prefetch logic.

These changes aim to optimize the prefetch functionality, reduce unnecessary prefetching on initial page load, and ensure a smoother and more efficient navigation experience within the Product Collection block.

* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce

* Improve comments

* Use wp_json_encode for data-wc-interactive attribute

This commit updates the `ProductCollection` class to use `wp_json_encode` for setting the `data-wc-interactive` attribute value. Previously, the attribute value was hardcoded as a JSON string. Now, by utilizing `wp_json_encode`, we ensure the JSON encoding is handled correctly by WordPress standards, enhancing readability and maintainability of the code.

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-02-02 12:07:29 +05:30