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);