[Closed] Switch between list & grid view on frontend

[Author]

Posts

[thomasL-2]

Hi there,

I'd like to offer visitors to switch between list & grid view on the frontend, is that possible? Important is that not just another view is loaded where the visitor has to search again but that the current search is transferred (including the search query, pagination, sorting etc.).

Maybe there's a way to link to another view and to "transfer" the URL query from the current view to the new one? Basically just replacing the current view's page slug with the page slug of the additional view but maintain the URL query...?

Cheers,
Thomas

[Caridad]

Dear Thomas,

There is no direct support for switching layout but we could use one of these workarounds:

1) a custom php shortcode that reads the url parameters to build the link to change from one view to another

2) this could also be done with some javascript code. Read the URL parameters and redirect accordingly

3) it would also be possible to change the look of the data using CSS and switch from one style to another using javascript too.

Let me know what solution suits you better.

Regards,
Caridad

[thomasL-2]

Hi Caridad,

Thanks for trying to implement this, I think this will be an interesting feature for a lot of other users as well (tutorial?!).

I think both 1) and 2) seem to be the most promising and compatible solutions. 2) probably the most convenient for the visitors depending on how the swithc looks (no page refresh necessary) - any chance we can try both?

Cheers,
Thomas

[Caridad]

Dear Thomas,

Let start with two pages. Each with a different View inside. One would be the grid view and the other one would be the list view and they both have identical query section.

Add a link like this in the HTML output section of both Views, pointing to each other:

<a href="/grid-view/" class="switch">Grid</a> | <a href="/list-view/" class="switch">List</a>

And then use this javascript (you need it in both Views):

jQuery( function( $ ) {
  $( 'a.switch' ).click( function() {
    var url = this.href + '?' + window.location.href.split('?')[1];
    window.location.href = url;
    return false;
  } );
} );

Please let me know if you are satisfied with my answer and if I can help you with any other questions you might have.

Regards,
Caridad