Allow user to choose different search results layout view – Grid or Rows

Anonymous

#167533

How would I go about having an option to display at least two different search results layouts? I currently have the search results display via shortcode. I customized the results.php template so that the results appear in a 4 column per row grid.

I want to have an option so the user can choose between this grid layout and a row layout (so the results are on one row per result) for their search results.

I was able to set up a jQuery tab layout that shows the two different layouts in each tab, however the pagination breaks when used. I’m assuming there is something with AJAX that needs to happen so the pagination updates inside these tabs. Any help or direction is much appreciated.

Anonymous

#167592

This reply has been marked as private.

Anonymous

#167596

Maybe 2 identical searches with different IDs and then use 101.php and 102.php rather than results.php (101 and 102 being the search codes). Would need to capture the content of the search and pass back and forth.

Trevor

#167635

I suspect that it is possible. Essentially, the results would have to appear twice on the page, in separate containers within the overall results container. One set would be hidden, you could use jQuery to toggle which view shows.

Our results.php file directly echoes HTML to the page as it loops, but instead you could pipe this output into two string variables, iteratively adding to them. And thus you can build both view type containers with content, and then echo the completed containers to the page, with the pagination afterwards.

Anonymous

#167817

I got this to sort of work now. I decided to use just one search results query and then used some jQuery to toggle the class of the “grid” container so it switches between a grid or rows view. The issue I’m having is keeping this class change with the pagination. When it goes to the next/previous page, the class resets. I think I need to save the state of the class with localStorage or a cookie and then load this state with the search results. Is there a callback function for the AJAX search results?

Anonymous

#167819

If anyone’s interested, the grid that I’m using is just the Zurb Foundation 6 legacy Float Grid – https://foundation.zurb.com/sites/docs/grid.html

And if you want all the grid columns to be the same height, you can use Foundation’s Equalizer – https://foundation.zurb.com/sites/docs/equalizer.html

I just implemented the necessary code into the custom results.php page that’s in the theme.

Trevor

#167838

On our FAQ page:

https://www.designsandcode.com/wordpress-plugins/search-filter-pro/faqs/

You will find script examples that can be used where Ajax is used. If yuo search our forum for examples of their use, e.g. search for ajaxfinish, you will find some complete code snippets. I do not know if these would help?

Anonymous

#167840

Thanks! I swear I saw this before but I couldn’t remember if I read the FAQ’s or not. I probably have too many damn browser windows and tabs open. I’ll search around the forum and see what I find. I’m pretty sure I can get this to work, my jQuery’s just a bit rusty.

[Author]

Posts