JS to not show products on load

Anonymous

#242455

I have the S&F filter within the description of a woo category page, using it as a filter “builder” to show a certain selection of products based on the options selected.

naturally, the category shows all products within this category on load. I would like these not to be shown until the filter form is submitted. I could of course just hide the entire .products container with css, and then show it on submit of form, but this still means that the initial query is loaded in the background to retrieve all products.

is there a way?

Anonymous

#242456

forgot to tick notify.

Trevor

#242521

I am assuming that you are using the WooCommerce method? You could edit the PHP template being used and add some logic to test if a filter has yet been applied, like this (change the ID to match the form you are using):

global $searchandfilter;
$sf_current_query = $searchandfilter->get(1234)->current_query();
if ((!$sf_current_query->is_filtered())&&($sf_current_query->get_search_term()=="")) {
  echo '<div>Nothing to see here folks!</div>'; 
} else {
  // the current products output code here
}

Anonymous

#242566

Thanks Trevor, I understand the logic here, but it doesnt appear to be working – potentially because I am using the AJAX to return the results, rather than a page refresh.

essetnially by wrapping the default category loop code with your conditional logic, it always says “nothing to see here folks”.

any clues?

Trevor

#242572

I thought you wanted to hide the results until a search had been made?

Anonymous

#242580

This reply has been marked as private.

Trevor

#242586

Then, it seems to work for me, apart from that message, where you can place whatever you want to show on the page (or nothing).

Anonymous

#242588

hmmm. but when I select gender and the shape, it should show products – its not. it just shows the “empty” message.

removing your code, the results show and filter as expected – its just that on load it shows ALL products.

Trevor

#242594

It might be that the container for the nothing here message needs the same structure and css class as the woocommerce shop, usually something like:

<ul class="products">message</ul>

You can test if my theory is true by disabling ajax.

Anonymous

#242597

Hi Trevor, you were correct, the container for the message needed to have the same format, simply wrapping the message (or no message) with the corresponding HTML did the trick – thanks! (you can close this)

[Author]

Posts