[Resolved] Change Archive Sorting Type From Radio Buttons To Dropdown Menu on Small Devices

[Author]

Posts

[Ray Mitchell]

Tell us what you are trying to do?
Change Archive Sorting Type From Radio Buttons To Dropdown Menu on Small Devices

Is there any documentation that you are following?
None to follow

Is there a similar example that we can see?
Not that I'm aware of

What is the link to your site?
Link to the page that displays the archive in question: hidden link

What I am trying to figure out is a way to change my Toolset Archive filtering/sorting from Radio Buttons to a Select (Dropdown Menu) on small devices. I've tried duplicating the sorting/filter controls and wrapping them in a div that displays on small devices only and, it displays the dropdown version of the sorting controls on mobile just fine BUT, when I do this, the desktop version of the sorting controls stop working. My guess is that there's a conflict in how resources are loaded to run the sorting/filtering controls based on the sorting/filtering type I choose (radio vs select).

Long story short, I want to display radio buttons on medium and large devices and a dropdown/select menu on small devices.

Here's what I have at the moment that almost works, but kills the sorting function on desktop. You can see that I've wrapped the "radio button" version in a div class named "med-lrg-device-sort" and the "select/dropdown" version in a div class named "sm-device-sort".

If you resize your browser window, you can see that the different sorting/filtering types diplay at the correct screen sizes, it's just that the radio buttons don't work any longer with this solution. Below is my code at the moment.

[wpv-filter-start]
<div class="form-group vid-cats">
[wpv-filter-reset reset_label="VIEW ALL" type="button" output="bootstrap" class="vid-grid-reset-btn"]
<div class="med-lrg-device-sort">[wpv-control-post-taxonomy taxonomy="video-category" type="radio" default_label="" url_param="wpv-video-category"]</div>
<div class="sm-device-sort">[wpv-control-post-taxonomy taxonomy="video-category" type="select" default_label="" url_param="wpv-video-category"]</div>
</div>
[wpv-filter-end]

ALSO, please see the attached graphic for a visual reference for what I'm trying to make happen.

Thanks for your help! 🙂

[Shane]

Hi Ray,

Thank you for getting in touch.

It should still work if you use css to swap them for mobile and desktop.

Could you re-add the css and the classes to the page so that I can see what happens?

Thanks,
Shane

[Ray Mitchell]

Hi Shane!
I have added the dropdown/select html for Mobile back to the view.

Again, the issue I’m having is that when I add it, it stops the radio buttons that are visible on desktop stop working/sorting.

I know this is a public post but, you can hide my login info.

[Shane]

Hi Ray,

Thank you for the patience.

I've added this to your site and it should resolve the issue for you.

if(jQuery(window).width() >= 1024){
  // do your stuff
  jQuery('.sm-device-sort').remove();

}

The filters should be working fine now.

Thanks,
Shane

[Ray Mitchell]

Hi Shane!
Thank you for your help in getting this working. The only problem I'm seeing is that the desktop filters only work for one selection. For example, when I load the page, I can only make one selection such as "Client Reviews". Then when I click another button to change the view to say, TV Features, it doesn't change/load the videos for TV Features.

Do you know why it is behaving this way?

I hope you have time to solve this issue today as I need to show it to the client.

Again, thank you very much for your help, Shane. You always give excellent support!

Speak soon,
Ray

[Shane]

Hi Ray,

Doesn't seem that we will get this to work with just 1 view.

You will perhaps need to use 2 separate view for this. One view for dekstop and a second for mobile.

I suspect the problem is that because the view is still loading both filters at the same time, the view code is still picking up the double filters.

So going the 2 view route would be best and just load the correct one depending on the browser window size.

Thanks,
Shane

[Ray Mitchell]

Oh, ok.
So, given that the view we are talking about is an archive view for the video custom post type, how can I make it so there are two views in use for the different screen sizes? That's the bit I'm confused about.

Please advise me as to how I need to go about making this happen.

Many thanks!
Ray

[Christian Cox]

Hi there, Shane is out this week on holiday so I've been asked to look into some of his tickets. I hope that's okay. I read through the comments so far and I think I understand the issue. Unfortunately there is no easy way to create two WordPress Archives to display on the same page like this. It's also not possible to split the filters and results using separate shortcodes, like you can with a custom search View.

So I'd like to present a couple of alternative options here.
1. Since the search filters are relatively simple (you're really only filtering by the taxonomy terms), you could create basic HTML links that display at a large screen resolution. Create a select filter in the WPArchive, and use CSS to show it at very small screen sizes using the "d-block" class. The select filter could continue to use AJAX, but the link-style filters must trigger a full page refresh. More information about Bootstrap's responsive utility display classes here: https://getbootstrap.com/docs/4.3/utilities/display/#notation
This is probably the simplest solution, but it does not support AJAX submission of the HTML link filters.

2. If AJAX is very important for the experience, it's best to remove the filters from this WPArchive and create two new Views of Videos, also filtered by the video-category taxonomy, using URL parameters. One View should have the radio filter like you currently display, and the other View should have a select filter like you want to display on mobile devices. Then in the WPArchive you already have created, remove everything from the wpv-loop tags. Instead, place the two Views just before the wpv-items-found shortcode. One of the Views should be inserted as filters only, and the other should be inserted using separate shortcodes for filters and results. If you're not familiar with displaying Views using separate shortcodes, use the Fields and Views button above the Loop editor to select the View. Then in the next popup, you'll be able to choose whether you want to display only the filters, only the results, or both.

Wrap the two filter shortcodes in divs where you have applied Bootstrap's responsive utility classes to show or hide them at different resolutions.

Let me know if you have questions about either approach and I can offer some more direct guidance.