Gists

5 days ago
/** example of converting a checkbox facet to a toggle
 ** svg icons
 ** https://fontawesome.com/icons/toggle-off?f=classic&s=solid
 ** https://fontawesome.com/icons/toggle-on?f=classic&s=solid
 ** convert to css background image https://www.svgbackgrounds.com/tools/svg-to-css/
**/

.facetwp-checkbox {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M384 128c70.7 0 128 57.3 128 128s-57.3 128-128 128H192c-70.7 0-128-57.3-128-128s57.3-128 128-128H384zM576 256c0-106-86-192-192-192H192C86 64 0 150 0 256S86 448 192 448H384c106 0 192-86 192-192zM192 352a96 96 0 1 0 0-192 96 96 0 1 0 0 192z"/></svg>');
  background-size: 37px 33px;
  padding-left: 41px;
}

.facetwp-checkbox.checked {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M192 64C86 64 0 150 0 256S86 448 192 448H384c106 0 192-86 192-192s-86-192-192-192H192zm192 96a96 96 0 1 1 0 192 96 96 0 1 1 0-192z"/></svg>');
  
}

/** to also remove labels **/
.facetwp-checkbox {
  width: 37px;
  height: 33px;
  margin: 0;
  padding: 0;
}

.facetwp-checkbox .facetwp-display-value,
.facetwp-checkbox .facetwp-counter{
  display: none;
} 
2 weeks ago
// Automatically keep the fSelect facet drowndown open when a selection was made.
// Keeps the fSelect facets dropdown open on page reload when a selection is in the URL.
// Intended for pages with one fSelect facet. If you have multiple fSelect facets on the page, use this snippet:
// https://gist.facetwp.com/gist/automatically-open-multiple-fselect-facet-dropdowns-when-a-selection-is-active/

add_action( 'wp_footer', function() {
  ?>
    <script>
      (function($) {

        document.addEventListener('facetwp-loaded', function() {
          const facet = 'my_fselect_facet'; // Change to your fSelect facet name
          let selected = FWP.facets[facet];
          if (selected.length) {
            $(`.facetwp-facet-${facet} .facetwp-dropdown`).nodes[0].fselect.open();
          }
        });

      })(fUtil);
    </script>
  <?php
}, 100 );
2 weeks ago
// Automatically keep fSelect facet drowndowns open when a selection was made.
// Keeps fSelect facets dropdowns open on page reload when a selection is in the URL.
// Intended for pages with multiple fSelect facets. If you only have one fSelect facet, use this snippet:
// https://gist.facetwp.com/gist/automatically-open-single-fselect-facet-dropdowns-when-a-selection-is-active/
// Closes all fSelects on click.
// Add or remove fSelect facet names to the facets array as needed.

add_action( 'wp_footer', function() {
  ?>
    <script>
      (function($) {

        function fselectClick() {
          window.fSelectInit.activeEl = '';
          $('.facetwp-type-fselect .facetwp-dropdown').nodes[0].fselect.close();
          document.removeEventListener('click', fselectClick);
        }

        document.addEventListener('facetwp-loaded', function() {
          const facets = ['my_fselect_facet_one', 'my_fselect_facet_two', 'my_fselect_facet_three']; // Add or remove fSelect facets
          facets.forEach(facet => {
            if (FWP.facets[facet].length) {
              $(`.facetwp-facet-${facet} .facetwp-dropdown`).nodes[0].fselect.open();
            }
          });
          document.addEventListener('click', fselectClick);
        });
        
      })(fUtil);
    </script>
  <?php
}, 100 );
1 month ago
<?php

/** reloads window instead of using ajax
 ** for facet pager clicks
 **/
add_action( 'wp_head', function() {
?>
<script>
document.addEventListener('facetwp-refresh', function() {
    if ( FWP.loaded && null !== FWP.active_facet ) {
          let facet = FWP.active_facet;
          let facet_type = facet.attr('data-type');
          if ( 'pager' == facet_type ) {
                FWP.setHash();
                window.location.reload();
            }
        }
});
</script>
<?php
}, 100 );
1 month ago
<?php

/** experimental compatibility for generateblocks query loop https://wordpress.org/plugins/generateblocks/
 ** tested for use in pages not archives
 ** add facetwp-template class to the loop's grid - https://d.pr/i/JbABCf - this is a setting on the grid not the query
 **/

add_filter( 'generateblocks_query_loop_args', function( $query_args, $attributes ) {
    if ( ! empty( $attributes['className'] ) && strpos( $attributes['className'], 'facetwp-template' ) !== false ) {
        $query_args['facetwp'] = true;
        if ( FWP()->request->is_preload &&  isset( FWP()->request->url_vars['paged'] ) ) {
            $page = (int) FWP()->request->url_vars['paged'];
        } elseif ( isset( $_POST['data']['paged'] ) ) {
            $page = (int) $_POST['data']['paged'];
        } else {
            $page = 1;
        }
        if ( 1 < $page ) { 
            $offset = ( $query_args['posts_per_page'] * ( $page - 1 ) );
            $query_args['paged'] = $page;
            $query_args['offset'] = $offset;
        }
    }
    return $query_args;
}, 10, 2 );
2 months ago
<?php

// Without this snippet, the Autocomplete facet's SQL is using " LIKE '%value%'", which returns partial matches.
// With the snippet, it will use " = 'value'", resulting in only matches in the filtered post results that are exactly the entered value.
// For results starting with the value, see: 
// https://gist.facetwp.com/gist/facetwp-autocomplete-facet-return-only-results-starting-with-the-value-entered/

add_filter( 'facetwp_wpdb_sql', function( $sql, $facet ) {

  if ( 'my_autocomplete' == $facet['name'] ) { // Replace 'my_autocomplete' with the name of your Autocomplete facet
    global $wpdb;
    $sql = $wpdb->remove_placeholder_escape( $sql );
    $sql = str_replace(" LIKE '", " = '", $sql);
    $sql = str_replace("%", "", $sql);
  }

  return $sql;
}, 10, 2 );
2 months ago
<?php

// Without this snippet, the Autocomplete facet's SQL is using " LIKE '%value%'", which returns partial matches.
// With the snippet, it will use " LIKE 'value%'", resulting in only matches in the filtered post results that start with the entered value.
// For exact matches, see: 
// https://gist.facetwp.com/gist/facetwp-autocomplete-facet-return-only-results-matching-the-exact-value-entered/

add_filter( 'facetwp_wpdb_sql', function( $sql, $facet ) {

  if ( 'my_autocomplete' == $facet['name'] ) {
    global $wpdb;
    $sql = $wpdb->remove_placeholder_escape( $sql );
    $sql = str_replace("LIKE '%", "LIKE '", $sql);
  }

  return $sql;
}, 10, 2 );
2 months ago
<?php
/** filter main query using while specifiying the page
 ** with FWP()->helper->get_uri()
 ** use page without domain and /'s, ex. 'somepage/mypage'
 **/

add_filter( 'facetwp_is_main_query', function( $is_main_query, $query ) {
    if ( 'my_page' == FWP()->helper->get_uri() && 'my_cpt' == $query->get( 'post_type' ) ) {
        $is_main_query = true;
    }
    return $is_main_query;

}, 10, 2 );
2 months ago
<?php

// Gets the 'address_components' of the place clicked/selected in a Proximity facet.
// Note that the 'address_components' array consists of multiple components per item. 
// E.g. for 'Amsterdam' it contains the long_name, short_name and types[] for the city, the province and the country.
// More info:
// https://developers.google.com/maps/documentation/javascript/reference/places-service#PlaceResult
// https://developers.google.com/maps/documentation/javascript/reference/geocoder#GeocoderAddressComponent

add_action( 'wp_footer', function() {
  ?>
    <script>
      (function($) {
        $(document).on('click', '.location-result', function() {
          var $facet = $(this).closest('.facetwp-facet');
          var place_id = $(this).attr('data-id');
          var description = $(this).find('.result-description').text();

          FWP_MAP.placesService.getDetails({
            placeId: place_id,
            fields: ['address_components']
          }, function(place, status) {
            if (status === google.maps.places.PlacesServiceStatus.OK) {
              var firstaddresscomponent = place['address_components'][0]; // get only the first address_component, mostly the place name
              console.log(firstaddresscomponent['types']);
            }
          });
          
        });
      })(jQuery);
    </script>
  <?php
}, 100 );
2 months ago
/** JS snippet from plugin author to remove dgwt_wcas from url on default
 ** WordPress search page to be compatible with Facet
 ** https://wordpress.org/support/topic/search-not-working-properly-6/#post-12724511
 ** Note: this should not be necessary anymore with FiboSearch v1.23.0.1+ which fixed the issues this snippet solves:
 ** https://wordpress.org/support/topic/incompatible-with-facetwp-3/#post-16644278
 
 **/
(function ($) {
    $(document).ready(function () {
		var $flags = $('[name="dgwt_wcas"]');
		
		if($flags.length){
		    $flags.remove();
		}
    });
})(jQuery);