Gists

<?php
// Disable FacetWP's query variables in the URL, except for Pager facets.
// To entirely disable FacetWP's query variables, see:
// https://facetwp.com/help-center/developers/the-facetwp-url/#disable-facetwps-query-string

add_action( 'facetwp_scripts', function() {
  ?>
  <script>
    document.addEventListener('facetwp-refresh', function() {

        FWP.buildQueryString = function() {

          var fwp_vars = Object.assign({});

          // Add pagination to the URL hash
          if (1 < FWP.paged) {
            fwp_vars['paged'] = FWP.paged;
          }

          fwp_vars = FWP.helper.serialize(fwp_vars, FWP_JSON.prefix);
          return fwp_vars;
        }

    });
  </script>
  <?php
}, 100 );

<?php
// If you are using the Submit Button add-on and want the redirect not to happen when your facet is empty, 
// use the following script and de-activate the add-on. This is basically the same as facetwp-submit.js, but with an 
// extra check in L13-14 to check if a specific facet is empty when the Submit button is clicked. If it is, the redirect does not happen.
// This can be useful to prevent 'empty' redirects for facet types that refresh themselves, like an Autocomplete facet that submits on Enter or clicking a selection.

add_action( 'facetwp_scripts', function() {
  ?>
  <script>
    (function($) {
      $().on('click', '.fwp-submit', function() {
        FWP.parseFacets();
        
        // Do nothing if this facet is empty
        if ( ! FWP.facets['my_facet_name'].length ) { // Replace 'my_facet_name' with the name of your facet
          return;
        }

        var href = $(this).attr('data-href');
        var query_string = FWP.buildQueryString();

        if (query_string.length) {
          var prefix = (-1 < href.indexOf('?')) ? '&' : '?';
          href += prefix + query_string;
        }

        window.location.href = href;
      });
    })(fUtil);
  </script>
  <?php
}, 100 );

<?php 
// Pre-select the first facet choice when this choice is unknown / different on each page the facet is placed on
// To pre-select a know choice, use the 'facetwp_preload_url_vars' hook instead:
// https://facetwp.com/help-center/developers/hooks/querying-hooks/facetwp_preload_url_vars/

add_action( 'facetwp_scripts', function() {
  ?>
  <script>
    document.addEventListener('facetwp-refresh', function() {
      if ( !FWP.loaded ) { // Only on first page load
        var facet_name = 'my_facet_name';  // Change 'my_facet_name' to the name of your facet
        if ( 'object' == typeof FWP.facets[facet_name] && 1 > FWP.facets[facet_name].length ) {
          var temp = document.createElement('div');
          temp.innerHTML = FWP_JSON.preload_data.facets[facet_name];
          var first = temp.getElementsByClassName('facetwp-radio'); // for a Radio facet, change if needed
          first = first[1]; // Pre-select the second choice, skips the first "Any" choice. Use first[0] if there is no "Any" choice
          FWP.facets[facet_name] = [ first.getAttribute('data-value') ];
          FWP.loaded = 1; // force TRUE to make an AJAX request & populate results
        }
      }
    });
  </script>
  <?php
}, 100 );


// Alternative: Pre-select using a page refresh with window.location.href instead of facet refresh

add_action( 'facetwp_scripts', function() {
    ?>
      <script>
        document.addEventListener('facetwp-refresh', function() {
            if ( !FWP.loaded ) {
                var facet_name = 'my_facet_name';  // Change 'my_facet_name' to the name of your facet
                if ( 'object' == typeof FWP.facets[facet_name] && 1 > FWP.facets[facet_name].length ) {
                    var temp = document.createElement('div');
                    temp.innerHTML = FWP_JSON.preload_data.facets[facet_name];
                    var first = temp.getElementsByClassName('facetwp-radio'); // for a Radio facet, change if needed
                    first = first[1]; // Pre-select the second choice, skips the first "Any" choice. Use first[0] if there is no "Any" choice
                    FWP.facets[facet_name] = [ first.getAttribute('data-value') ];
                    let qs = FWP.buildQueryString();
                    let href = window.location.href
                    let prefix = (-1 < href.indexOf('?')) ? '&' : '?';
                    window.location.href = href + prefix + qs;
                }
            }
        });
      </script>
    <?php
}, 100 );

<?php
/**
 ** hide a reset button header in mobile facet when no facets are selected
 ** auto-hide option does not yet work for mobile header
 **/

add_action( 'wp_head', function() {
    ?>
    <script>
    (function($) {
        $(document).on('facetwp-loaded', function() {
            if ('' != FWP.buildQueryString()) {
                $('.flyout-row.name-my_reset').show(); // change my_reset to name/slug of your reset facet
            } else {
                $('.flyout-row.name-m_-reset').hide(); // change my_reset to name/slug of your reset facet
            }
            });
    })(jQuery);
    </script>
    <?php
}, 100 );

<?php
/** adds script to header 
 **/
add_action( 'wp_head', function() { ?>
	<script>
		(function($) {
        $(document).on('facetwp-refresh', function() {
            if (FWP.loaded && 'recipes' != FWP_HTTP.uri) { // if not the initial pageload, and we're on the homepage
                window.location.href = '/recipes/?' + FWP.buildQueryString(); // redirect
            }
        });
    })(jQuery);
	</script>
<?php } );

add_action( 'facetwp_scripts', function() {
    ?>
    <script>
    document.addEventListener('facetwp-loaded', function() {    
        if ('' != FWP.buildQueryString()) {
            fUtil('.facetwp-template').removeClass('facetwp-hidden');
        } else {
            fUtil('.facetwp-template').addClass('facetwp-hidden');
        }
    });
    </script>
    <?php
}, 100 );

<script>

(function($) {
  $(document).on('facetwp-loaded', function() {
    var in_use = ('' != FWP.buildQueryString());
    $('.your-reset-btn').toggleClass('hidden', ! in_use);
  });
})(jQuery);

</script>

<style>
/* add to your stylesheet */
.hidden { display: none; }
</style>

<?php
/** update check for facets in url for use with direct links with vars in url
 ** https://facetwp.com/how-to-hide-the-template-until-facets-are-selected/
 **/
add_action( 'wp_head', function() { ?>
    <script>
        (function($) {
            $(document).on('facetwp-loaded', function() {
                if (FWP.loaded ||  '' != FWP.buildQueryString()) {
                    $('.facetwp-template').addClass('visible');
                }
            });
        })(jQuery);
    </script>
<?php }, 10, 2 );

<script>

/*
Code placement: see the "Javascript" section on https://facetwp.com/how-to-use-hooks/
This assumes that your reset button looks like this:

<a class="my-reset-btn" onclick="FWP.reset()">RESET</a>
*/

(function($) {
    $(document).on('facetwp-loaded', function() {
        var qs = FWP.buildQueryString();
        if ( '' === qs ) { // no facets are selected
            $('.your-reset-btn').hide();
        }
        else {
            $('.your-reset-btn').show();
        }
    });
})(jQuery);

</script>

<?php

// Add to your (child) theme's functions.php

add_action( 'wp_head', function() {
?>
    <script>
        (function($) {
            $(document).on('facetwp-loaded', function() {
                var facets_in_use = ('' != FWP.buildQueryString());

                // see https://api.jquery.com/toggle/
                // TRUE to show, FALSE to hide
                $('.btn-reset').toggle(facets_in_use);
            });
        })(jQuery);
    </script>
<?php
}, 100 );