[Resolved] Conditional filters on search view

[Author]

Posts

[avansisI-2]

Hello,

I have a page with custom type search view and i want to show conditional filters between heteratical taxonomies.

Page: hidden link

ie: When user clics on taxonomy, then appears a different taxonomy. User clics on Taxonomy A, then appear taxonomy B.

I tried with jQuery but i dont know how it works. I have got appear, but it doesnt work when i uncheked checkboxes.

Can you help me?
Thank you

[Minesh]

Hello. Thank you for contacting the Toolset support.

Do you mean that you have a hierarchical taxonomy frontend filter added to your custom search view.

For example - And it as terms added like:

- A
-- aaa
-- bbb
- B
-- xyz
-- pqr

Do you mean that, when you click on term A, then it should present you the further (child) terms aaa and bbb?

Please correct me If I do not understand your issue and share bit more details. Few screenshots would be helpful to understand your issue.

[avansisI-2]

Hello Minesh,

Thank you for your supporting.
I was wring about hieteratical.

Attach a screenshot, i would be helpful for you.

I have got two different taxonomies (as you can see on image):

When users clic on AGUA, OBAS E INGENIERÍA checkbox (taxonomy A), web will display 'Subsectores de Agua, obras e ingeniería' (another taxonomy: taxonomy B)

Thats how i need.

[Minesh]

There is no native way to do so.

You need to use the custom Javascript to show/hide the taxonomy on checkbox change event.

[avansisI-2]

Yes, i tried with javascript code but it doesnt work.

This is the code:

( function agua( $ ) {
$( document ).ready( function(){

$('.aguas').hide();

$('.wpv-category').change( function(){
var current = $(this).val();
if ( $('#post_category-' + current ).is(':checked')){
$('.aguas').show();
}else {
$('.aguas').hide();
}
});
});
})( jQuery );

( function automocion( $ ) {
$( document ).ready( function(){

$('.automocion').hide();

$('.wpv-category').change( function(){
var current = $(this).val();
if ( $('#post_category-' + current ).is(':checked')){
$('.automocion').show();
}else {
$('.automocion').hide();
}
});
});
})( jQuery );

( function construccion( $ ) {
$( document ).ready( function(){

$('.construccion').hide();

$('.wpv-category').change( function(){

if ( this.checked && $(this).val() == 'construccion' ){
$('.construccion').show();
}else {
$('.construccion').hide();
}
});
});
})( jQuery );

( function equipo( $ ) {
$( document ).ready( function(){

$('.equip').hide();

$('.wpv-category').change( function(){

if ( this.checked && $(this).val() == 'equipamiento-maquinaria-y-herramientas' ){
$('.equip').show();
}else {
$('.equip').hide();
}
});
});
})( jQuery );

( function equipoElectrico( $ ) {
$( document ).ready( function(){

$('.wpv-equipos-electrico-renovables').hide();

$('.wpv-category').change( function(){

if ( this.checked && $(this).val() == 'equipos-material-electrico-y-energias-renovables' ){
$('.wpv-equipos-electrico-renovables').show();
}else {
$('.wpv-equipos-electrico-renovables').hide();
}
});
});
})( jQuery );

( function agro( $ ) {
$( document ).ready( function(){

$('.agro').hide();

$('.wpv-category').change( function(){

if ( this.checked && $(this).val() == 'industria-agroalimentaria-y-agricultura' ){
$('.agro').show();
}else {
$('.agro').hide();
}
});
});
})( jQuery );

( function otrosProductos( $ ) {
$( document ).ready( function(){

$('.otrosproductos').hide();

$('.wpv-category').change( function(){

if ( this.checked && $(this).val() == 'otros-productos-industriales' ){
$('.otrosproductos').show();
}else {
$('.otrosproductos').hide();
}
});
});
})( jQuery );

( function subcontratacion( $ ) {
$( document ).ready( function(){

$('.subcontratacion').hide();

$('.wpv-category').change( function(){

if ( this.checked && $(this).val() == 'subcontratacion-industrial' ){
$('.subcontratacion').show();
}else {
$('.subcontratacion').hide();
}
});
});
})( jQuery );

It works partially because i dont know how set unchecked checkboxes.
When i uncheck checkbox, it will not display correctly

Can you help me?

[Minesh]

Can you please share admin access details so I can further check whats going wrong with your code and setup.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.

[Minesh]

Using the access details you shared, I can see you have 33 published view but I could not access any views:
=> hidden link

Can you please make sure you grant the admin user you shared full admin access.

[avansisI-2]

Yes, ' i gave you admin role

It could be a Toolset bug. Sometimes, Views dissappears.

[Minesh]

To your view's "Search and Pagination" section's JS editor I've added the following JS code:
=> hidden link

jQuery( document ).ready( function($){
      // hide all checkboxes fields on load
        $('.construccion').hide();
  	$('.automocion').hide();
});

jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', function( event, data ) {
	/**
	* data.view_unique_id (string) The View unique ID hash
	* data.layout (object) The jQuery object for the View layout wrapper
	*/
	
  jQuery('input[name="wpv-category[]"]:checked').each(function(){
         if (jQuery(this).val() == 'construction' ){
                jQuery('.construccion').show();
            }
    		if (jQuery(this).val() == 'automotive-signalling-transport' ){
                jQuery('.automocion').show();
            }
    
  });
  
  jQuery('input[name="wpv-category[]"]:not(:checked)').each(function(){
         if (jQuery(this).val() == 'construction' ){
                jQuery('.construccion').hide();
            }
    		if (jQuery(this).val() == 'automotive-signalling-transport' ){
                jQuery('.automocion').hide();
            }
    
  });
  
});

I've added the code for "AUTOMOTIVE, SIGNALLING, TRANSPORT" and "CONSTRUCTION" checkboxes options. You should configure all other checkboxes options with the help of above sample code.

[avansisI-2]

Thank you for your supporting Minesh,

Its working fine!

Thank you