Improve pagination

[fredericalpers]

Initiative

Optimize the frontend of the onOffice for WP-Websites Plugin for a better user experience.

Epic

Improve the pagination of property lists.

User story

As a real estate agent utilizing the onOffice for WP-Websites plugin, I often showcase multiple property lists on a single page to provide diverse property options to my visitors. However, the current pagination mechanism does not differentiate between these lists, leading to synchronization issues. To enhance the user experience and enable independent pagination for each property list, I propose the automatic assignment of unique IDs to each list derived from the shortcode name.

Presently, when multiple property lists are displayed on a single page the pagination controls operate collectively, impacting all lists simultaneously. This creates confusion and disrupts the seamless browsing experience. This enhancement ensures that pagination controls act independently for each list.

Tasks

• Implement a system to automatically generate unique IDs for each property list based on the extracted shortcode name
• If necessary adjust the pagination logic to recognize and act on the individual IDs assigned to each property list

By implementing individual IDs for property lists, derived from shortcode names, the onOffice for WP-Websites Plugin can significantly improve the user experience for real estate agents who frequently showcase multiple property lists, ensuring that pagination operates independently for each list.

[dai-eastgate]

@fredericalpers I currently have no effort to investigate this issue in this cycle. Therefore, I will continue to investigate it in the next cycle. Thanks!

[yeneastgate]

@fredericalpers
I have implemented the feature:

1. "Automatically generate unique IDs for each property list based on the extracted shortcode name"
2. The pagination feature works independently for each shortcode when embedding multiple shortcodes on the same page
   example:
   In List View 1 (with ID=40), I am clicking on page 3, the URL will have the following structure:
   /?page_of_id_40=3
   In List View 2 (with ID=53), I am clicking on page 3, the URL will have the following structure:
   /?page_of_id_53=3
   In List View 3 (with ID=54), I am clicking on page 3, the URL will have the following structure:
   /?page_of_id_54=3
   I have tried implementing the solution in branch 43303-improve-pagination. Please take a look at my video demo.
   https://files.fm/u/9arh922u9b#/view/mk9q6gqzvu

=> Using the "pagination" feature on multi-list shortcode will cause the issue "pass many parameters GET to the URL".

Note:
Is the problem "URL contains many parameters" too big for you?
Because if we can ignore this problem => this solution is perfect

[fredericalpers]

@yeneastgate please go ahead and implement the suggested solution, thank you :)

[yeneastgate]

@fredericalpers I created a PR for this issue. Please take a look at my video demo. Thanks!

695.pagination.mp4