Sorting Select

[fredericalpers]

Initiative

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

Epic

Improve the sorting select (select2).

User story

As a real estate agent utilizing the onOffice for WP-Websites plugin, I display multiple property lists on a single page to provide diverse options to my website visitors. However, the current implementation of the sorting select using select2 leads to disruptions when multiple property lists are present on the same page. To enhance the user experience and enable independent sorting for each property list, a modification should be made to use a css class for each sorting select, instead of an ID.

The current mechanism disrupts the functionality of select2, impacting the sorting experience. To address this, the sorting should not be identified by the ID, instead use a class. This modification ensures that the sorting controls operate independently for each property list, preventing disruptions.

Tasks

• [x] Implement using a css class to identify the sorting select instead of ID

By implementing CSS class’ for the sorting controls for property lists, the onOffice for WP-Website can improve the user experience for real estate agents who frequently showcase multiple property lists ensuring that sorting 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!

[dai-eastgate]

@fredericalpers Example: I have 2 list view List View ID (40) has sorting (sorting for ID=40) which has "sorting by" = "number of rooms" and "direction" ="ascending" List View ID (54) has sorting (sorting for ID=54) which has "sorting by" = "number of bathrooms" and "direction" ="descending"

In my understanding, the problem you are facing is: When I embed 2 shortcodes List view ID 40 and 54 on the same page => The sorting feature outside FE is only working according to (sorting for ID=40). Please watch my video reproducing the bug and confirm if it shows the issue you're facing or not?

https://github.com/onOffice-Web-Org/oo-wp-plugin/assets/106214469/6c5faca8-73f2-45b6-8cec-97d1e49a94f2

Here is the solution I have implemented:

1. Generate HTML in ShortListRenderer.php, I will replace id='onofficeSortListSelector' to class = "onofficeSortListSelector" and add data attribute has value is list view ID <select name="userDefinedSelection" data-sort-listviewid="1" class="onofficeSortListSelector">

2. In the "onoffice-sort-by-user-selection" JS file, I will replace the Jquery selector from "#onofficeSortListSelector" to ".onofficeSortListSelector" and append "listviewID" to the names of the parameters "sortby" and "sortorder" to distinction for each respective listview.

I have tried implementing the solution in branch https://github.com/onOffice-Web-Org/oo-wp-plugin/compare/master...43302-sorting-select This is my video test, do you agree with my solution?

https://github.com/onOffice-Web-Org/oo-wp-plugin/assets/106214469/d68e54a4-c488-446b-a739-43cf5b4b7385

[fredericalpers]

@dai-eastgate this seems to be working this way now, thank you :)

[dai-eastgate]

@fredericalpers Note: Using the "Sorting select" feature on multi-list shortcode will cause the issue "pass many parameters GET to the URL". => Is the problem "URL contains many parameters" too big for you? Because if we can ignore this problem => this solution is perfect

[fredericalpers]

@dai-eastgate please implement the suggested solution, thank you :)

[yeneastgate]

@fredericalpers I have implemented the suggested solution. Please take a look at my video and let me know your opinions. Thanks!

https://files.fm/u/v7tazwgdck#/view/7rhynp8krp

[fredericalpers]

@yeneastgate looks good to me! thank you for your efforts :) can I label this as in review?

[yeneastgate]

@yeneastgate looks good to me! thank you for your efforts :) can I label this as in review?

Yes, please help us to review. Thanks!