oficinasuport-wp-plugin/includes/custom-field-ajuts-filter-function-frontend.php

<?php                                                                                                    
/**
 * Function to display the front end checkboxes for the ajut filter 
 *
 * references:
 * basic start
 * https://www.advancedcustomfields.com/resources/creating-wp-archive-custom-field-filter/
 * 
 * wordpress full form example
 * https://wordpress.stackexchange.com/questions/383599/form-checkbox-value-going-to-dynamic-url
 *
 * checkbox adaptation query
 * https://wordpress.stackexchange.com/a/102915
 *
 * form GET and POST
 * https://www.formget.com/php-checkbox/
 * 
 * @package Oficina_de_Suport_theme
 */
?>
<?php
if( ! function_exists( 'ofisuport_ajuts_filters_form') ) {
  function ofisuport_ajuts_filters_form() {
?>
    <div id="archive-filters" class="ofisuport-filters">
    <?php
    // output all possible values of a checkbox
    $groupkey = "group_63ab636898703"; // write here the key for the group of fields from acf
    if( $groupkey ) {
    ?>
      <?php // start the form ?> 
      <form id="form-ajuts" name="search-ajuts">
      
      <?php
      $groupkey_fields = acf_get_fields($groupkey);
      foreach( $groupkey_fields as $field_key ) {
        
        if( $field_key['type'] == 'checkbox' ){
        
          // https://wordpress.stackexchange.com/a/102915
          $fields = get_field_object($field_key['key']);
          if( $fields ) {
        
            // check for values from meta fields db in url
            foreach( $GLOBALS['my_query_filters'] as $key => $fieldname ) {
        
              // check for values in url and  get value if available
              if( isset($_GET[ $fieldname ]) ) {
                $filteredvalues['value'] = explode(',', $_GET[ $fieldname ]);
              } else {
                $filteredvalues['value'] = []; 
              };
              //end check for values in url
        
              // construct the checkboxes
              if( $fieldname == $fields['name']) {
?>      
 
        <section id="fund-filter fund-filter-<?php echo $fields['name']; ?>" class="<?php echo $fields['name']; ?>"> 
          <h5 class="oficinasuport-titol-opcions"><?php echo $fields['label'];?></h5>
            <?php  foreach( $fields['choices'] as $choicevalue => $choicelabel ) { ?>
 
            <div class="filter" data-filter="<?php echo $fields['name'];?>">
            <input class="ofisuport-filter" type="checkbox" name="<?php echo $fields['name'];?>" <?php if( in_array( $choicevalue, $filteredvalues['value']) ) { echo 'checked'; } ?> value="<?php echo $choicevalue; ?>" />
              <label for="<?php echo $choicevalue; ?>"><?php echo $choicelabel;?></label>
            </div>
 
            <?php };//end foreach fields['choices'] ?>
 
        </section>
 
        <?php  }; //end if fieldname == fields['name'] ?>
        <?php  // end of construct checkboxes ?>
                
           <?php }; // end check for values from meta fields db in url ?>
 
         <?php }; //end if field_key['key'] ?>
       
        <?php }; //end if type checkbox ?>
 
      <?php }; //end foreach groupkey field ?>
      <?php //echo '<p><span id="filterlink"></span></p>';?>
      <p><a id="submitfilteredlink" name="submit-ajut" class="button button-more" href="">enviar</a> </p>
      </form>
      <?php //close the form and subit ?>
 
      <?php }; //end if groupkey ?>
      <aside id="search-form-ajuts" class="ofisuport-search-ajuts">
        <?php
         // search form for custom post type 'oficinasuport-ajut'
         // <input type="hidden" value="ofisuport-ajut" name="post_type" id="post_type" />
         // https://developer.wordpress.org/reference/functions/get_search_form/#comment-369
         // https://wordpress.stackexchange.com/questions/313037/restrict-a-sear  ch-to-a-custom-post-type
        ?>
        <form class="ofisuport-search-form" role="search" method="get" action="/">
        	<label class="screen-reader-text" for="search">Search in ajuts</label>
          <input type="search" id="search" class="search-field" placeholder="cerca amb paraula clau..." value="<?php the_search_query(); ?>" name="s" />
          <input type="submit" id="searchsubmit" class="search-submit" value="cerca">
          <span class="ofisuport-search-submit ofisuport-icon-search"></span>
          <input type="hidden" value="ofisuport-ajut" name="post_type" id="post_type" />
        </form>   
      </aside>
</div>
 
<script type="text/javascript">
 
(function($) {
    // change
    $('#archive-filters').on('click', 'input', function(){
        
        // vars 
        var url = '<?php echo home_url('ajuts/'); ?>';
            args = {};
        var appendtoURL = '';
        var eachfiltered = '';
        var valueschecked = '';
        
        // loop over filters
        $('#archive-filters .filter').each(function(){
           // check if is first appearance of each
           if( eachfiltered != $(this).data('filter') ){
             // save already calculated field=val01,val02,val03
             if( eachfiltered != '' && valueschecked != '' ){
               // remove last ','
               valueschecked = valueschecked.slice(0, -1);
               appendtoURL += eachfiltered +'=' +valueschecked +'&';
             };
             // start new fieldname filtered
             eachfiltered = $(this).data('filter');
             // reset values 
             valueschecked = '';
             // find checked inputs 
             $(this).find('input:checked').each(function(){
               // if not empty save value and ,
               if( $(this).val() != '' ){
                valueschecked += $(this).val() + ',';
               };
             });
             //alert( appendtoURL +":" +eachfiltered +"=" +valuescheked);
           } else {
             // we have previous values checked
             // find checked inputs
             //if( $(this).val() != '' ){
               // if not empty append value and ,
               $(this).find('input:checked').each(function(){
                 valueschecked += $(this).val() + ',';
               });
             //alert( appendtoURL +":not:" +eachfiltered +"=" +valuescheked);
             //};
           };
        });
        
        // remove last ','
        valueschecked = valueschecked.slice(0, -1);
        // save last cycled filtered value already calculated field=val01,val02,val03
        appendtoURL += eachfiltered +'=' +valueschecked +'&';
 
        // remove last &
        appendtoURL = appendtoURL.slice(0, -1);
        
        // update url
        url += '?' +appendtoURL;
 
        // show or modify the url
        //alert( url );
        //$('#filterlink').text(url);
        
        // convert a href url to new value
        $('#submitfilteredlink').attr('href',url);
 
    });
 
})(jQuery);
</script>

<?php
  }; //end ofisuport_ajuts_filters_form
}; // end if ! functions_exists
?>