Filtering a price range with ACF fields

[Araminta]

As promised, here is a short video on how to set up a range slider using ACF fields, for a price field.

In need of real indepth tutorial of the Query/Filter blocks using custom post type, custom taxonomies and ACF

Thanks for offering. I am simply using ACF fields, so I need to be able to do range sliders for Meta Queries. But this has proven difficult. In my application, it is for a price field. Beyond that, I would like to know how to create filters for ordering by Meta Query eg. order by price: high-low, order by bedrooms: high-low, etc. I also want to be able to do a count (X items found). See below what I’m trying to create. [image] The other dropdowns are simple enough, but I need help with the …

Range slider - price range

[owynter]

Thank you!
This was very helpful, and I’m now able to create the range slider in a predictable fashion.
There are a couple of issues now which I cover in the video below:

https://jam.dev/c/8bda58f5-682c-407b-a5ba-05247f4d45d7

The main things are:

• Slider handle jumps erratically if the “Steps” option is changed to a larger number. In my case, I needed steps of $1,000 or $10,000. This caused very poor UX.

• I need to be able to add thousands separators. By default, ACF doesn’t output this. I use a snippet to format the values elsewhere, but this isn’t picked up in the Cwicly filter.

• A visual indication to users if the filters do not return any results.

My dev environment is here

Finally, could you show how to have a “Count” filter eg “12 Results Found”.
And an “Order By” filter eg “Highest to Lowest”.

Thanks,

[Louis]

Hello @owynter,

Thank you for your valid points in your video.
Will see what we can do in the next coming days to get this all addressed

Thanks @Araminta as always

[owynter]

@Louis, really hate to be returning to this repeatedly, just under so much pressure with deadlines. I feel we’re so close to the solution I need, but with just a thing or two missing.

For Post Count, I tried going the pure PHP route via:

<div>
  <?php 
    $args = array(
      'post_type' => 'property'
    );
    $the_query = new WP_Query( $args );
    $totalpost = $the_query->found_posts; 
  ?>
  <p>Total number of posts: <?php echo $totalpost; ?></p>
</div>

Which gives me this:

It’s correct, of course, but I immediately saw the limitations, since Cwicly runs queries from the database just once, and filters do all their work on the frontend without re-running the query. It’s great for performance, but leaves me stuck.

I don’t know what your timeline is for adding a solution, but if you could help me with a code solution that gets me there, I’d appreciate it.

[Louis]

Hi @owynter,

Might be able to get something out for the next update in a couple of days, but don’t take my word!

[owynter]

With the exception of Post Order and Count, I have all I need for my current project. Client has been hounding me because she wants it to go live ASAP. A post count seems doable without much work. Hopefully you can find the time to put that out at some point as it would be immensely helpful.

Post order seems like it might be more work, but it would be extremely helpful.

I had tried a few PHP + JS solutions with no luck. In looking at the Query code, since it’s all faithful to WP_Query, I was trying to inject the values in the Query order via JS

For example:

  'orderby' => 'meta_value_num',
  'meta_key' => 'property_price',
  'order' => 'ASC',

I tried to hook into this to pass a value for the order (ASC or DESC), depending on a selection box, but this was a no-go in my trials last night.

[Louis]

Post Order (DESC / ASC) is already filterable with static options.

Same goes for orderby if you’re either sticking with only meta_value_num or simple orderby parameters.

The only thing stopping you currently is the ability to switch between simple and meta orderby, which requires multiple URL keys to be added at once.

[owynter]

Then, I think we’re right back to my original request.

A short video showing how would be appreciated.

Clearly the Filter block has amazing functionality, but I, and I would assume a lot of others, don’t know how to maximize it.

[Louis]

Hi @owynter,

It basically is the same for all Query properties as they can all be controlled by URL parameters.

For example, with the order parameter:

[owynter]

Thanks Louis! This works.

However, it’s not an optimal, long-term solution for UX reasons.
Since this is another filter, it gets reset each time the user clears the filters. You can imagine this can get frustrating having to set the ordering each time you change your filter parameters.

The typical UX for listings is that the controls for ordering the listing grid is independent of any filters.

My immediate thinking is that this needs to be a separate block: Query Order, that can (only) be applied to queries, similar to the Query Template block. Likewise a Query Count block. I think the functions are more integral to the experience than simple filtering values.

I can add a feature request as no doubt, it would require more consideration on your part.

[Louis]

@owynter

I can add a feature request as no doubt, it would require more consideration on your part.

This sounds like a good idea

[smontreuil]

This is a super-helpful thread for me as I want to migrate away from my current Elementor/Croco environment for my rental listings site. Thank you @owynter for your persistence and @Louis for your tireless work! Oh, and thank you Araminta for the video, it gets right to the meat.

[owynter]

Glad to have you here. I moved away from Elementor and the entire Crocoblock mess a long time ago. Still a few things to add in Cwicly, but we’re definitely close.

I’m also doing a rental/property listings site, and it’s been a bit of work getting it just how I want.

I did relent, and go with Gridbuilder in the end, although it feels like I’m cheating on @Louis
It’s more fit for purpose, and time was against me. It has come with its own limitations, but does the things I had been discussing on this thread. Being able to display the listings on a map was probably the biggest plus over a pure Cwicly option.

[smontreuil]

Ohhhhhhh, yes, that is the reason i haven’t ditched Croco all together already … the ajax filter tool and the map listing widget combo. It’s so slow but it gets the job done and is exactly what I need for this application. … also the ‘save for later’ ‘mark as favorite’ feature … not sure if I can replicate this in Cwicly either.

I would love to get a look at how you are using Gridbuilder to accomplish this @owynter , any chance we could have a video call once you get your project launched?

[owynter]

@smontreuil

I would love to get a look at how you are using Gridbuilder to accomplish this @owynter , any chance we could have a video call once you get your project launched?

Absolutely. Ping me later in the week, or early next week.

[owynter]

@Louis, fantastic work on the Filters in the latest update. Definitely a lot better, and a few really nice improvements. I think we’re almost there!

[smontreuil]

@owynter - not sure if you got your product launched yet … checking in to see if we can have a chat. My email address is: shelley@bookingpei.com if you want to reach out that way.