2 months ago
<?php
// Syncs the selected values of two facets with different types when using one of the facets.
// The facets need to use the same Data Source.
// Change 'categories_radio' and 'categories_dropdown' to the names of your facets.
// Caveat: both facets will ghost each other's choices. This may not be optimal/desired.
// This can be fixed with the second snippet. Until a Dropdown facet has ghosts, this is not (yet) possible for Dropdowns.
add_action( 'facetwp_scripts', function() {
?>
<script>
document.addEventListener('facetwp-refresh', function() {
if (null !== FWP.active_facet) {
if ( 'categories_radio' == fUtil(FWP.active_facet.nodes[0]).attr('data-name' ) ) {
FWP.facets['categories_dropdown'] = FWP.facets['categories_radio'];
} else if ( 'categories_dropdown' == fUtil(FWP.active_facet.nodes[0]).attr('data-name' ) ) {
FWP.facets['categories_radio'] = FWP.facets['categories_dropdown'];
}
}
});
</script>
<?php
}, 100 );
// Optional: remove unclickable ghosts from the Radio facet
add_filter( 'facetwp_facet_html', function( $output, $params ) {
if ( 'categories_radio' == $params['facet']['name'] ) {
$output = str_replace ( 'disabled' , '' , $output );
}
return $output;
}, 10, 2 );
3 months ago
<?php
// FacetWP does NOT officially support TranslatePress. It supports WPML and Polylang, with the Multilingual add-on:
// https://facetwp.com/help-center/using-facetwp-with/multilingual/
// Some users do use TranslatePress successfully with FacetWP.
// However, we get reports of inconsistent translations of facet choices before and after facet filtering.
// These issues are reportedly solved by adding this refresh snippet to the (child) theme's functions.php:
add_action('facetwp_scripts', function () {
?>
<script>
document.addEventListener('facetwp-refresh', function() {
if ( !FWP.loaded ) {
FWP.loaded = true;
FWP.refresh();
}
});
</script>
<?php
}, 100);
2 months ago
<?php
// Automatically updates the text in a specific element with the class "facet-one-selections",
// with the value of the selected choice of a specific facet (with the name 'facet_one' in this example).
// The code assumes the facet is a single-choice type facet (e.g. Dropdown or Radio).
// Note that the text displayed is the facet_value (the technical value as shown in the URL) is used, not the facet_display_value as shown in the facet
// To make the text value more readable and looking like the value as displayed in the facet,
// the script replaces dashes in the value with spaces. If needed use the optional CSS to add capitals, as described.
// The example includes an optional part for a second facet (with the name 'facet_two'), which selection will be displayed in the element with class "facet-two-selections".
// If facet-one has selections, the text in facet-two-selections will be prepended with 'and'. This assumes a setup in which the 2 HTML elements are next to each other, e.g.:
// <span class="facet-one-selections"></span><span class="facet-two-selections"></span>
// To display an “x results found for [keywords]” message when a Search facet is in use, see this similar setup:
// https://facetwp.com/help-center/facets/facet-types/search/#display-an-x-results-found-for-keywords-message
add_action( 'facetwp_scripts', function() {
?>
<script>
document.addEventListener('facetwp-refresh', function() {
// Add the selected choice of facet one to the HTML item with class "facet-one-selections"
var selected_choices = FWP.facets['facet_one']; // Replace "facet_one" with the name of your facet
var updatedElement_choices = document.querySelector('.facet-one-selections');
// Update the text content of the element with class "facet-one-selections"
if (updatedElement_choices) {
if (selected_choices.length) { // If any choice in this facet is selected
var selected_choices_withoutdashes = selected_choices[0].replace(/-/g, ' '); // Replace dashes with spaces
updatedElement_choices.textContent = selected_choices_withoutdashes;
} else {
updatedElement_choices.textContent = '';
}
}
// Optional: use a 2nd facet and add its choice to the HTML item with class "facet-two-selections"
var selected_choices2 = FWP.facets['facet_two']; // Replace "facet_two" with the name of your 2nd facet
var updatedElement_choices2 = document.querySelector('.facet-two-selections');
// Update the text content of the element with class "facet-two-selections"
if (updatedElement_choices2) {
if (selected_choices2.length) { // If any choice in this facet is selected
var selected_choices2_withoutdashes = selected_choices2[0].replace(/-/g, ' '); // Replace dashes with spaces, because the facet_value (the technical value as shown in the URL) is used
updatedElement_choices2.textContent = '';
// optional prepend ' and ' if facet one does not have a selection
if ( updatedElement_choices.textContent !== '' ) {
updatedElement_choices2.textContent = ' and ';
}
updatedElement_choices2.textContent += selected_choices2_withoutdashes;
} else {
updatedElement_choices2.textContent = '';
}
}
// end optional 2nd facet
});
</script>
<?php
}, 100 );
// Optional: use one of the CSS capitalization rules (and delete the others):
add_action( 'wp_head', function() {
?>
<style>
/* Capitalize first letters of all words */
.facet-selections {
text-transform: capitalize;
}
/* Capitalize only the first letter of the first word */
.facet-selections::first-letter {
text-transform: uppercase;
}
/* Capitalize all letters */
.facet-selections {
text-transform: uppercase;
}
</style>
<?php
}, 100 );
7 months ago
<?php
add_action('facetwp_scripts', function () {
?>
<script>
(function($) {
document.addEventListener('facetwp-refresh', function() {
if ( 'undefined' != typeof FWP_MAP && true === FWP_MAP.is_filtering) {
$('.facetwp-location').val(''); // reset the value of the input field
$('.facetwp-lat').val(''); // reset hidden field
$('.facetwp-lng').val(''); // reset hidden field
$('.facetwp-radius option').each(function () {
if (this.defaultSelected) {
this.selected = true;
return false;
} // reset default radius if it is a dropdown
});
FWP.facets['my_proximity_facet'] = []; // change 'my_proximity_facet' to name of your Proximity facet
}
});
})(fUtil);
</script>
<?php
}, 100);
9 months ago
<?php
// Resets a facet on first page load only, if it has a selection in the URL.
// Can be used if users have bookmarked links with now non-existing facet choices.
// Retains other facet choices.
// Part 1: Reset the facet choice by preloading the empty url vars for it on first page load
add_filter( 'facetwp_preload_url_vars', function( $url_vars ) {
if ( 'demo/cars' == FWP()->helper->get_uri() ) { // Replace 'demo/cars' with the URI of your page (everything after the domain name, excluding any slashes at the beginning and end)
if ( ! empty( $url_vars['myfacetname'] ) ) { // Replace 'myfacetname' with the name of your facet
$url_vars['myfacetname'] = []; // Replace 'myfacetname' with the name of your facet
}
}
return $url_vars;
} );
// Part 2: Remove the facet's URL vars for the facet
add_action( 'facetwp_scripts', function() {
?>
<script>
document.addEventListener('facetwp-refresh', function() {
if ( ! FWP.loaded ) { // Only on first page load
var facet_name = 'myfacetname';
if ( 'object' == typeof FWP.facets[facet_name] && FWP.facets[facet_name].length ) {
FWP.facets[facet_name] = []; // Remove choices
FWP.setHash(); // Reset the URL vars
}
}
});
</script>
<?php
}, 100 );
4 months ago
<?php
// https://facetwp.com/help-center/developers/javascript-reference/facetwp-refresh/#reset-all-other-facets-on-change-of-a-specific-facet
add_action( 'facetwp_scripts', function() { ?>
<script>
document.addEventListener('facetwp-refresh', function() {
let facet_name = 'my_facet_name'; // Change 'my_facet_name' to the name of the facet that resets other facets.
if ( null !== FWP.active_facet && facet_name == fUtil(FWP.active_facet.nodes[0]).attr('data-name' ) ) {
let others = FWP.facets;
Object.keys(others).forEach(function (key) {
if ( facet_name != key ) {
FWP.facets[key] = [];
}
});
}
});
</script>
<?php }, 100 );
12 months ago
<?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 );
1 year ago
<?php
/** this will migrate old urls with sort value to new sort facet value
** if you have a facetwp_sort_options filter, you need to keep it
** sort option name/slug (value displayed in url) in the new sort facet needs to
** match old sort
**/
add_filter( 'facetwp_preload_url_vars', function( $url_vars ) {
if ( ! empty( $url_vars['sort'] ) ) {
$url_vars['my_sort_facet'] = $url_vars['sort']; // change 'my_sort_facet' to name of your sort facet
}
return $url_vars;
});
add_action( 'facetwp_scripts', function() {
?>
<script>
document.addEventListener('facetwp-refresh', function() {
if ( FWP.loaded ) {
FWP.extras.sort = '';
}
});
</script>
<?php
}, 100 );
1 year ago
<?php
add_action( 'facetwp_scripts', function() { ?>
<script>
(function($) {
document.addEventListener('facetwp-refresh', function() {
if ( FWP.soft_refresh == true ) {
FWP.enable_scroll = true;
} else {
FWP.enable_scroll = false;
}
});
document.addEventListener('facetwp-loaded', function() {
if (FWP.enable_scroll == true) {
var template = document.getElementsByClassName('facetwp-template');
if ( 'object' == typeof template && undefined != template[0] ) {
var offset = template[0].offsetTop;
window.scrollTo({
top: offset,
behavior: "smooth",
});
}
}
});
})(fUtil);
</script>
<?php } );
1 year ago
<?php
add_action( 'facetwp_scripts', function() {
?>
<style>
.facetwp-template {
opacity: 1;
transition: opacity 0.5s linear;
}
.facetwp-template.template-loading {
opacity: 0;
}
</style>
<script>
document.addEventListener('facetwp-refresh', function() {
if ( FWP.loaded ) {
fUtil( '.facetwp-template' ).addClass( 'template-loading' );
}
});
FWP.hooks.addAction('facetwp/loaded', function() {
fUtil( '.facetwp-template' ).removeClass( 'template-loading' );
});
</script>
<?php
}, 100 );