Searching / filtering resources based on url path not get or post

Support
1

I’m wondering if anyone is able to help me / point me in the right direction.

Currently, I have my site set up so that AJAX loads in resources based on the filters etc.

I would like to create something similar to this https://www.dexters.co.uk/property-sales/houses-for-sale-in-hampstead, notice how when you search by location or and of the filters the URL changes rather than using post or get to get a response.

I really don’t know where to begin on this. I feel like its really straight forward but I don’t know what to read up on.

Any help would be greatly appreciated.

2

Extras (like Tagger for example) usually run a plugin on the event OnPageNotFound for this kind of functionality.

Maybe you can also use the extra CustomRequest.

3

Thank you for the quick response!

I did come across this plugin in my search but wasn’t clear if this was what I needed.

Do you have any experience from this extension?

4

Maybe CustomRequest is not what you need. It depends on your requirements.

If you want a solution like the one on the page you linked with URLs like these

.../properties/3-bedroom-houses-for-sale-in-hampstead
.../properties/2-bedroom-flats-to-rent-in-hampstead

then you probably have to write a custom plugin to extract the relevant information (number of rooms, houses or flats, for sale or for rent, location) from the URL and route to the correct resource ($modx->sendForward(...)).

I think with CustomRequest you could handle URLs like these.

.../properties/3-bedroom/houses/for-sale/hampstead
.../properties/2-bedroom/flats/to-rent/hampstead

Maybe the former URLs work too, if you use a a regular expression.

5

Thank you this is super helpful. I’m going to try now and see how it goes!

6

It looks to me like this page doesn’t act very differently than a POST. The whole page reloads after each filter change. It’s nice to have a URL that can be distributed, but if you’re using AJAX to avoid page reloads, then a regular URL won’t work optimally. See this page on one of my sites:

When you do a search, the results load via AJAX, so there is no page reloading. The javascript that updates the page with the AJAX results also adds search terms to the URL after a hash mark, so that a dedicated URL for that particular search can be used for distribution, but no page reloading occurs when doing multiple searches on the page. You can look at the source code for this page and see the javascripts at the bottom to see what’s going on. You could use something other than exact search terms after the hash mark, as long as you parse them properly upon the initial page load (see the last script on this page, which parses the info after the hash, fills out the form, and initiates a search). Maybe CustomRequest would do that just as well with a URL containing a hash mark; you’d have to test that. So, your URL could look like this:

…/#properties/3-bedroom/houses/for-sale/hampstead

7

Thank you for your reply.

The customRequest extra, at the moment, seems to be the functionality I’m going for.

I’m currently retrieving the path, I’m just currently now writing a snippet to process the path into a search object.

Thank you for pointing me in the right direction.

8

No, that doesn’t work.

You can make it work.
Use the values from the URL in the initial response and then reload the data with AJAX when the filter changes and update the URL in the browser (history.pushState()) accordingly.