FacetWP Filters - Reset facets on click of a radiobutton

Question

does anyone work with FacetWP? I am trying to reset certain filters if the user selects one of the radio options from the facet "ex_type".

If one any of the radio options are selected, I want this to then reset the other facets automatically.

Facetwp have a function "onclick="FWP.reset()" however from the backend I cannot access the radio buttons. I need to target the radio button choices with a separate jquery function as below, however my code is not working.

Here is the view from my backend:

<div class="group-individual">                                                              

    <?php echo facetwp_display( 'facet', 'ex_type'); ?>

</div>      

<div class="sub-filters" >

        <div class="day">                                   

            <?php echo facetwp_display( 'facet', 'day' ); ?>

        </div>

        <div class="time">

            <?php echo facetwp_display( 'facet', 'time' ); ?>

        </div>

</div><!--sub-filters-->    

The actual code for the "ex_type" radio buttons displayed is this:

<div class="group-individual">

<div class="facetwp-facet facetwp-type-radio" data-name="ex_type" data-type="radio">

    <div class="facet-wrapper">

        <div class="facetwp-radio" data-value="classes">
        "classes"
        </div>

        <div class="facetwp-radio" data-value="individual">
        "individaul"
        </div>

    </div>

</div>

</div>

I have tried to refresh the other facet choices with a click function but it is not working. The code I have tried is:

<script>
$(document).ready(
   function(){
     $(".facetwp-radio").click(function () {   
       FWP.reset('day');
     });
}); 
</script>

And also this:

<script>
$(document).ready(
   function(){
     $(".facetwp-radio").click(function () {   
        FWP.facets['day'] = []; 
        FWP.facets['time'] = []; 
     });
}); 
</script>

Any suggestions welcomed. Thank you.

Answer 1

According to Facet WP's documentation , you could add the following html in order to reset the wanted facet : <button onclick="FWP.reset('day')">Reset Day</button> .

All you finally need to do, is some customization over this button.