[Resolved] Can't add styling to filters because url changes onclick of a filter

[Author]

Posts

[enricoP]

I am trying to add styling to some filters i have added for a view template which i have created using your plugin. Basically i have created the filter by taxonomy and whenever i click on a filter term the post loop below shows me the posts of that taxonomy term. Everything is ok until here.

If you go here hidden link you'll see that the filters have a black border, and what i want to do is to make that border ( 2px solid #2F80ED; ) when the filter term is clicked or active. But neither the :active or :focus properties work for this and i have also tried doing the styling via Javascript and nothing works because when one filter term is clicked, automatically the url of the page changes and the styling won't work. Even when you switch between filters the styling won't work again.

If you could help me on fixing this it would be great because we need to go live ASAP and we can't get this issue fixed in time. I also tried a more complex Javascript getting the terms and giving the styling per url and term, but i can't figure this out and create the proper script without seeing the script that changes the url, and i don't know in which file you have added that script.

So there're two options here:
1- (BEST OPTION) You create the script to add the styling even when the url changes and fix this. I think it would be very easy and fast for you because you know where all the files that contain the "url changing script" are and can develop without breaking functionalities given that you know how everything works.
2- (OTHER OPTION) If you can't help me, at least point me in the right direction. Just tell me which JS file does the url change on the filter click so i can have a look at it and try to come up with a script. If you can also tell me which is the best way to have this done without editing too much of the files or creating very complex scripts, that would be great too because this way we don't waste time but get right into action.

P.S (I have added a screenshot of how the active filter should look like when clicked). If anything isn't clear, please reply to me and i'll send you more images showing what styling i'm trying to achieve, but i think this is pretty much easy to comprehend.

Thanks in advance.

[Minesh]

Hello. Thank you for contacting the Toolset support.

Well - I've added following JS code to view's JS filter ajax event:

jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', function( event, data ) {
	/**
	* data.view_unique_id Hash dell'ID univoco della vista (stringa) 
	* data.layout (oggetto) L'oggetto jQuery per il contenitore del layout della vista
	*/
  
    $(".radio input[type=radio]:checked").closest('label').addClass('myClass');
     
	
});

I can see the class is added to selected radio and its working - could you please confirm.
=> hidden link

[Minesh]

Could you please confirm solution I shared works for you.

[enricoP]

Hi.
That was a very quick and great solution, but there's still a little problem with it. Now the color of the button changes and remains like that, but as soon as you go down and click the Next button of the view pagination (MOSTRA ALTRI), the posts load again and now if you go up you'll see that the button doesn't have the styling we added via JS anymore.

Can you check that and fix also the issue when we click the pagination buttons.

Thanks

[Luo Yang]

Hi,

Minesh has one day vacation, you will get the response ASAP when he back.

[Minesh]

Well - I've also added the JS hook available for pagination and I can see it works now when you change pagination as well.

jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
	/**
	* data.view_unique_id Hash dell'ID univoco della vista (stringa) 
	* data.effect Effetto dell'impaginazione AJAX sulla vista (stringa) 
	* data.speed La velocità di impaginazione AJAX in millisecondi (numero intero) 
	* data.layout (oggetto) L'oggetto jQuery per il contenitore del layout della vista
	*/
   $(".radio input[type=radio]:checked").closest('label').addClass('myClass');
	
});

Could you please confirm?
=> hidden link

[enricoP]

Hi, one last thing. If you check the page, the posts are showing the featured image (post-thumbnail), but if i don't add a featured image to the post, then the default thumbnail image appears on the post. (check first post displaying on this page hidden link ) What i would need from you is, if you could add some php code to make the post-thumbnail not appear if there isn't any image added for the featured image.

Basically adding an.... if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
else {
return false;
}

This in order to not display anything as an image if a featured image hasn't been added on the post. Thanks

P.S (Please tell me which file you edited and what code you added because i need to import these changes also on another website)

[Luo Yang]

Hi,

Minesh isn't available, I will take care of this thread.
I suggest you try with wpv-conditional shortcode, to check if there is a post featured image, then display something, for example:

[wpv-conditional if="( NOT(empty($(_thumbnail_id))) )"]
featured  image is available
 [/wpv-conditional]

[wpv-conditional if="( empty($(_thumbnail_id)) )"]
featured  image is empty
 [/wpv-conditional]

More help:
https://toolset.com/documentation/user-guides/conditional-html-output-in-views/